更改单元格的颜色在一个完整的日历

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

我的要求是：应该有一个相同的颜色由一家公司提供的节假日列表中的TD手机。雇员假期列表中td单元应该有相同的颜色。

我们如何做到这一点。我能够改变事件的颜色，但不能改变单元格。

而且如果我们可以根据节假日和离开改变一天的颜色的细胞内。

2012-04-10 user650922

在fullCalendar细胞是表细胞 - 事件被渲染为浮动的div上对这些细胞的顶部。因此，让我们说在月视图中，每一天 - 单元格都有一个与之关联的类。像星期天的“fc-sun”，星期一的“fc-mon”等等。每个单元格还具有关联的日期类 - 例如“fc-day1”，“fc-day2”。

所以，让我们说你要改变所有周日的背景色：

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

等。希望这可以帮助。

来源

2012-04-11 21:22:55 ganeshk

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

对于aditional的信息，请参阅：http://vishaljadhav.net/coloring-certain-days-when-using-full-calendar/

来源

2012-12-29 18:11:45

你的答案是有关事件！不是关于细胞！你有理解的问题吗？ – 2016-08-06 09:30:37

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

    } 
}

来源

2013-08-28 12:59:35 Perazzo

有没有办法给一天中的某些细胞上课，而不是给某一天的所有时间段添加课程？我有一个应用程序，我想要突出显示某一时段的某些时段（营业时间为上午9点至下午1点，下午3点至7点）。 – 2014-02-15 16:29:28

由于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-02 18:09:39

更改单元格的颜色在一个完整的日历

回答

相关问题