Last Updated: November 19, 2020
· chrramirez

jQuey fullCalendar plugin and repeatable events and tasks

fullCalendar is amazing jQuey plugin to visually display and manage events and tasks. It allows you to use AJAX to fetch events/task on-the-fly and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source and dual licensed under the MIT or GPL Version 2 licenses.

To add events to the calendar, pass an events source object to the plugin:

    events: [
            title  : 'event1',
            start  : '2012-01-01'
            title  : 'event2',
            start  : '2012-01-05',
            end    : '2012-01-07'
            title  : 'task',
            start  : '2012-01-09 12:30:00',
            allDay : false // will make the time show

But what if you want to create a special infinitely repeatable event or task? Actually is straightforward to do. Just use an event source function. Source function will dynamically create the desired repeatable event.

fullCalendar will call this event source function whenever it needs new event data. This is triggered when the user clicks prev/next or switches views.

This function will be given start and end parameters, which are Date objects denoting the range the calendar needs events for. It will also be given callback, a function that must be called when the custom event function has generated its events.

Now, let's create a repeatable event. It will be a every monday meeting at 10:00 am.

$('#calendar').fullCalendar( 'addEventSource',        
    function(start, end, callback) {
        // When requested, dynamically generate a
        // repeatable event for every monday.
        var events = [];
        var monday = 1;
        var one_day = (24 * 60 * 60 * 1000);

        for (loop = start.getTime();
             loop <= end.getTime();
             loop = loop + one_day) {

            var column_date = new Date(loop);

            if (column_date.getDay() == monday) {
                // we're in Moday, create the event
                    title: 'Morning Meeting',
                    start: new Date(column_date.setHours(10, 00)),
                    end: new Date(column_date.setHours(10, 40)),
                    allDay: false
        } // for loop

        // return events generated
        callback( events );

Related protips:

jQuery: When to use $(document).ready() and when $(window).load()

4 Responses
Add your response

Wow, didn't think that 'events function' can be useful besides AJAX-fetching of events (as in the docs example)! Right what I need, thanks!

over 1 year ago ·

Great tip! We have worked with the fullcalendar plugin too and we also made a new look for it. You can check it out at:

over 1 year ago ·

I am pulling data from the database, and i have a colum named repeat which indicate the number of repeat days, how do i populate this in fullcalender

over 1 year ago ·

Thank you!. Very nice hack, I was searching for this. Since fullcaledar 2, already is released, would worth to take advantage of jQuery Moments library, which I did. Let me share my code

over 1 year ago ·