jQuery 设置全日历单元格背景颜色
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17754138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting Fullcalendar Cell Background Color
提问by vegas2033
I saw several topics on how to set the background color of a cell in fullcalendar, but none of them worked for me. I guess the calendar used to list the days using their date as such .fc-day5 or .fc-day17, but in version 1.6.2 it doesn't anymore.
我看到了几个关于如何在 fullcalendar 中设置单元格背景颜色的主题,但没有一个对我有用。我猜日历曾经使用它们的日期列出日期,例如 .fc-day5 或 .fc-day17,但在 1.6.2 版本中不再如此。
I have a list of several events that are being rendered and I want to set their cell color (the entire day cell, not only the event cell) to a specific color.
我有一个正在渲染的几个事件的列表,我想将它们的单元格颜色(全天单元格,不仅是事件单元格)设置为特定颜色。
I use 'eventRender' to try to set a class
我使用“eventRender”来尝试设置一个类
eventRender: function (event, element, monthView) {
if (event.className == "holiday") {
$day = $date.getDate();
$("td.fc-day-number[value='" + $day + "']").addClass("holiday");
}
},
Let me know if you have any idea on how to set the background color.
如果您对如何设置背景颜色有任何想法,请告诉我。
回答by joni jones
You can try to set event background color. Something like this:
您可以尝试设置事件背景颜色。像这样的东西:
event.backgroundColor = 'cccccc#';
Or for cell background:
或者对于单元格背景:
$('.fc-day[data-date="' + date + '"]').css('background', color);
date
must be date string equivalent to php Y-m-d
date format.
Style need change when calendar was rendered.
date
必须是相当于 phpY-m-d
日期格式的日期字符串。呈现日历时需要更改样式。
回答by Mehmet Taha Meral
Well, you can do this.
嗯,你可以这样做。
{
title: 'Some title',
start: new Date(2014, 8, 24, 10, 30),
allDay: false,
editable: false,
backgroundColor: '#SomeColor',
borderColor: '#SomeColor'
},
{
title: 'Some title2',
start: new Date(2014, 8, 24, 10, 30),
allDay: false,
editable: false,
backgroundColor: '#SomeColor2',
borderColor: '#SomeColor2'
}
In addition, you can set class name like this:
此外,您可以像这样设置类名:
{
title: 'Teste1',
start: new Date(y, m, d, 10, 30),
allDay: false,
editable: false,
className: ["red"]
},
{
title: 'Teste1',
start: new Date(y, m, d, 10, 30),
allDay: false,
editable: false,
className: ["green", "secondClass"]
}
Then describe that style of class
然后描述一下班级风格
<style>
.red {
background-color:red;
}
.green {
background-color:green;
}
.green{
// do something
}
</style>