Drupal Technical

[Drupal] How to create a custom fullcalendar module using the jQuery fullcalendar with different options and events

Arjun | | 5 min read


Fullcalendar is a jQuery plugin which gives a full-sized calendar with drag-and-drop and with many other features. Events can be dragged on to the calendar and can be resized. It uses AJAX to dynamically load the events on the fly. In this article I will explain how to enable the fullcalendar with different options and loading events dynamically from the database.

Enabling the fullcalendar interface

If you need the calendar in your website, first download the fullcalendar files in zip format from here. Unzip the file and copy the js and css files in to the module folder of the custom module fullcalendar to use. Since we need to customize the fullcalendar in our own way, we need a custom script.js file associated with the fullcallendar. We will override all the event functions and options needed in this custom js file.

Now add the needed js and css files including the custom js file in to your module file using the drupal_add_js function.

In your custom js file you can write the following code to enable the
fullcalendar interface.


  $(document).ready(function() { 
	// page is now ready, initialize the calendar... 
	$('#calendar').fullCalendar({ 
		// put your options and callbacks here 
	}) 
  });

Here the id “calendar” is the id of the div in which the calendar has to be loaded. We only need to load the fullcalendar interface after loading all the DOM (Document Object Model) objects, so we have written it in the document.ready() event, which will only be initialized after loading the document completely.

 

 

Using different options

The main advantage of the fullcalendar interface is that it is customizable. Different options are provided for the developers to change the system at their own will, without editing the core. All the options can be given in the custom js file which we have created. The following are some options that are mostly used.

  1. SlotMinutes:

    This option allows as to set the amount of time for each slot of time. By default it is 30 minutes. You can change it according to your need by simply setting its vaue.

    
	slotMinutes : "<"some value">",

    This should be written in the custom js file. One problem that you may encounter is to set the slotMinutes value dynamically, since changing the slotMinutes values will not refresh your calendar interface. To tackle it you can write the whole fullcalendar loading code in a function and call it in the event on which you need to change the value, for example, in the change event of a drop down box or on a click of a button and so on.

  2. defaultView

    This option can be set to different values which will be the default view for the calendar at the time it is loaded. The different options are agendaDay, month, basicday etc.

  3. slotEventOverlap

    This option is very usefull in determinig whether or not the events need to be overlapped. The values can be true or false.

  4. allDay

    This option of an event determines whether an event is all the day or not. If it is an all day event then the start and end time is the start and end time of the calendar.

  5. minTime and maxTime

    These options can be used to limit the calendar start and end time. If not set, the default will be the day start and day end.

  6. start and end

    These options can be used to set the start and end of an event which is being dropped into the interface.

Fullcalendar events

  1. drop

    This event is called when something is dropped into the calendar interface. The things like saving the events to the database, altering the event date etc can be done in this event.

  2. eventResize

    This event is called at the time of resizing an event which is already in the calendar.

  3. events

    This fullcalendar event is used to load events from an event source at the time of loading the fullcalendar interface.

  4. eventRender

    This event is called before rendering an event to be loaded to the interface.

Some useful methods

  1. destroy

    This method is used to destroy the fullcalendar object currently displayed. This is very useful when re-rendering the events or re-fetching the events, then there will be multiple instances of the calendar being displayed. To avoid this we can destroy the current calendar before re-fetching the events.

  2. renderEvent

    This method is used to render an event before it is loaded i to the interface.This is useful when we are loading events from an event source (json object etc), then we can render each events to display it in the calendar.

  3. removeEvents

    This method can be used to remove all or specific events from the calendar. The second parameter of this function is the id of the event to be removed. If no id is specified the all the events will be removed.

Loading events dynamically from an event source.

Event source can be anything like json object, array etc. Here we are loading events from the database by an AJAX call, and the events are returned as a json object. The arrays returned are rendred and loaded in to the calendar. Here we can use different methods and events discussed above.

We are writing the code in the fullcalendar event “events”, which is used as the event source. AJAX is used to call the drupal menu and the data is returned as a json object which will be decoded and rendered as events. The following is the sample code used to load events from database.


	events: function(start, end, callback, day) {
            $.ajax({
                url : '/calendar/load_events',
                type : 'POST',
                success : function(data) {
                   //data is a json object and is decoded using the jQuery 
			 //function jQuery.parseJSON(data)
                      event1.push({
				//In this event the details of each event like 	
					//id,title,start,end etc are set.
                      });
                  });
		//Here event1 is the name of the temporary event object for 
 		//rendering each events, and callback of event will load the
 			//event in to the interface.
                  $('#calendar').fullCalendar('renderEvent', event1,true);
                  callback(event1);
                  }
                },
            });
          },

Here the url passed to the ajax is a drupal menu, what happens here is the callback function of the menu item will be called on the ajax call, and the data creation and database queries are written in the menu callback function in the module file.

These are the basic functionalities and options of the fullcalendar, there are many other options to be explored. For detailed information and functionalities go to the official website of Fullcalendar

Related Topics