javascript - 全日历 : trouble rendering events with ajax when pressing 'prev' or 'next'

Question

我正在通过 fullcalendar 构建一个日历。

我通过外部 ajax 请求获取当月的数据。这是我用来呈现全日历的主要数据变量:

• eventsJsonArray - 我使用此变量加载该月的所有事件

• json_backgrundColor - 我使用此变量来更改相关月份每一天的背景颜色

• json_iconstring - 我用这个变量在某些日子里显示一个图标

• MonthDisplayTitle_GetAlternativeMonthDisplay 等 - 我使用此变量来更改日历标题

当我第一次启动我的日历时 - 一切正常。所有的数据和事件都完美地显示在日历中。但是当我按下“prev”或“next”时，只有“json_backgrundColor”和“json_iconstring”被更新并显示在日历中。(我猜是因为它们在 dayRender 函数中)
事件和备用标题名称不会更新，也不会显示。

代码如下:

    <script>
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    m = m + 1;
    var y = date.getFullYear();
    var ajaxData;
    var eventsJsonArray;
    var json_backgrundColor;
    var json_iconstring;
    var DefaulteDateForFullCalendarISO8601;
    var MonthDisplayTitle_GetAlternativeMonthDisplay;
    var MonthDisplayTitle_GetAlternativeYearDisplay;
    var MonthDisplayTitle_GetGregorianYear;
    getMonthData(m, y);
    function getMonthData(m, y) {
        //getting Month data
        $.ajax({
            url: '$getMonthDataUrl',
            type: 'GET',
            data: {
                gregorianMonth: m,
                gregorianYear: y
            },
            error: function () {
                alert('there was an error while fetching events!');
            },
            success: function (data) {
                ajaxData = data;
                eventsJsonArray = ajaxData['all_The_Events_For_The_Month'];
                json_iconstring = ajaxData['iconString'];
                json_backgrundColor = ajaxData['Big_Calendar_cell_background_color'];
                MonthDisplayTitle_GetAlternativeMonthDisplay = ajaxData['fullMonthDetails']['MonthEngDisplay'];
                MonthDisplayTitle_GetAlternativeYearDisplay = ajaxData['fullMonthDetails']['YearDisplay'];
                MonthDisplayTitle_GetGregorianYear = ajaxData['fullMonthDetails']['GregorianYear'];
                DefaulteDateForFullCalendarISO8601 = ajaxData['fullMonthDetails']['DefaulteDateForFullCalendarISO8601'];
                alert('ajax works! nicee!');
                //console.log(ajaxData);
                //console.log(DefaulteDateForFullCalendarISO8601);

            }
        });
    }

    //oridinal place for getmonthdate
    alert('Hello! 1!');
    $(document).ready(function () {
        console.log(eventsJsonArray);
        $('#calendar').fullCalendar({
            header: {
                left: 'prev',
                center: 'title',
                right: 'next'
            },
            events: eventsJsonArray,
            fixedWeekCount: false,
            monthNamesShort: ['January ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'February ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'March ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'April ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'May ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'June ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'July ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'August ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'September ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'October ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'November ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay, 'December ' + MonthDisplayTitle_GetGregorianYear + ' : ' + MonthDisplayTitle_GetAlternativeMonthDisplay + ' ' + MonthDisplayTitle_GetAlternativeYearDisplay],
            titleFormat: 'MMM',
            dayRender: function (date, cell) {
                var cellDate = date.format('D');
                if (!cell.hasClass('fc-other-month')) {
                    //if this if is true that means that the day belongs to the current relevant month (and not to the prev \ next month)
                    cell.css('background-color', json_backgrundColor[cellDate]);

//from here: cheking which icons to show

                    if (json_iconstring[cellDate].includes('HAV')) {
                        cell.prepend('<img src=\' /havdala2.png \'>');
                    }

                    //until here:: cheking which icons to show

                } else {
                    //this days belongs to the prev \ next months. so we give them opacity)        
                    cell.css('background-color', '#ffffff');
                }

            }
        })

    });
    alert('Hello!2 !');

    $('body').on('click', 'button.fc-prev-button', function () {
//do something
        alert('whatupppp!prev !');
//console.log(m,y);
        if (m === 1) {
            m = 12;
            y = y - 1;
        }
        else {
            m = m - 1;
        }
        getMonthData(m, y);
        console.log(eventsJsonArray);
    });

    $('body').on('click', 'button.fc-next-button', function () {
//do something
        alert('whatupppp!next !');
        //console.log(m,y);
        if (m === 12) {
            m = 1;
            y = y + 1;
        }
        else {
            m = m + 1;
        }
        getMonthData(m, y);
        console.log(eventsJsonArray);
    });
</script>

有人知道我的代码有什么问题吗？以及如何修复它，以便在我按下“下一步”/“上一步”时，事件和备选标题将得到更新和显示？

非常感谢!!

Answer 1

您的事件完全是静态的。

events: eventsJsonArray

这指向一个数组。当您的页面加载时，您运行“getMonthData”并填充 eventsJsonArray。这将传递给 fullCalendar 一次。即使您之后可能会更新 eventsJsonArray 本身，您也永远不会告诉 fullCalendar 它已更改。

无论如何，不​​需要所有这些复杂的诡计，处理下一个/上一个事件等。当它想要帮助您时，您正在与 fullCalendar 作战。更仔细地阅读文档，了解您可以拥有的事件源类型 - 正如您所做的那样，静态数组只是一种选择。您还可以定义一个自定义函数，它可以调用您的 ajax，或者，如果您以兼容的方式实现服务器端，您可以直接将 fullCalendar 指向您的服务器端点。使用这两种方法中的任何一种，只要 View 发生变化，fullCalendar 就会自动再次查询服务器以获取与新 View 中显示的时间段匹配的事件。

您的正确选择是事件即函数样式，因为其中包含一些额外的自定义功能:https://fullcalendar.io/docs/event_data/events_function/

您的整个代码可以如下所示:

var json_iconstring; //this needs to have a higher scope
var gregorianMonths = [];// you need to pre-load this data - see below

$(document).ready(function () {

    $('#calendar').fullCalendar({
        header: {
            left: 'prev',
            center: 'title',
            right: 'next'
        },
        events: function( start, end, timezone, callback ) { //custom events function to be called every time the view changes
          $.ajax({
            url: '$getMonthDataUrl',
            type: 'GET',
            data: {
              gregorianMonth: start.month() + 1,
              gregorianYear: start.year()
            },
            error: function (jqXHR, textStatus, errorThrown) {
              alert('Error loading events: ' + textStatus + " - " + errorThrown);
            },
            success: function (data) {
              json_iconstring = data['iconString'];
              callback(data['all_The_Events_For_The_Month']); //pass the event data to fullCalendar via the supplied callback function
            }
          });
        },
        fixedWeekCount: false,
        monthNamesShort: gregorianMonths, //you need to pre-load this, not via ajax - see below
        titleFormat: 'MMM',
        showNonCurrentDates: false, //this built-in option replaces your test for jsonbackgroundcolour in the dayRender method
        dayRender: function (date, cell) {
            var cellDate = date.format('D');
            if (json_iconstring[cellDate].includes('HAV')) {
                cell.prepend('<img src=\' /havdala2.png \'>');
            }
        }
    });
});

作为一项额外任务，您应该考虑更改服务器端代码以接受完整的“开始”和“结束”日期，而不仅仅是几个月。这样做的好处是，如果您的用户选择“天”或“周” View ，它只会下载那一天或那一周的数据，这样效率更高并且使用的带宽更少。

附言您还需要找到一种不同的方法来设置您的月份显示名称 - 我只是通过您的服务器代码将列表预先注入(inject)页面，而不是尝试通过 ajax 获取。这些选项是在加载日历时预先设置的，fullCalendar 将忽略此后更新它们的尝试，除非您明确重置整个 monthNamesShort 选项，但那样效率很低。

附言我用内置选项替换了 dayRender 函数中的一些代码 - https://fullcalendar.io/docs/display/showNonCurrentDates/ .我建议您在尝试为实际上可能已经可用的功能创建解决方法之前，更仔细地研究文档。