Как отправить значение JSON в FullCalendar и показать событие в календаре

Question

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

это массив, который я хочу показать в полном календаре.

Вот код 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

             }
        }
    },

    });

Я не знаю, как отправить значение массива вкалендарь. Я пробовал слишком много решений, но не смог понять. кто-нибудь поможет мне. Я использую fullCalendar 1.6.4.

Answer 1

Если вам необходимо выполнить некоторую пользовательскую обработку данных события после их загрузки, вам необходимо использовать шаблон «события как функция», как описано в документации . Затем вам предоставляется функция обратного вызова, которую вы используете для передачи событий обратно в fullCalendar.

Единственным недостатком является то, что вы сами несете ответственность за управление вызовом AJAX. Вот простой пример использования 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);
     });
}

Демонстрация: http://jsfiddle.net/Le507sqb/1/

Конечно, альтернативный подход - изменить код на стороне сервера, чтобы он выводил JSON в правильномформат, который может понять fullCalendar. Если вы сделаете это, то можете просто указать URL-адрес ваших событий и позволить fullCalendar сделать все остальное:

events: "/appointments/get_events/"