Question

我需要更改arshaw完整日历的单元格颜色。

我的要求是：对于公司提供的假期列表，td单元应该有相同的颜色。对于员工采取的假期列表，td单元应该有相同的颜色。

我们如何才能实现这一目标。我能够改变事件的颜色而不是细胞。

此外，如果我们可以根据假期更改单元格内的一天颜色并离开。

Answer 1

如果您使用的是Jquery-Ui主题，则需要删除ui-widget-content类并应用您自己的类。在下面的代码中，我使用的是40x100紫色平面图像。

CSS

.holiday
{
    border:1px solid #69196c;
    background: #764ead url(holiday.png) 50% top repeat-x; 
    color: white;   
}

JS FULLCALENDAR

dayRender: function (date, cell) {

    if ($.inArray(date, holidays) >= 0) {

        // if you aren't using ui theme, just remove this line
        $(cell).removeClass('ui-widget-content');                            
        $(cell).addClass('holiday');

    }
}

Answer 2

fullCalendar中的单元格是表格单元格 - 事件在这些单元格的顶部呈现为浮动div。因此，在月视图中，每个日元格都有一个与之关联的类。像星期日的“fc-sun”，星期一的“fc-mon”等等。每个单元格也有相关的日期编号类 - 如“fc-day1”，“fc-day2”。

所以，假设您要更改所有星期日的背景颜色：

.fc-sun {
  background-color: #FF0000;
  color: #FFFFFF;
}

等等。希望这会有所帮助。

Answer 3

eventRender: function (event, element, monthView) 
{
    if (event.title == "HOLIDAY") 
    { 
        var one_day = 1000 * 60 * 60 * 24;
        var _Diff = Math.ceil((event.start.getTime() - monthView.visStart.getTime())/(one_day));
        var dayClass = ".fc-day" + _Diff; 
        $(dayClass).addClass('holiday-color');
    }
}

另外，请记住，您需要在月份更改时清除这些类名，否则它们将保持所有月份的相同背景颜色。

因此，您可能希望/需要使用gotodate手动管理日历的导航，然后使用jquery的removeClass（）选择器清除类名。

您需要做的是绑定fullcalendar的下个月和上个月按钮的点击事件，并执行类似

的操作

$("#nextMonthBtn").click(function () {
    // current year and month should be maintained, can be a`enter code here`enter code here`ccessed on loading attribute of the fullcalendar
    //manually manage navigation`enter code here`
    $('td').removeClass('holiday-color');
    calRef.fullCalendar('gotoDate', _currentYear, _currentMonth, 1) 
});

有关附加信息，请参阅：http://vishaljadhav.net/coloring-certain-days-when-using-full-calendar/

Answer 4

由于他们已经更新了fullcalendar我发布了一个新的解决方案，我知道问题已经过了几年，但我想迟到总比没有好。）

eventRender: function(event, element, monthView) {
     if (event.className == "holiday") {
           var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
                $('td[data-date="' + dateString + '"]').addClass('fully_colored_holiday');
           }
     }

这是班级：

.fully_colored_holiday,
.fully_colored_holidaydiv,
.fully_colored_holidayspan{
     background:#FF8C8C !important;
}

更改完整日历中单元格的颜色

4 个答案: