Fullcalendar-4 不呈现事件

Question

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

    });

这是我的 CFC returns 来自网络服务 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"
    }
}

所以所有这些都运行到 JSON 从 CFC 返回并且 calendar.render() 触发的地步，我得到一个没有事件的漂亮日历。

我知道我遗漏了一些东西，但我不能指手画脚。，

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 returns 的内容，则必须在数据到达浏览器时对其进行转换。 FullCalendar 提供了 events as a function 设施来考虑这种情况。唯一的小缺点是您必须编写自己的 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); 
                        })
                    },

Fullcalendar-4 不呈现事件

Fullcalendar-4 doesn't render events

json

fullcalendar

fullcalendar-4