我需要更改arshaw完整的日历的单元格的颜色。更改单元格的颜色在一个完整的日历
我的要求是:应该有一个相同的颜色由一家公司提供的节假日列表中的TD手机。 雇员假期列表中td单元应该有相同的颜色。
我们如何做到这一点。我能够改变事件的颜色,但不能改变单元格。
而且如果我们可以根据节假日和离开改变一天的颜色的细胞内。
我需要更改arshaw完整的日历的单元格的颜色。更改单元格的颜色在一个完整的日历
我的要求是:应该有一个相同的颜色由一家公司提供的节假日列表中的TD手机。 雇员假期列表中td单元应该有相同的颜色。
我们如何做到这一点。我能够改变事件的颜色,但不能改变单元格。
而且如果我们可以根据节假日和离开改变一天的颜色的细胞内。
在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()选择以清除类名。
你需要做的是绑定你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/
如果您正在使用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');
}
}
有没有办法给一天中的某些细胞上课,而不是给某一天的所有时间段添加课程? 我有一个应用程序,我想要突出显示某一时段的某些时段(营业时间为上午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;
}
你的答案是有关事件!不是关于细胞!你有理解的问题吗? – 2016-08-06 09:30:37