CODEWITHSUNDEEP
javascriptjsonfullcalendar
kecske
kecske

Reputation: 649

fullcalendar js: fetching more events with ajax

I'm using fullcalendar, how can I fetch more events from same server side, multiple urls? The initial one works, I just want to add additional events when they arrive(ajax).

Upvotes: 0

Views: 12600

Answers (3)

sandhya murugesan
sandhya murugesan

Reputation: 114

The ajax call done can also insert in the calendar code

      $.ajax({ 
            url: url, 
            type: 'GET', 
            data: { }, 
            error: function() {
                alert('there was an error while fetching events!');
            } 
        }).done(function (doc) { 
                var event = Array();
                    $.each(doc, function(i, entry) 
                        event.push({title: entry.title, start: entry.start});
                    }); 
                 $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    defaultDate: '2014-06-12',
                    editable: true,
                    events: event
                });

     });

Upvotes: 0

justkt
justkt

Reputation: 14766

If each and every time you are using a different URL, then you can simply use addEventSource with the new URL.

If you are attempting to use the same URL, you can get all events (old and new) using refetchEvents.

You can also get the JSON and create the event as a client event using renderEvent. The latter is the most "ajax-y" of the options. In this case have your source return the JSON that represents the events, iterate through the array of new events, and call renderEvent on it.

// this call goes in a poll or happens when the something should trigger a
// fetching of new events
$.ajax({
  url: "path/to/event/source",
  success: function(data){
      $.each(data, function(index, event)
                $('#calendar').fullCalendar('renderEvent', event);
      );
  }
});

Upvotes: 1

zaoudis
zaoudis

Reputation: 120

You could use Ajax to get the data and then add dynamically the new source

$.ajax({
  url: "test.html",
  success: function(data){
       var source = { events: [
                            {
                                title: data.getTitle(),
                                start: new Date(year, month, day)
                            }
                ]};
                $('#calendar').fullCalendar( 'addEventSource', source );
  }
});

Upvotes: 4

Related Questions