完整日历-4不呈现事件

Question

我正在将一个完整的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();

    });

下面是我的CFC从CFC服务返回的JSON示例

{
    "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"
    }
}

因此，所有这些都运行到了从CFC和calendar.render()触发返回JSON的地步，我得到了一个没有事件的很好的日历。

我知道我漏掉了什么，但我一根手指也摸不着.

Answer 1

FullCalendar期望您的事件提要URL返回的JSON包含一个简单的事件数组，而没有其他任何内容。这里遇到的问题是，您正在返回一个更复杂的对象，而日历代码不知道在其中获取事件数据的位置。

在您上面发布的示例JSON中，您的服务器应该通过该URL生成并返回到fullCalendar的唯一比特是：

[
    {
        "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
}]

Answer 2

谢谢你送我走正确的道路。我已经实现了以下事件函数，并且它正在工作。

我创建了这个事件函数，它正在工作

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); 
                        })
                    },