Question

我正在将一个有效的fullcalendar 2.9实现更新到4.1版。我的4.1代码可以正常工作，可以将JSON数据呈现到日历中。它检索JSON数据，但不显示它。

我一直在查看来自fullcalendar.io的示例，但没有找到答案

这是我的开发服务器（ColdFusion 2016，CommonSpot 10，IIS等）中的代码

这里是因为我的内部开发箱未使用SSL证书。

id | type   | priority
---+--------+---------
1  | single | low
2  | carton | low
3  | single | high

这是日历实现

"winningPlan" : {
                        "stage" : "SORT",
                        "sortPattern" : {
                                "numReviews" : 1,
                                "rating" : -1
                        },

这是我的CFC从Web服务返回的JSON的示例

<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>

因此，所有这些都运行到从CFC返回JSON的时刻，并且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返回的内容，则必须在到达浏览器时转换数据。 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不呈现事件

2 个答案: