fullcalendar：只有通过事件函数加载事件后，才可以调用dayRender的方法

小编典典

fullcalendar：只有通过事件函数加载事件后，才可以调用dayRender的方法

ajax

我正在构建的Web应用程序中使用fullcalendar。

我使用事件功能和Ajax 加载事件。

这是我的代码：

var ajaxData;
var eventsJsonArray;
var json_backgrundColor;
var json_iconstring;

//alert('Hello! 1!');
$(document).ready(function () {

    $('#calendar').fullCalendar({
        header: {
            left: 'prev',
            center: 'title',
            right: 'next,month,agendaWeek,agendaDay'
        },
        //custom events function to be called every time the view changes
        events: function (start, end, timezone, callback) {
            var mStart = start.format('M')
            var yStart = start.format('YYYY')
            $.ajax({
                url: '$getMonthDataUrl',
                type: 'GET',
                data: {
                    startDate: start.format(),
                    endDate: end.format()
                },
                error: function () {
                    alert('there was an error while fetching events!');
                },
                success: function (data) {
                    alert('nice!!');
                    ajaxData = data;
                    json_iconstring = ajaxData['iconString'];
                    json_backgrundColor = ajaxData['Calendar_cell_background_color'];
                    eventsJsonArray = ajaxData['all_Events_For_The_Month'];
                    callback(eventsJsonArray); //pass the event data to fullCalendar via the supplied callback function
                }
            });
        },
        fixedWeekCount: false,
        showNonCurrentDates: false,

        dayRender: function (date, cell, view) {
            console.log(json_backgrundColor);//this brings eror because json_backgrundColor is undefined 
            var cellDate = date.format('D');
            if (date.format('M') == view.start.format('M')) //cheacking is this day is part of the currrent month (and not prev/next month)
            {
                alert(cellDate);
                cell.css('background-color', json_backgrundColor[cellDate]);//this brings eror because json_backgrundColor is undefined

            }


        },
    })

});

当我通过ajax加载事件时，我还获得了有关每个单元格应该获得哪种背景色的信息。我只能通过事件ajax请求获取此信息。

问题是当dayRender运行时，我仍然没有背景颜色数据。（json_backgrundColor未定义）。

在事件日历停止运行后，有什么方法可以使dayRender运行？或其他任何可以解决我的问题的代码。

非常感谢！！

阅读 785

2020-07-26

共1个答案

小编典典

您的问题是“
dayRender”回调在更改视图后运行（为此目的，使用上一个/下一个计数作为更改视图来更改日期），但是在下载和呈现新视图的事件之前运行。这就是为什么json_backgrundColor数组未定义的原因。

由于您提到要使用的颜色取决于当前为该特定日期安排的事件的确切性质，因此我们需要找到在所有事件和该颜色数据下载后可以运行的东西。

检查HTML，我们可以看到用于每天绘制的表格单元格都应用了CSS类“ fc-day”。它们还具有data- date包含与其相关的日期的属性。最后，被禁用的天数（在主要月份之外，由于您进行了设置showNonCurrentDates:false）已应用了额外的“
fc-disabled-day”类别。我们可以使用这些信息来标识我们要更改的单元，而不必使用dayRender回调。

eventAfterAllRender呈现所有事件后，回调将运行一次。因此，这似乎是更改单元格背景颜色的好地方：

eventAfterAllRender(function(view) {
    //loop through each non-disabled day cell
    $('.fc-day:not(.fc-disabled-day)').each(function(index, element) {
      //set the background colour of the cell from the json_backgroundColor arrray, based on the day number taken from the cell's "data-date" attribute.
      $(this).css('background-color', json_backgroundColor[moment($(this).data("date")).format("D")]);
    });
}

请注意，我已经改名json_backgrundColor，以json_backgroundColor纠正拼写错误。

注意：这很脆弱，因为它依赖于fullCalendar内部使用的类名称来表示日单元。如果fullCalendar决定在将来的版本中以其他方式执行此操作，则它将中断（而如果我们能够通过指定的回调使用fullCalendar
API，则尽管内部进行了更改，但它们仍可能保持一致性，或者至少记录了任何更改）。但这是“月”视图的关键，因此实际上它不太可能很快改变-
如果您更新了完整的日历版本，则只需记住要对其进行测试。

2020-07-26