2

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

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

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

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

4

4 回答 4

5

如果您使用的是 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');

    }
}
于 2013-08-28T12:59:35.203 回答
3

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

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

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

等等。希望这可以帮助。

于 2012-04-11T21:22:55.520 回答
1 
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/

于 2012-12-29T18:11:45.427 回答
0

由于他们已经更新了 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;
}
于 2014-05-02T18:09:39.923 回答