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 the properties

$(id).eventCalendar({
  eventsjson: 'file.json',
  locales: {
    locale: "es",
	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",
	moment: {
        "months" : [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
                "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ],
        "monthsShort" : [ "Ene", "Feb", "Mar", "Abr", "May", "Jun",
                "Julio", "Ago", "Sep", "Oct", "Nov", "Dic" ],
        "weekdays" : [ "Domingo","Lunes","Martes","Miércoles",
                "Jueves","Viernes","Sabado" ],
        "weekdaysShort" : [ "Dom","Lun","Mar","Mie",
                "Jue","Vie","Sab" ],
        "weekdaysMin" : [ "Do","Lu","Ma","Mi","Ju","Vi","Sa" ],
        "longDateFormat" : {
            "LT" : "H:mm",
            "LTS" : "LT:ss",
            "L" : "DD/MM/YYYY",
            "LL" : "D [de] MMMM [de] YYYY",
            "LLL" : "D [de] MMMM [de] YYYY LT",
            "LLLL" : "dddd, D [de] MMMM [de] YYYY LT"
        },
        "week" : {
            "dow" : 1,
            "doy" : 4
        }
    }
  }
}); 

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


Special thanks to: