Event source FullCalendar

Question

I want to create a function to generate my events.

In the documentation of fullCalendar i've find something:

{
    events: function(start, end, callback) {
        // ...
    },
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

---

{
    events: function() {
        // ...
        for (var k=0; k<myarray.length; k++)
        {
            title: myarray[0][0],
            start: myarray[0][1]
        }
    },
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

Who does it mean start, end and callback?

I want to start the function when i load the calendar...

I want to do something like the second example... How can i do?

Thanks a lot

Answer 1

As is explained in the documentation, the events property, specified as a function, will be called by fullCalendar whenever it needs new event data. It will pass in 2 dates which represent the start and end dates of the currently viewed slice of time on the calendar. The third param given is a call back which your custom function should call when it has produced data for the given time frame, and you pass the generated event data to it.

When the calendar first loads, it needs data for whatever view it is currently displaying. For example, if it's in month view for the current date, start will be the first day of the current month, and end will be the last day of the current month. Your function should produce an event data array (formatted as specified in the documentation) for that range of time and pass it into the call back function which was given as param 3.

If the calendar is currently in month view, and displaying October 2010, and the user clicks the right button telling the calendar to advance to the next month, your function would be called with a start param of 1 Nov 2010 and an end param of 30 Nov 2010. You would produce event data for that time period and pass it into the callback param.

Based on the example which you gave (which has extreme JS syntax issues), I'd say you do not wish to use events as a function. Rather, your code should produce a properly formatted event data array before calling .fullCalendar() and pass that array as the events property instead. Example:

/* Assuming you have an array, myArray, which holds data about
 * your events, but is not in the format axpected by fullCalendar
 */

var formattedEventData = [],
    k;

for (var k = 0; k < myArray.length; k += 1) {
    formattedEventData.push({
        title: myarray[k][0],
        start: myarray[k][1]
    });
}

$('#targetElement').fullCalendar({
    events: formattedEventData,
    color: 'yellow',
    textColor: 'black'
});

Answer 2

I did the same thing as JAAulde said but with a model in asp.net and it work well. Here is the code if anyone ever need it :

$(document).ready(function () {
    var formattedEventData = [];

    @foreach (var item in Model){
            <text>
            formattedEventData.push({
            title: '@(item.name)',
            description: '@(item.description)',
            start:'@(item.startTimeHTML)',
            end: '@(item.endTimeHTML)',
            description: '@(item.description)'
            });
            </text>
        }

    var calendar = $('#calendar').fullCalendar({            
        events: formattedEventData
        });
});