Fullcalendar-4 не отображает события

Я обновляю рабочую реализацию fullcalendar 2.9 до версии 4.1. Мой код 4.1 работает до такой степени, что он должен отображать данные JSON в календаре. Он извлекает данные JSON, но не отображает их.

Я просматривал примеры с fullcalendar.io, но не смог найти ответ

Вот код с моего сервера разработки (ColdFusion 2016, CommonSpot 10, IIS и т. д.)

Это здесь, потому что мой внутренний блок разработчика не использует сертификат SSL.

<cfif CGI.HTTPS IS "off">
            <cfset variables.s = 0>
            <cfset variables.url="http://" & #CGI.SERVER_NAME# & "/customCF/schoologyCalendar/controller/schoologyCalendarController.cfc?method=ajaxPassThrough">
        <cfelse>
            <cfset variables.s = 1>
            cfset variables.url="https://" & #CGI.SERVER_NAME# & "/customCF/schoologyCalendar/controller/schoologyCalendarController.cfc?method=ajaxPassThrough">
        </cfif>

Это реализация календаря

    <link href='/ADF/thirdParty/jquery/fullcalendar/4.1.0/packages/core/main.min.css' rel='stylesheet' />
    <link href='/ADF/thirdParty/jquery/fullcalendar/4.1.0/packages/daygrid/main.min.css' rel='stylesheet' />
    <link href='/ADF/thirdParty/jquery/fullcalendar/4.1.0/packages/bootstrap/main.min.css' rel='stylesheet' />

    <script src='/ADF/thirdParty/jquery/fullcalendar/4.1.0/packages/core/main.min.js'></script>
    <script src='/ADF/thirdParty/jquery/fullcalendar/4.1.0/packages/daygrid/main.min.js'></script>
    <script src='/ADF/thirdParty/jquery/fullcalendar/4.1.0/packages/bootstrap/main.min.js'></script>

    <script src='/ADF/thirdParty/jquery/fullcalendar/4.1.0/packages/moment/moment.js'></script>
    <script src='/ADF/thirdParty/jquery/fullcalendar/4.1.0/packages/moment-timezone/moment-timezone-with-data.js'></script>

    <script src='/ADF/thirdParty/jquery/fullcalendar/4.1.0/packages/moment/main.min.js'></script>
    <script src='/ADF/thirdParty/jquery/fullcalendar/4.1.0/packages/moment-timezone/main.min.js'></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
        var initialTimeZone = 'UTC';
        var loadingEl = document.getElementById('loading');
        var calendarEl = document.getElementById('fullCalendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['bootstrap','dayGrid', 'moment', 'momentTimezone'],
            themeSystem:'bootstrap',
            timeZone: "#request.dodea.regiondata[1].values.timeZone#",
            header: {
              left: 'prev,next today',
              center: 'title',
              right: 'dayGridMonth'
            },
            defaultView: 'dayGridMonth',
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            eventLimit: true, // allow "more" link when too many events
            events: {
                url: '#variables.url#',
                method: 'get',
                allDayDefault: false,
                startParam: 'start_date',
                endParam: 'end_date',
                extraParams:{
                    building_id: '#request.dodea.regiondata[1].values.schoology_id#',
                    state: #variables.s#
                }

            }

         });

      calendar.render();

    });

Вот пример JSON, который мой CFC возвращает из веб-сервиса.

{
    "event": [
        {
            "id": 1624074493,
            "title": "Int. Band to Music in the Parks",
            "description": "",
            "start": "2019-04-27 06:00:00",
            "has_end": 1,
            "end": "2019-04-27 21:30:00",
            "all_day": 0,
            "editable": 1,
            "rsvp": 0,
            "comments_enabled": 1,
            "type": "event",
            "realm": "school",
            "school_id": 102769929,
            "links": {
                "self": "http:\/\/api.schoology.com\/v1\/schools\/102769929\/events\/1624074493"
            }
        }
 ],
    "total": 56,
    "links": {
        "self": "http:\/\/api.schoology.com\/v1\/school\/102769929\/events?start_date=2019-04-28&start=0&limit=100"
    }
}

Итак, все это работает до того момента, когда JSON возвращается из CFC и срабатывает calendar.render(), я получаю хороший календарь без событий.

Я знаю, что я что-то упускаю, но я не могу указать на это пальцем.,


json fullcalendar fullcalendar-4
person Scott Stewart    schedule 01.05.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

FullCalendar ожидает, что JSON, возвращаемый URL-адресом вашего канала событий, будет содержать простой массив событий и ничего больше. Проблема здесь в том, что вы возвращаете более сложный объект, а код календаря не знает, где искать данные о событии внутри него.

Из примера JSON, который вы разместили выше, единственный бит, который ваш сервер должен создавать и возвращать в fullCalendar через этот URL-адрес, это:

[
    {
        "id": 1624074493,
        "title": "Int. Band to Music in the Parks",
        "description": "",
        "start": "2019-04-27 06:00:00",
        "has_end": 1,
        "end": "2019-04-27 21:30:00",
        "all_day": 0,
        "editable": 1,
        "rsvp": 0,
        "comments_enabled": 1,
        "type": "event",
        "realm": "school",
        "school_id": 102769929,
        "links": {
            "self": "http:\/\/api.schoology.com\/v1\/schools\/102769929\/events\/1624074493"
        }
    }
]

Остальное лишнее, а также сбивает с толку программное обеспечение календаря.

Если невозможно изменить то, что возвращает API, вам придется преобразовать данные, когда они достигнут браузера. FullCalendar предоставляет средство события как функция для учета подобных ситуаций. Единственным небольшим недостатком является то, что вы должны написать свой собственный код AJAX.

Замените раздел events: { ... чем-то вроде этого:

eventSources: [{
  events: function(info, successCallback, failureCallback) {
    var url = new URL('#variables.url#');
    var params = { 
      "start_date": info.start.toISOString(),
      "end_date": info.end.toISOString(),
      "building_id": '#request.dodea.regiondata[1].values.schoology_id#',
      "state": #variables.s#
    };
    url.search = new URLSearchParams(params);

    fetch(url)
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      successCallback(data.event); //just return the inner event array to fullCalendar
    })
    .catch(function(error) {
      failureCallback(error);
    });
  },
  allDayDefault: false
}]
person ADyson    schedule 02.05.2019
comment
к сожалению, это невозможно, так как я извлекаю данные из API другого приложения, и это предложение «все или ничего». - person Scott Stewart; 02.05.2019
comment
В этом случае вам нужно будет определить собственный источник событий. Смотрите обновленный ответ. - person ADyson; 02.05.2019

arrow_upward
0
arrow_downward

Спасибо, что направил меня по правильному пути. Я реализовал следующую функцию событий, и она работает.

Я создал эту функцию событий, и она работает

events: function(info, successCallback, failureCallback){
                        var url = '#variables.url#';
                        var completeURL = url + '&start_date=' + info.start + '&end_date=' + info.end + '&building_id=' + #request.dodea.regiondata[1].values.schoology_id# + '&state=' + #variables.s# + '&timezone=' + '#request.dodea.regiondata[1].values.timeZone#';

                        fetch(completeURL).then(function(response) {
                            return response.json();
                        })
                        .then(function(data) {
                            successCallback(data); 
                        })
                    },
person Scott Stewart    schedule 03.05.2019