jquery event calendar demo page
DESCRIPTION
jqTRANSCRIPT
Fluid Calendar: calendar will be shown with the width of its parent. Size
is recalculated on window resize. So you can use it in your responsive
designs
Change Style as you like: You can edit the .css file to restyle
Light: Less than 8kb of Javascript(minified)
jQuery rules!: It uses all the power of jQuery, but you can also use it
with frameworks like Zepto.js
Highly customizable: You can change almost everything. Look at the
following examples
jQuery Event CalendarDemo PagejQuery plugin to show events in a calendar in a very confortable
way
Main features:
Human Date FormatMost of you don't like timestamp date format, so now you
can use another formats
$(id).eventCalendar({
eventsjson: 'file.json',
jsonDateFormat: 'human'
});
November 22nd events:
Default Demo No cache inline json
mon tue wed thu fri
1
4 5 6 7 8
11 12 13 14 15
18 19 20 21 22
25 26 27 28 29
November 2013
loading...
Example of jQuery Events Calendar
with default parameters
$(id).eventCalendar({
// link to events json
eventsjson: 'file.json'
});
Next events:
The plugin only calls once to the json
file, so it has to contain all events.
After that call, the plugin will filter the
results
$(id).eventCalendar({
eventsjson: 'file.json',
cacheJson: false
});
Next events:
The json is written directly inside the
plugin function via javaScript (no ajax
call to get the events).
var eventsInline = [{ json }];
$(id).eventCalendar({
jsonData: eventsInline
});
September 25th events:
LocalizationWe have total control about the
language of the plugin
Limit ResultsIt is possible to limit the number of
events to show. But if we click on a
day, results will not be filtered
Start week on SundayAlso you can customize the day when
the week starts
Next events:
mon tue wed thu fri
2 3 4 5 6
9 10 11 12 13
16 17 18 19 20
23 24 25 26 27
30
September 2013
25/9/2013 21:30
25/9/2013 23:30
26/9/2013 0:00
26/9/2013 0:30
Test Project 15 Brainstorming
Project 15 meeting
Project 15 meeting
Project 15 demo
mon tue wed thu fri
2 3 4 5 6
9 10 11 12 13
16 17 18 19 20
23 24 25 26 27
30
September 2013
25/9/2013 21:30
25/9/2013 23:30
26/9/2013 0:00
26/9/2013 0:30
Test Project 15 Brainstorming
Project 15 meeting
Project 15 meeting
Project 15 demo
mon tue wed thu fri
2 3 4 5 6
9 10 11 12 13
16 17 18 19 20
23 24 25 26 27
30
September 2013
There are no events in this period
lun mar mie jue vie
2 3 4 5 6
9 10 11 12 13
16 17 18 19 20
23 24 25 26 27
30
Septiembre 2013
mon tue wed thu fri
2 3 4 5 6
9 10 11 12 13
16 17 18 19 20
23 24 25 26 27
September 2013sun mon tue wed thu
1 2 3 4 5
8 9 10 11 12
15 16 17 18 19
22 23 24 25 26
29 30
September 2013
$(id).eventCalendar({
eventsjson: 'file.json',
monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
"Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ],
dayNames: [ 'Domingo','Lunes','Martes','Miércoles',
'Jueves','Viernes','Sabado' ],
dayNamesShort: [ 'Dom','Lun','Mar','Mie', 'Jue','Vie','Sab' ],
txt_noEvents: "No hay eventos para este periodo",
txt_SpecificEvents_prev: "",
txt_SpecificEvents_after: "eventos:",
txt_next: "siguiente",
txt_prev: "anterior",
txt_NextEvents: "Próximos eventos:",
txt_GoToEventUrl: "Ir al evento",
});
Septiembre 17th eventos:
$(id).eventCalendar({
eventsjson: 'file.json',
eventsLimit: 2
}); $(id).eventCalendar({
eventsjson: 'file.json',
startWeekOnMonday: false
});
Calendar displayYou can show all the days in a single line to make calendar widget smaller
$(id).eventCalendar({
eventsjson: 'file.json',
showDayAsWeeks: false
});
Next events:
Hide week daysHide the day names in the calendar
view
Next events:
17/9/2013 21:30
17/9/2013 23:30
Test Project 7 Brainstorming
Project 7 meeting
3025/9/2013 21:30
25/9/2013 23:30
26/9/2013 0:00
26/9/2013 0:30
Test Project 15 Brainstorming
Project 15 meeting
Project 15 meeting
Project 15 demo
September 2013
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
25/9/2013 21:30
25/9/2013 23:30
26/9/2013 0:00
26/9/2013 0:30
Test Project 15 Brainstorming
Project 15 meeting
Project 15 meeting
Project 15 demo
2 3 4 5 6
9 10 11 12 13
16 17 18 19 20
23 24 25 26 27
30
September 2013
25/9/2013 21:30
25/9/2013 23:30
26/9/2013 0:00
26/9/2013 0:30
Test Project 15 Brainstorming
Project 15 meeting
Project 15 meeting
Project 15 demo
error getting json: json/events.json.php
$(id).eventCalendar({
eventsjson: 'file.json',
showDayNameInCalendar: false
});
Show EventsdescriptionEvents description is hide by default
(you can show it clicking on the event
title), but if you want they can be
always visible.
$(id).eventCalendar({
eventsjson: 'file.json',
showDescription: true
});
Next events:
Show all descriptionsBy default, the plugin only shows the
event that you select, but you can
open all the descriptions in which you
click on
$(id).eventCalendar({
eventsjson: 'file.json',
onlyOneDescription: false
});
Next events:
Animation SpeedAlso you can customize the speed
and the opacity of the widget
animation
$(id).eventCalendar({
eventsjson: 'file.json',
moveSpeed: 2000,
moveOpacity: 1
});
Next events:
mon tue wed thu fri
2 3 4 5 6
9 10 11 12 13
16 17 18 19 20
23 24 25 26 27
30
September 2013
25/9/2013 21:30
25/9/2013 23:30
26/9/2013 0:00
26/9/2013 0:30
Test Project 15 BrainstormingLorem Ipsum dolor set
Project 15 meetingLorem Ipsum dolor set
Project 15 meetingLorem Ipsum dolor set
Project 15 demoLorem ipsum dolor sit amet, consectetur adipisicing elit, seddo eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex ea commodo consequat.
mon tue wed thu fri
2 3 4 5 6
9 10 11 12 13
16 17 18 19 20
23 24 25 26 27
30
September 2013
25/9/2013 21:30
25/9/2013 23:30
26/9/2013 0:00
26/9/2013 0:30
Test Project 15 Brainstorming
Project 15 meeting
Project 15 meeting
Project 15 demo
mon tue wed thu fri
2 3 4 5 6
9 10 11 12 13
16 17 18 19 20
23 24 25 26 27
30
September 2013
25/9/2013 21:30
25/9/2013 23:30
26/9/2013 0:00
26/9/2013 0:30
Test Project 15 Brainstorming
Project 15 meeting
Project 15 meeting
Project 15 demo
Events ScrollableIt is possible to add a Scroll panel for the events list to avoid
panel resize on date changes
$(id).eventCalendar({
eventsjson: 'file.json',
eventsScrollable: true
});
Next events:
Open links in new windowYou can open event links in a new window
$(id).eventCalendar({
eventsjson: 'file.json',
openEventInNewWindow: true,
showDescription: true // also it can be false
});
Next events:
@paradigmate
Paradigma Tecnológico
@vissit
Jaime Fernández
Special thanks to:
Nerea Navarro @nereaestonta - Translation &
Testing jQuery Event Calendar Plugin by Jaime Fernandez, ParadigmaTecnológico is l icensed under a Creative Commons
mon tue wed thu fri
2 3 4 5 6
9 10 11 12 13
16 17 18 19 20
23 24 25 26 27
30
September 2013
25/9/2013 21:30
25/9/2013 23:30
26/9/2013 0:00
Test Project 15 Brainstorming
Project 15 meeting
mon tue wed thu fri
2 3 4 5 6
9 10 11 12 13
16 17 18 19 20
23 24 25 26 27
30
September 2013
25/9/2013 21:30
25/9/2013 23:30
26/9/2013 0:00
26/9/2013 0:30
Test Project 15 BrainstormingLorem Ipsum dolor set
Project 15 meetingLorem Ipsum dolor set
Project 15 meetingLorem Ipsum dolor set
Project 15 demoLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliquip ex ea commodo consequat.
Juan Francisco del Río @juanriopacheco -
Javascript Knowledge
Nuria Martin @nmartins - Design
Luis Calvo @LuisCalvoDiaz - Testing
David Montalvo @davidmontalvo - Testing
Reconocimiento-CompartirIgual 3.0 Unported License.