fullCalendar jQuery, repeat every monday?

Question

Normally this is a event in calendar:

            {

                title: 'Test',

                start: '2012-06-08',

                end: '2012-06-08',

                url: 'test/test'

            },

Works fine. Although how can i make 1 event that shows on every Monday in the calendar? Or every tuesday and so on depend on what weekday/number you enter? Whats the param if there exists one?

If it does not exists, can I somehow modify and add the feature for making this happen? So you can enter a param like repeatEveryWeekDay: 2 (which is monday), then on all future mondays the data will show there.

I tried looking in http://arshaw.com/fullcalendar/docs/event_data/Event_Object/ but can't find anything.

Answer 1

fullCalendar permits that instead of passing an array of events, you can pass a function which, for example, downloads the events from a server, or dynamically generates those events.

Most examples in the documentation use HTTP requests to get events data. But the callback function is still flexible enough to make it work the way you want.

Look at the following example I've just written for you:

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: [
            // some original fullCalendar examples
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            }
        ]
    });

    // adding a every monday and wednesday events:
    $('#calendar').fullCalendar( 'addEventSource',        
        function(start, end, callback) {
            // When requested, dynamically generate virtual
            // events for every monday and wednesday.
            var events = [];

            for (loop = start.getTime();
                 loop <= end.getTime();
                 loop = loop + (24 * 60 * 60 * 1000)) {

                var test_date = new Date(loop);

                if (test_date.is().monday()) {
                    // we're in Moday, create the event
                    events.push({
                        title: 'I hate mondays - Garfield',
                        start: test_date
                    });
                }

                if (test_date.is().wednesday()) {
                    // we're in Wednesday, create the Wednesday event
                    events.push({
                        title: 'It\'s the middle of the week!',
                        start: test_date
                    });
                }
            } // for loop

            // return events generated
            callback( events );
        }
    );
});

The above function automatically generates an event for every Monday and Wednesday between two dates. The dates are indicated in start and end params. Those params are passed by fullCallendar. Events generated by the above function are returned to fullCallendar through the callback function in third param.

I use DateJS to test if a given date is monday.

UPDATE: If you want to mix static events and/or [more than one] repeatable event, you can use addEventSource.

Answer 2

A little update to Christopher Ramírez's post. Using fullCalendar at v2.2.3 and momentjs at v2.8.4 you need to amend couple of lines in the snippet above to make it work:

First:

function(start, end, callback) {}

to

function(start, end, status, callback) {}

as the third parameter is a boolean and the fourth is the callback function

Then:

for (loop = start.getTime();
     loop <= end.getTime();
...

to

for (loop = start._d.getTime();
     loop <= end._d.getTime();

as the start and end objects passed to the function are not Date objects and calling .getTime() on them will end up in 'Undefined is not a function' error.

And thats it! This amendments made it work for me.

Answer 3

It's the ID field of the event object that determines the repeatability of that event. Use the same ID for all your repeating events for a particular day of the week.

Answer 4

The best way I found to solve a repeat event is to setup a JSON call to your backend language (i'm using Django/Python).

so in the calendar options i would have:

events: { url: '/event-data', cache: false },

Then in my backend I take advantage of the parameters that get sent for the current displayed calendar 'start' and 'end' URL GET variables. I.e.:

hxxp://example.com:8000/event-data?start=2014-09-28&end=2014-11-09&_=1413553318353

a Get request would be sent from the events options, I then build events from a database/source file that lists repeat events along with regular calendar events, and send back just the list of events occurring in that date range in a JSON list.