Customize Fullcalendar Slots

/ Comments off

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.

Customize Fullcalendar Slots

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.

Fullcalendar

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 online

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

Fullcalendar

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

close
We have added a few new modules to our site recently. Drupal Technical StumbleThis Leave a reply Your email address will not be published. Required fields are marked * Sean (not verified) access_time 16 Dec 2020 - 14:49 Hi there, I uploaded the files, enabled the modules to use SU, and now I see the link, but there is no icon...How can I fix this?Thanks,Sean webmaster access_time 16 Dec 2020 - 14:49 In reply to Icon doesn't show by Sean (not verified) What do you see when you view the source? Search for stumblethis_button and you should be able to see the code for the image and the URL. Then you should be able to troubleshoot from there. Juicy Couture Addict (not verified) access_time 16 Dec 2020 - 14:49 thanks for the post. would love to hear more of you. by the way, drupal's really popular nowadays as it has easy and fast features. you agree with me? thanks. Add new comment