0

我正在将工作的 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 从 Web 服务返回的 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 返回 JSON 并触发 calendar.render() 的地步，我得到了一个没有事件的漂亮日历。

我知道我错过了一些东西，但我不能指望它。，

4

2 回答 2

0

谢谢你让我走上正确的道路。我已经实现了以下事件功能并且它正在工作。

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

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); 
                        })
                    },
于 2019-05-03T13:34:50.010 回答
0

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
}]
于 2019-05-02T08:22:01.187 回答