rti-rg
Last Updated: February 25, 2016
·
22.79K
· chrramirez
249604 2106377737582 6861835 n

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:

$('#calendar').fullCalendar({
    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
                events.push({
                    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 );
    }
);
Say Thanks
Respond

4 Responses
Add your response

2957
40899089b857df34ab04b17f01b00831

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 ·
14447
Tim vector

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: http://www.creative-tim.com/product/full-calendar.

over 1 year ago ·
14992
1e463c9dad9f0c18e6b062dbb5988613

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 ·
15221
Db60ab82c750407116dddd4c56e53cab

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 https://github.com/cjalba/recurringEventsFullCalendar2/blob/master/events

over 1 year ago ·