Javascript – jQueryUI FullCalendar: Callback after events have been fetched from server

fullcalendarjavascriptjquery-ui

I use the jQueryUI FullCalendar from Adam Shaw (http://arshaw.com/fullcalendar/docs/event_data/events_function/).

When I press the next button the calendar loads new events from my server and I would like to show these events also as a table on my page, not only in the calendar. Is there a callback function that I can inject to do something with the events, once FullCalendar has fetched them? Or is there any other way to get the currently shown events?

Best Answer

For others seeking out this solution, it's pretty easy in V2. You can pass a success callback using the simple events object.

        $('#calendar').fullCalendar({
            events: {
                url: 'http://yourdatafeed',
                type: 'POST',
                error: function() {
                    // Alert on error
                },
                success: function (data) {
                    // data will have your json array of event objects
                },
            }
        });

Related Solutions

Php – FullCalendar not displaying time from JSON events

Try adding 'allDay': false to your json. I had the same issue, see 'allDay' documentation specifically:

Don't include quotes around your true/false. This value is not a string!

When specifying Event Objects for events or eventSources, omitting this property will make it inherit from allDayDefault, which is normally false.

However, 'allDayDefault' defaults to true?!?

http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

http://arshaw.com/fullcalendar/docs/event_data/allDayDefault/

Javascript – ID of an event (Fullcalendar)

I found the solution! When you create any event, put your uniqe id here :

var shift = calendar.fullCalendar('renderEvent',
        {
            id: shift_id,
            title: current_name,
            start: new Date(y, m, d + current_day, current_start_time_h, current_start_time_m),
            end: new Date(y, m, d + current_day, current_end_time_h, current_end_time_m),
            allDay: false
        }, true // make the event "stick"
        );

After that this listener append ID in DOM structure:

     eventAfterRender:function( event, element, view ) { 
$(element).attr("id","event_id_"+event._id);
},

To get all your events on a field:

console.log(calendar.fullCalendar('clientEvents'));

Now you have array of events, and all event are numbered in DOM structure!

Best Answer

Related Solutions

Php – FullCalendar not displaying time from JSON events

Javascript – ID of an event (Fullcalendar)

Related Topic