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.

If you guys need to change slot duration like 15min, 30min, 45 mitutes or 1 hour on axis times of your full calender than we can do it using slotDuration, slotLabelInterval and slotMinutes. Also you need to make selected times slot should 30min or 15min by mouse click then we can do it using snapDuration in fullcalender jquery plugin. Agenda views of other durations can be made with a custom view with type 'agenda'. The following options are specific to agenda view. However, there are numerous other options throughout the docs that affect the display of agenda view, such as the locale-related options and date/time display options. 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 drupaladdjs function.

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.

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.

   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.

Customize Fullcalendar Slots Games

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.

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.

Customize Fullcalendar Slots App

Customize Fullcalendar Slots Free

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

Customize Fullcalendar Slots Online