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

change the color of a cell in a full calendar

本文关键字：单元格 颜色 日历      更新时间：2023-09-26

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

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

我们如何实现这一目标。我可以更改事件的颜色，但不能更改单元格的颜色。

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

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

.CSS

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

JS完整日历

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');
    }
}

fullCalendar 中的单元格是表格单元格 - 事件在这些单元格的顶部呈现为浮动div。因此，假设在月视图中，每个日单元格都有一个与之关联的类。比如周日的"fc-sun"，周一的"fc-mon"等等。每个单元格还具有关联的日数类 - 如"fc-day1"、"fc-day2"。

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

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

等等。希望这有帮助。

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（）选择器清除类名。

您需要做的是绑定完整日历的下个月和上个月按钮的点击事件，并执行以下操作

$("#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/

自从他们更新了完整日历以来，我正在发布一个新的解决方案，我知道几年过去了，但我想迟到总比没有好:)

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;
}
相关文章：