[英]Fullcalendar change background color for holidays
Actually I use this code to set background red for holidays:实际上,我使用此代码为假期设置背景红色:
dayRender: function (dayRenderInfo) {
var date = dayRenderInfo.date;
var datestring = date.getFullYear() + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2);
var cell = dayRenderInfo.el;
var array_holidays = []
$.ajax({
type: "POST",
async: false,
dataType:"json",
url: "ajax/get-holidays.php",
data: { "anno" : date.getFullYear() },
success: function(data, status) {
array_holidays = data;
}
});
$.each( array_holidays , function( key, value ) {
if ( datestring == value) {
$(cell).css("background-color", "red");
}
});
},
I need a script cause some holidays, for example easter, change dates every year.我需要一个脚本,因为某些假期,例如复活节,每年都会更改日期。 so, get-holidays.php, give me an array of holidays based on year actually shown in calendar.
所以,get-holidays.php,根据日历中实际显示的年份给我一个假期数组。
It works great but, not very good as performance cause dayRender, in case of month view, is called 30-31 times!!!它工作得很好,但性能不是很好,因为 dayRender,在月视图的情况下,被调用 30-31 次!!!
Any suggest to get better performance?任何建议以获得更好的性能?
A better overall solution to this requirement is to create a separate event source for these holidays, whose events all have the rendering: "background"
option set.对此要求的一个更好的整体解决方案是为这些假期创建一个单独的事件源,其事件都具有
rendering: "background"
选项集。 This option will cause an event to simply colour in the background of the time period it covers, rather than showing up as a bold, labelled event in the normal way.此选项将导致事件在其涵盖的时间段的背景中简单地着色,而不是以正常方式显示为粗体、标记的事件。 You can of course also control the colour via the event's properties.
您当然也可以通过事件的属性来控制颜色。
See https://fullcalendar.io/docs/background-events for details of background events.有关后台事件的详细信息,请参阅https://fullcalendar.io/docs/background-events 。 There's also a demo here .
还有一个演示这里。
you can do this very easily.你可以很容易地做到这一点。 Just define
'color'=>''
in your resource or event array list.只需在您的资源或事件数组列表中定义
'color'=>''
。
$events[] = array(
'---' => '---',
'----'=> '----',
'color' => $color, // optional ( it will work for Border Color or Background Color )
// 'className'=> '' // optional for give specific css
);
No need to change any JS Code... Check this image..无需更改任何 JS 代码...检查此图像..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.