简体   繁体   English

jQuery FullCalendar:更改每个星期六的颜色,该月的最后一个星期六除外

[英]jQuery FullCalendar : Change the color of every saturday except last saturday in the month

Currently I am working on a project where I have implemented a jQuery Fullcalendar. 目前,我正在一个已实现jQuery Fullcalendar的项目中工作。

There are few requirements like: 有一些要求,例如:

  1. Change the color of every Sunday (as Sundays will be off) 更改每个星期日的颜色(因为星期日将关闭)

  2. Change the color of every Saturday except last in all the months (last Saturday is on) 更改除所有月份的最后一个月之外的每个星期六的颜色(最后一个星期六为开)

I have achieved the first task using the CSS 我已经使用CSS完成了第一个任务

.fc-sun {
    background-color: #FFe5e5 !important;
}

But I am stuck at trying to achieve the second task. 但是我坚持要完成第二项任务。

I have tried to search over the google but could not find that how to do this. 我试图在Google上进行搜索,但找不到该怎么做。

Would like to apply any solution using jquery / Javascript / CSS . 想要使用jquery / Javascript / CSS应用任何解决方案。

Here is the fiddle 这是小提琴

Thanks 谢谢

Add this to the calendar options: 将此添加到日历选项:

viewDisplay: function(view) {
   $(".fc-sun, .fc-sat").addClass("non-working-day");
   $(".fc-sat:not(.fc-other-month)").last().removeClass("non-working-day");
},

This to the css: 这到css:

.non-working-day{
    background-color: #FFe5e5 !important;
}

Explanation: 说明:

The viewDisplay function will get call each this the view is reloaded(eg changing months). 每次重新加载视图时, viewDisplay函数都会调用一次(例如,更改月份)。 And each time we need to find the last Saturday for that month. 而且每次我们需要查找该月的最后一个星期六。 We first add a class to all Saturday's and Sunday's and then we remove that class to the last Saturday since it's a working day. 我们首先将一个班级添加到所有星期六和星期日的班级,然后将其删除到最后一个星期六,因为这是一个工作日。

viewDisplay: Option is not working on some older version So,try this if you have used old version of full calender try this viewDisplay:选项在某些旧版本上不起作用,因此,如果您使用的是旧版全压光机,请尝试此操作

viewRender: function(view) {
   $(".fc-sun, .fc-sat").addClass("non-working-day");
   $(".fc-sat:not(.fc-other-month)").last().removeClass("non-working-day");
},

remove your old css and add this one 删除您的旧CSS并添加此一个

.non-working-day{
    background-color: #FFe5e5 !important;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM