How to send JSON value to FullCalendar and show event in calendar

Question

0:
Title: "start"
description: "yes"
end: 1609286400000
id: 210
name: "xyz"
start: 1609286400000

this is array I want to show in Full Calendar.

Here is code of javascript

$('#calendar').fullCalendar({
    // ... your code
    events: {
        url: "/appointments/get_events/",
        success: function(response) {
             results = JSON.parse(response)
             console.log(results)
             for (var i = 0; i < results.events.length; i++) {
               var counter = results.events[i];
               var title = counter.Title
               var start = counter.start

             }
        }
    },

    });

I don't know how to send an array value to the calendar. I try too many solutions but could not understand. anyone help me out. I'm using fullCalendar 1.6.4.

Answer 1

If you need to do some custom processing of the event data after it's downloaded then you need to use the events-as-a-function pattern as described in the documentation. You are then provided with a callback function which you use to pass the events back to fullCalendar.

The only downside is this means you are responsible for managing the AJAX call yourself. Here's a simple example using fetch()

events: function(start, end, callback) {
   fetch("/appointments/get_events/")
     .then((resp) => resp.json()) // Transform the JSON data into a variable
     .then(function(data) { 
        var eventsList = [];
        for (var i = 0; i < data.events.length; i++) {
          var event = {
            title: data.events[i].Title,
            start: moment(data.events[i].start)
          };
          eventsList.push(event);
        }
        callback(eventsList);
     });
}

Demo: http://jsfiddle.net/Le507sqb/1/

Of course an alternative approach would be to amend your server-side code so that it outputs JSON in the correct format which fullCalendar can understand. If you do that, then you could simply specify your events URL and let fullCalendar do the rest:

events: "/appointments/get_events/"