JS Animated. How to work with FullCalendar plugin

For more info on the general display see http://arshaw.com/fullcalendar/docs/display/

Next comes the event source object. An "event source" is anything that provides FullCalendar with data about events. Since version 1.5, Event Objects can have "options" associated with them:

events: [
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 1, 9, 00),
					end: new Date(y, m, 1, 10, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 2, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 4, 16, 00),
					allDay: false
				},
				{
					title: 'Aliquam erat volpat. Duis ac turpis',
					start: new Date(y, m, 9, 16, 00),
					allDay: false
				},
				{
					title: 'Donec in velit vel ipsum',
					start: new Date(y, m, 10, 16, 00),
					allDay: false
				},
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 13, 9, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 15, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 17, 16, 00),
					allDay: false
				},
				{
					title: 'nteger rutrum ante eu lacusi',
					start: new Date(y, m, 18, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 19, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 23, 16, 00),
					allDay: false
				},
				{
					title: 'nteger rutrum ante eu lacus',
					start: new Date(y, m, 24, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 27, 16, 00),
					allDay: false
				},
				{
					title: 'Integer rutrum ante eu lacus',
					start: new Date(y, m, 28, 16, 00),
					allDay: false
				},
				{
					title: 'Vestibulum iaculis lacinia',
					start: new Date(y, m, 29, 16, 00),
					allDay: false
				},
				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 30, 9, 00),
					allDay: false
				}
			]
		});
		
	});
    </script>

In order to display new events, you can edit the existing standard JavaScript objects that FullCalendar uses to store information about a calendar event. You can copy  them to add more events. Below is an example of the part in your code that needs to be edited or copied:

				{
					title: 'Praent vestibulum',
					start: new Date(y, m, 1, 9, 00),
					end: new Date(y, m, 1, 10, 00),
					allDay: false
				},
                

Let’s take a closer look at the properties:

1.  title (String. Required)  – The text on an event’s element. E.g. can be changed to ‘A new event’,
2. start (Date. Required) – The date/time an event begins. For instance, if you are going to add a new event dated 05.23 (current year) that starts at 4.30 p.m., the line should be changed to: start: new Date(y, m, 23, 16, 30);
3. allDay (true or false. Optional) – Whether an event occurs at a specific time-of-day. This property affects whether an event’s time is shown. When specifying Event Objects for events or eventSources, omitting this property will make it inherit from allDayDefault, which is normally true.
4. end (Date. Optional) – The date/time an event ends.

• If an event is all-day… the end date is inclusive. This means an event with start Nov 10 and end Nov 12 will span 3 days on the calendar.
• If an event is NOT all-day… the end date is exclusive. This is only a gotcha when your end has time 00:00. It means your event ends on midnight, and it will not span through the next day.

For other events that you can use see http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

The code relies on there being an element with an id of "calendar" in the body of your page. The calendar will be placed inside this div:

This all allows you to see a month-based calendar with some random events on it.

Options

Most of FullCalendar’s documentation describes options that affect the look or behavior of the calendar. Options are usually set when the calendar is initialized, like this:

$('#calendar').fullCalendar({
weekends: false // will hide Saturdays and Sundays
});

Callbacks

Callbacks are sort of like options, but they are functions that get called whenever something special happens. In the following example, an alert box will appear whenever the user clicks on a day:

$('#calendar').fullCalendar({

    dayClick: function() { 

        alert('a day has been clicked!');

    }

});

For more information on the FullCalendar plugin you can visit http://arshaw.com/fullcalendar/. Here you can download the latest releases of the plugin as well as get support from the developers.

Feel free to check the detailed video tutorial below: