jQuery Event Calendar Demo Page

jQuery plugin to show events in a calendar in a very confortable way

Main features:

  • 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

Default Demo

Example of jQuery Events Calendar with default parameters

$(id).eventCalendar({
  // link to events json
  eventsjson: 'file.json' 
});

No cache

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
});

inline json

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
});

Localization

We have total control about the language of the plugin

$(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",
});

Limit Results

It is possible to limit the number of events to show. But if we click on a day, results will not be filtered

$(id).eventCalendar({
  eventsjson: 'file.json',
  eventsLimit: 2
});

Start week on Sunday

Also you can customize the day when the week starts

$(id).eventCalendar({
  eventsjson: 'file.json',
  startWeekOnMonday: false
});

Calendar display

You can show all the days in a single line to make calendar widget smaller

$(id).eventCalendar({
  eventsjson: 'file.json',
  showDayAsWeeks: false
});

Hide week days

Hide the day names in the calendar view

$(id).eventCalendar({
  eventsjson: 'file.json',
  showDayNameInCalendar: false
});

Show Events description

Events 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
});

Show all descriptions

By 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
});

Animation Speed

Also you can customize the speed and the opacity of the widget animation

$(id).eventCalendar({
  eventsjson: 'file.json',
  moveSpeed: 2000,
  moveOpacity: 1
});

Events Scrollable

It 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
});

Open links in new window

You can open event links in a new window

$(id).eventCalendar({
  eventsjson: 'file.json',
  openEventInNewWindow: true,
  showDescription: true // also it can be false
});

Special thanks to: