如何让 eventSource 数据显示在 FullCalendar 上？

Question

我正在使用来自 https://fullcalendar.io 的 FullCalendar JavaScript 库（版本 5）。之前，我使用了日历的

events

属性并将其指向 JavaScript 函数。但是我有几种不同的事件类型。每个事件类型在日历上的样式都不同，我想为每个事件类型实现显示/隐藏功能。由于这些原因，我正在尝试使用

eventSources

。我的问题是日历不显示我传递给它的 eventSource 中的任何事件。

我现在尽量让事情变得简单，因为我试图让事情正常进行。我的 JavaScript 代码：

$(document).ready(function() {
        
        var calendar = new FullCalendar.Calendar($('#calendar')[0], {
            initialView: 'dayGridMonth',
            eventSources: [
                {
                    url: '/com/modules/calendar.cfc?method=getNofas',
                    failure: function() {
                        console.log('error fetching nofas');
                    },
                    color: 'green'
                }
            ]
        });
        calendar.render();
    });

下面是我的 ColdFusion 函数（如上述 URL 中指定的）返回的 JSON 数据示例，如我在浏览器工具中挖掘响应信息时所示。现在我只有一个事件。

[{"id":1,"title":"Test NOFA 1","start":"March, 22 2023 12:00:00 -0600","end":""}]

我没有在控制台中收到任何指示任何类型故障的消息，但日历仍然空白。有没有人有什么建议？这与 FullCalendar 在渲染之前不“等待”ColdFusion 函数调用的结果有什么关系吗？

Answer 1

所以我想通了。我认为我错误地尝试将我的

event.start

属性设置为

Date.getTime()

中的整数值。它需要实际的 Date 对象。感谢@ADyson 将我推向正确的方向。

原帖中的代码是成品的精简版，因为在我重新添加所有其他内容之前，我只是想获得最低限度的工作。我将在此处发布完整的 JavaScript 代码，以防它对以后的其他人有所帮助。该页面顶部有五个切换开关，用于显示或隐藏各种事件类型。开关值存储在

sessionStorage

中，以便它们可以在页面刷新之间保持不变。日历项目有工具提示，如果事件在日历中被切断，您可以查看事件的完整标题。

<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script> 
// Tooltips also require popper.js, but that's been included prior to this file

<script>
    
    const nofaForegroundColor = '#FFF';
    const nofaBackgroundColor = '#3CB371';
    const pendingRfcForegroundColor = '#FFF';
    const pendingRfcBackgroundColor = '#717D7E';
    const rfcForegroundColor = '#000000';
    const rfcBackgroundColor = '#F39C12';
    const outageForegroundColor = '#000000';
    const outageBackgroundColor = '#F08080';
    const eventForegroundColor = '#FFF'
    const eventBackgroundColor = '#5499C7'
    
    function loadSwitchValue(switchID) {
        var storedValue = undefined;
        
        switch(switchID) {
            case 'nofa':
                storedValue = sessionStorage.getItem('rangeChangeMgmtCalendarNofaToggle');
                break;
            case 'pendingRfc':
                storedValue = sessionStorage.getItem('rangeChangeMgmtCalendarPendingRfcToggle');
                break;
            case 'rfc':
                storedValue = sessionStorage.getItem('rangeChangeMgmtCalendarRfcToggle');
                break;
            case 'outage':
                storedValue = sessionStorage.getItem('rangeChangeMgmtCalendarOutageToggle');
                break;
            case 'event':
                storedValue = sessionStorage.getItem('rangeChangeMgmtCalendarEventToggle');
        }
        
        if(storedValue == 'true' || storedValue == null) {
            return true;
        } else {
            return false;
        }
    }
    
    function saveSwitchValue(switchID, value) {
        switch(switchID) {
                case 'nofa':
                    sessionStorage.setItem('rangeChangeMgmtCalendarNofaToggle', value);
                    break;
                case 'pendingRfc':
                    sessionStorage.setItem('rangeChangeMgmtCalendarPendingRfcToggle', value);
                    break;
                case 'rfc':
                    sessionStorage.setItem('rangeChangeMgmtCalendarRfcToggle', value);
                    break;
                case 'outage':
                    sessionStorage.setItem('rangeChangeMgmtCalendarOutageToggle', value);
                    break;
                case 'event':
                    sessionStorage.setItem('rangeChangeMgmtCalendarEventToggle', value);
        }
    }
    
    $(document).ready(function() {
        var calendarRendered = false;

        // Load previous switch values
        $('#nofaSwitch').prop('checked', loadSwitchValue('nofa'));
        $('#pendingRfcSwitch').prop('checked', loadSwitchValue('pendingRfc'));
        $('#rfcSwitch').prop('checked', loadSwitchValue('rfc'));
        $('#outageSwitch').prop('checked', loadSwitchValue('outage'));
        $('#eventSwitch').prop('checked', loadSwitchValue('event'));

        // Declare, initialize, and render the calendar
        var calendar = new FullCalendar.Calendar($('#calendar')[0], {
            initialView: 'dayGridMonth',
            editable: false,
            themeSystem: 'bootstrap',
            customButtons: {
                btnAddEvent: {
                    text: 'Add Special Event',
                    click: function() {
                        alert('clicked');
                    }
                }
            },
            headerToolbar: {
                start: 'prev,today,next',
                center: 'title',
                right: 'btnAddEvent'
            },
            eventDidMount: function(info) {
                $(info.el).tooltip({
                    title: info.event.title,
                    placement: 'top',
                    trigger: 'hover',
                    container: 'body'
                });
            },
            events: function(info, successCallback, failureCallback) {
                $.get('/com/modules/calendar.cfc?method=getCalendarEvents&output=json&start=' + info.start.valueOf() + '&end=' + info.end.valueOf() + '&nofas=' + $('#nofaSwitch')[0].checked + '&pendingRfcs=' + $('#pendingRfcSwitch')[0].checked + '&rfcs=' + $('#rfcSwitch')[0].checked + '&outages=' + $('#outageSwitch')[0].checked + '&events=' + $('#eventSwitch')[0].checked, function(data) {
                    var jsData = (JSON.parse(data)).dataset.row;
                    for(var i = 0; i < jsData.length; i++) {
                        switch(jsData[i].type) {
                            case 'nofa':
                                jsData[i].url = '/nofa.cfm?id=' + jsData[i].id;
                                jsData[i].id = i;
                                jsData[i].color = nofaForegroundColor;
                                jsData[i].backgroundColor = nofaBackgroundColor;
                                jsData[i].start = new Date(Date.parse(jsData[i].start));
                                jsData[i].allDay = true;
                                break;
                            case 'pendingRfc':
                                jsData[i].url = '/rfc.cfm?id=' + jsData[i].id;
                                jsData[i].id = i;
                                jsData[i].color = pendingRfcForegroundColor;
                                jsData[i].backgroundColor = pendingRfcBackgroundColor;
                                jsData[i].start = new Date(Date.parse(jsData[i].start));
                                jsData[i].allDay = true;
                                break;
                            case 'rfc':
                                jsData[i].url = '/rfc.cfm?id=' + jsData[i].id;
                                jsData[i].id = i;
                                jsData[i].color = rfcForegroundColor;
                                jsData[i].backgroundColor = rfcBackgroundColor;
                                jsData[i].start = new Date(Date.parse(jsData[i].start));
                                jsData[i].allDay = true;
                                break;
                            case 'outage':
                                jsData[i].url = '/outage.cfm?id=' + jsData[i].id;
                                jsData[i].id = i;
                                jsData[i].color = outageForegroundColor;
                                jsData[i].backgroundColor = outageBackgroundColor;
                                jsData[i].start = new Date(Date.parse(jsData[i].start));
                                jsData[i].allDay = true;
                                break;
                            case 'event':
                                jsData[i].url = jsData[i].id;
                                jsData[i].id = i;
                                jsData[i].color = outageForegroundColor;
                                jsData[i].backgroundColor = outageBackgroundColor;
                                jsData[i].start = new Date(Date.parse(jsData[i].start));
                                jsData[i].end = new Date(Date.parse(jsData[i].end));
                                jsData[i].allDay = true;
                        }
                    }
                    successCallback(jsData);
                });
            }
        });
        calendar.render();
        calendarRendered = true;
        
        $('#nofaSwitch, #pendingRfcSwitch, #rfcSwitch, #outageSwitch, #eventSwitch').change(function(eventData) {
            
            switch(eventData.target.id) {
                case 'nofaSwitch':
                    saveSwitchValue('nofa', eventData.currentTarget.checked);
                    break;
                case 'pendingRfcSwitch':
                    saveSwitchValue('pendingRfc', eventData.currentTarget.checked);
                    break;
                case 'rfcSwitch':
                    saveSwitchValue('rfc', eventData.currentTarget.checked);
                    break;
                case 'outageSwitch':
                    saveSwitchValue('outage', eventData.currentTarget.checked);
                    break;
                case 'eventSwitch':
                    saveSwitchValue('event', eventData.currentTarget.checked);
            }
            
            if(calendarRendered == true) {
                calendar.refetchEvents();
            }
        });
    });
</script>

Answer 2

您是否尝试过调试 ColdFusion 函数返回的数据？数据本身可能存在问题，导致它无法在日历上呈现。此外，它可能有助于利用浏览器开发者控制台中的断点或 console.log 语句等工具来确定数据失败的位置和原因。如果您的函数的 JSON 响应似乎有效，则可能是 FullCalendar 在呈现日历时未正确处理它。在这种情况下，您可能需要提供额外的选项来让 FullCalendar 正确识别和呈现您的事件。