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

Localization

We have total control about the language of the plugin

With all the text in an external file

$(id).eventCalendar({
  eventsjson: 'file.json',
  locales: 'json/locale.es.php'
}); 

Human Date Format

Most of you don't like timestamp date format, so now you can use another formats

$(id).eventCalendar({
  eventsjson: 'file.json',
  jsonDateFormat: 'human'
});

Custom Date Format to display

Now you can change the format date to be displayed on events. I use moment.js to do it.

$(id).eventCalendar({
  eventsjson: 'file.json',
  dateFormat: 'dddd MM-D-YYYY'
});

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

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