fullcalendar:有没有办法在我通过事件function加载我的事件后调用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加载我的事件时,我也得到了每个细胞应该得到的背景颜色的信息。 我只能通过事件ajax请求获取此信息。

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

是否有一种方式,dayRender将在事件日历停止运行后运行? 或任何其他代码将解决我的问题。

非常感谢!!

您的问题是“dayRender”回调在视图更改后运行(使用prev / next更改日期计为更改视图,为此目的),但在下载和呈现新视图的事件之前。 这就是你的json_backgrundColor数组未定义的原因。

由于您提到要使用的颜色取决于当前为该特定日期安排的事件的确切性质,因此我们需要找到可在所有事件之后运行的内容,并且已下载此颜色数据。

检查HTML,我们可以看到每天用于绘制的表格单元都应用了CSS类“fc-day”。 它们还有一个data-date属性,包含它们所关联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_backgrundColorjson_backgrundColorjson_backgroundColor以更正拼写错误。

NB这是脆弱的,因为它依赖于fullCalendar在内部用来表示日期单元格的类名。 如果fullCalendar决定在将来的版本中以不同的方式执行此操作,它将会中断(如果我们能够通过指定的回调使用fullCalendar API,则尽管内部更改,它们仍可能保持一致性,或者至少记录任何更改)。 但它对于月视图来说非常关键,所以实际上它不太可能很快改变 – 如果你更新你的fullCalendar版本,你只需要记住测试它。