Javascript fullcalendar：是否有一种方法仅在通过events函数加载事件后调用dayRender

我正在构建的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加载我的事件时，我还获得了关于每个单元格应该获得哪种背景颜色的信息

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

是否有一种方法可以使dayRender在事件日历停止运行后运行？或者任何其他代码都可以解决我的问题

非常感谢！！

您的问题是“dayRender”回调在视图更改后运行（为此，使用prev/next更改日期视为更改视图），但在新视图的事件下载和呈现之前运行。这就是为什么您的

json\u backgrundColor

数组未定义的原因

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

检查HTML，我们可以看到用于每天绘制的表格单元格都应用了CSS类“fc day”。它们还有一个

数据日期

属性，其中包含它们相关的日期。最后，被禁用的日期（由于您设置了

showNonCurrentDates:false

）有一个额外的类“fc disabled day”已应用。我们可以使用这些信息来标识要更改的单元格，而无需使用

daydrender

回调

渲染完所有事件后，

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\u backgroundColor

重命名为

json\u backgroundColor

，以更正拼写错误

---

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

而不是依赖

daydrender

，您应该基于ajax创建背景色事件：

事件=[
...
{日期：日期
颜色：。。。
渲染：“背景”
类名：“我的类”
}]

---

您可以使用css以任何方式转换事件，无论是否使用

呈现：“背景”

选项。

我不介意在事件呈现之前默认颜色将为白色，但在事件呈现之后，我希望颜色立即更改。我不知道这是否是一个答案，我不熟悉API，只是想它可能很简单。

cell.css（'background-color'，json_backgrundColor&&json_backgrundColor[cellDate]| | white'））；

只需在访问之前检查变量中是否有值，如果没有，则提供默认值。我认为在同一ajax调用中将事件数据的下载与与整天相关的数据相结合可能是一个语义错误。您能否解释自定义背景色的用途，以及它们是如何计算的？是否为可预测的静态信息，如公共假日？或者使用的颜色是否与当天安排的活动在某种程度上相关？（例如，如果有太多的活动或某些类型的活动，可能会改变颜色？我不知道，只是想了解原因）。颜色会根据特定日期呈现的事件而变化。这在后端是确定的。我不认为我可以更改这一个。fullcalendar有什么解决方案吗？好的，我明白了。因此它直接与特定日期的事件性质相关联。我想有一种方法。我会发布一个答案。好的。再次感谢你。it工作。我现在有两个不同的问题，如果你能帮我的话，它将真正帮助我：1.我想根据数组发布一个图标。“$（this）.css.prepend（“”）；“这一行在$（'.fc day:not（.fc disabled date）'）的范围内不工作。每个（函数（index，element）{}”2.如果我没有使用showNonCurrentDates:false，你能更正代码吗？因为我认为我不会在末尾使用此设置。

$（this）。css.prepend

没有意义-你不能将HTML标记附加到元素的css属性。

$（this）.prepend

应该有效。关于你的另一个问题-我根据你给出的代码编写了答案。它在那种情况下有效-在这种情况下，请接受答案，谢谢：-）。在您提出问题并正确回答问题后更改要求，对回答问题的人和他们所做的努力都是不公平的。FWIW我认为如果不使用

showNonCurrentDates:false

，没有任何简单的方法可以做到这一点，因为您的

json\u backgroundColor

数组不包含关于哪个月的信息每个条目都引用。如果将其更改为键为完整日期（yyyy-mm-dd格式）的对象，则可以执行此操作。此外，它还需要返回

开始

和

结束

之间的所有日期的数据，而不仅仅是主月，否则这些额外的日期将无法应用正确的颜色。

$（'.fc disabled day'）。css（…

。这不明显吗？我们使用“not”来根据选择器排除它们，因此如果要查找它们，可以使用相同的选择器。。。