fullcalendar：是否有一种方法只有在我通过事件函数加载我的事件后才能调用dayRender [英] fullcalendar: is there a way to call dayRender only after i load my events via events function
问题描述
我使用 events function 和ajax。
这里是我的代码： var ajaxData;
var eventsJsonArray;
var json_backgrundColor;
var json_iconstring;
/ / alert（'Hello！1！'）;
$（document）.ready（function（）{
$ b $（'＃calendar'）。fullCalendar（{
header ：{
left：'prev'，
center：'title'，
right：'next，month，agendaWeek，agendaDay'
}，
// custom事件函数在每次视图更改时调用
events：function（start，end，timezone，callback）{
var mStart = start.format（'M'）
var yStart = start .format（'YYYY'）
$ .ajax（{
url：'$ getMonthData Url'，
类型：'GET'，
data：{
startDate：start.format（），
endDate：end.format（）
}，
错误：function（）{
alert（'提取事件时发生错误！'）;
}，
成功：函数（数据）{
alert（'nice !!'）;
ajaxData = data;
json_iconstring = ajaxData ['iconString'];
json_backgrundColor = ajaxData ['Calendar_cell_background_color'];
eventsJsonArray = ajaxData ['all_Events_For_The_Month'];
回调（eventsJsonArray）; //通过提供的回调函数将事件数据传递给fullCalendar
}
}）;
}，
fixedWeekCount：false，
showNonCurrentDates：false，
$ b dayRender：function（date，cell，view）{
console.log（json_backgrundColor ）; //这会带来eror，因为json_backgrundColor是未定义的
var cellDate = date.format（'D'）;
if（date.format（'M'）== view.start.format（'M'））// cheacking is this today is part of the currrent month（and prev / next month）
{
alert（cellDate）;
cell.css（'background-color'，json_backgrundColor [cellDate]）; //这会带来eror，因为json_backgrundColor是undefined
}
}，
}）
}）;
当我通过ajax加载我的事件时，我也得到关于每个单元格应该使用哪种背景颜色的信息得到。我只能通过事件ajax请求获取此信息。
问题是，当dayRender运行时，我仍然没有背景色数据。 （json_backgrundColor是未定义的）。
有没有办法让dayRender在事件日历停止运行后运行？或任何其他代码，将解决我的问题。
非常感谢！
你的问题是在更改视图之后运行dayRender回调（使用prev / next计数将日期更改为改变视图，为此目的），但在新视图的事件已被下载和渲染之前。这就是为什么你的 json_backgrundColor 数组是未定义的。
既然你提到要使用的颜色取决于确切的性质对于当前安排在特定日期的事件，我们需要找到可以在所有事件发生后运行的事情，并且已下载此颜色数据。
检查HTML中，我们可以看到，每天使用的表格单元格都应用了CSS类fc-day。他们还有一个数据日期属性，其中包含与之相关的日期。最后，由于您设置了 showNonCurrentDates：false >而被禁用的日子（主月之外）有一个额外的fc-disabled-day类。我们可以使用这些信息来识别我们想要更改的单元格，而无需使用 dayRender 回调。
<当所有事件都被渲染时，
eventAfterAllRender 回调会运行一次。因此，这似乎是一个改变单元格背景颜色的好地方： eventAfterAllRender（function（view）{
//遍历每个非禁用的日单元格
$（'。fc-day：not（.fc-disabled-day）'）。each（function（index，element）{
//根据从单元格的data-date属性获取的日期编号，从json_backgroundColor arrray设置单元格的背景颜色。
$（this）.css（'background-color'，json_backgroundColor [moment（$ （this）.data（date））。format（D）]）;
}）;
}
请注意，我已将 json_backgrundColor 重命名为 json_backgroundColor 以更正拼写错误。
注意这是因为它依赖于fullCalendar在内部用来表示日期单元格的类名，如果fullCalendar决定在未来的版本，它会中断（而如果我们能够使用fu llCalendar API通过指定的回调，他们可能会保持一致性，尽管内部的变化，或者至少记录任何改变）。但它对于Month视图来说非常关键，所以实际上它不可能很快改变 - 如果你更新完整的日历版本，你只需要记住要测试它。
i'm using fullcalendar in a web application i"m building.
i load my events with events function and ajax.
here is my code:
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
}
},
})
});
when i load my events via ajax i'm also getting the information about which background color each cell should get. i can only get this info via the events ajax request.
the problem is that when the dayRender is running, i still don't have the background color data. (json_backgrundColor is undefined).
is there a way that dayRender will run after the events calendar will stop running? or any other code that will fix my problem.
many thanks!!
Your problem is that the "dayRender" callback runs after the view is changed (changing the date using prev/next counts as changing the view, for this purpose), but before the events for the new view have been downloaded and rendered. That's why your json_backgrundColor array is undefined.
Since you mentioned that the colour to be used depends on the exact nature of the events currently scheduled for that specific day, we need to find something that we can run after all the events, and this colour data, have been downloaded.
Inspecting the HTML, we can see that the table cells used to draw each day all have the CSS class "fc-day" applied. They also have a data-date property containing the day that they relate to. Finally, days that are disabled (outside the main month, due to you setting showNonCurrentDates:false) have an extra class of "fc-disabled-day" applied. We can use these pieces of information to identify the cells we want to change, without having to use the dayRender callback.
The eventAfterAllRender callback runs once when all the events have been rendered. Therefore this seems like a good place to alter the background colours of the cells:
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")]);
});
}
Note that I have renamed json_backgrundColor to json_backgroundColor to correct the spelling error.
N.B. This is brittle in the sense that it relies on the class names that fullCalendar uses internally to represent the day cells. If fullCalendar decides to do this differently in a future release, it will break (whereas if we were able to use the fullCalendar API via the designated callbacks, they would likely maintain consistency despite internal changes, or at least document any change). But it's pretty key to the Month view, so realistically it's not likely to change any time soon - you would just have to remember to test it if you update your fullCalendar version.
这篇关于fullcalendar：是否有一种方法只有在我通过事件函数加载我的事件后才能调用dayRender的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
