javascript - fullcalendar js: fetching more events with ajax - Stack Overflow

admin管理员组

文章数量:1323323

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).

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).

• javascript
• json
• fullcalendar

Share Follow asked Nov 21, 2011 at 20:37 kecskekecske 64911 gold badge88 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 );
  }
});

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);
      );
  }
});

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
                });

     });

本文标签： javascriptfullcalendar js fetching more events with ajaxStack Overflow