loading fullcalendar events when the month changes

25
votes

So I'm a little unsure about how to structure my calendar events with fullcalendar. Currently, when my app loads I'm injecting a json events object into the body of my page, allowing me to init the full calendar quickly, and without an ajax call. On all subsequent month view changes I want to send an ajax request with the given month as an argument so I can pull in that months events. How would I go about doing this? Is this the lazyLoad feature? How can I get the calendar to use the local event data when it initially displays, but then use ajax requests for all subsequent months?

3
jqueryfullcalendar
path of least resistance is likely to be 100% ajax – charlietfl
This is what I ended up doing. Initially I wanted to bootstrap the app to make it more responsive, however this actually made the full calendar not render until all events were rendered. Moving to the ajax solution as you have suggested had the unintended consequence of the calendar rendering immediately then showing the events when they were available. This gives a better perceived performance, which is also a gain in my book. Thanks for the suggestion. – Greg

3 Answers

15
votes

Please note in the latest version the viewDisplay has been replaced with viewRender Find how to use it here

I use it like this

        viewRender: function (view, element) {
        }

You can get the start date and end date like this. view.start, view.end

5
votes

try to read the docs, events (as a json feed)
other option is refetch/render events every time date has changed viewDisplay

1
votes

When the json feed (mentioned by zlosim) does not seem to be enough for your ajax, you can either

  • use https://fullcalendar.io/docs/events-function which will be called whenever new data is required. This, however, caches the data internally it seems and the events for one day will not be requested twice. Also, the returned object is not reactive, seems to be cloned.
  • use a plain array for events, but pass a datesRender callback: https://fullcalendar.io/docs/datesRender you can then change your events array appropriately. This is called every time the visible dates change without caching.