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

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

我用events function和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运行？或其他任何可以解决我的问题的代码.

非常感谢！！

解决方法:

您的问题是,在更改视图后(为此目的,使用上一个/下一个计数作为更改视图来更改日期)之后,但在下载和呈现新视图的事件之前,将运行“ 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,则尽管进行了内部更改,但它们仍可能保持一致性,或者至少记录了任何更改).但这是“月”视图的关键,因此实际上它不太可能很快改变-如果您更新了完整的日历版本,则只需记住要对其进行测试.

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

相关推荐