Fullcalendar-4 не отображает события - PullRequest
Новая
       14

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

0 голосов
/ 01 мая 2019

Я обновляю рабочую реализацию 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 (), я получаю хороший календарь без событий.

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

Ответы [ 2 ]

0 голосов
/ 03 мая 2019

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

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

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); 
                        })
                    },
0 голосов
/ 02 мая 2019

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
}]
...