javascript 更改完整日历中单元格的颜色
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10086360/
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
change the color of a cell in a full calendar
提问by user650922
I need to change the color of a cell of a arshaw full calendar.
我需要更改 arshaw 完整日历的单元格的颜色。
My requirement is :There should be a same color for a td cell for list of holidays provided by a company. There should be a same color for a td cell for list of holidays taken by an employee.
我的要求是:对于公司提供的假期列表,td 单元格应该有相同的颜色。员工休假列表的 td 单元格应该有相同的颜色。
How we can achieve this.I am able to change the color of events but not the cell.
我们如何实现这一点。我可以更改事件的颜色,但不能更改单元格的颜色。
Also If we can change the color of a day inside a cell according to holidays and leave .
此外,如果我们可以根据假期更改单元格内一天的颜色并离开。
回答by Perazzo
If you are using Jquery-Ui theme you need to remove ui-widget-content class and apply your own class. In the code below i'm using a 40x100 image with purple flat color.
如果您使用的是 Jquery-Ui 主题,则需要删除 ui-widget-content 类并应用您自己的类。在下面的代码中,我使用的是带有紫色单色的 40x100 图像。
CSS
CSS
.holiday
{
border:1px solid #69196c;
background: #764ead url(holiday.png) 50% top repeat-x;
color: white;
}
JS FULLCALENDAR
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');
}
}
回答by ganeshk
The cells in fullCalendar are table-cells - events are rendered as floating divs on top on these cells. So let's say in the month-view, each day-cell has a class associated with it. Like "fc-sun" for Sundays, "fc-mon" for Mondays and so on. Each cell also has the day-number class associated - like "fc-day1", "fc-day2".
fullCalendar 中的单元格是表格单元格 - 事件呈现为这些单元格顶部的浮动 div。所以让我们说在月视图中,每个日单元都有一个与之关联的类。就像周日的“fc-sun”,周一的“fc-mon”等等。每个单元格还具有关联的天数类 - 如“fc-day1”、“fc-day2”。
So, let's say you want to change the background-color of all Sundays:
因此,假设您要更改所有星期日的背景颜色:
.fc-sun {
background-color: #FF0000;
color: #FFFFFF;
}
And so on. Hope this helps.
等等。希望这可以帮助。
回答by Ayyanar Govindan
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');
}
}
Also, remember that you would need to clear these class names on month change or else they will stay the same background color for all the months.
另外,请记住,您需要在月份更改时清除这些类名称,否则它们将在所有月份中保持相同的背景颜色。
Therefore, you might want/need to manage the navigation of the calendar manually using gotodate and then using jquery's removeClass() selector to clear out the class names.
因此,您可能想要/需要使用 gotodate 手动管理日历导航,然后使用 jquery 的 removeClass() 选择器清除类名。
What you need to do is bind the click event of your fullcalendar's next and previous month buttons and do something like
你需要做的是绑定你的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)
});
For aditional information please refer: http://vishaljadhav.net/coloring-certain-days-when-using-full-calendar/
有关其他信息,请参阅:http: //vishaljadhav.net/coloring-certain-days-when-using-full-calendar/
回答by Jerko W. Tisler
Since they've updated fullcalendar I'm posting a new solution, I know few years passed from question but I guess is better late than never :)
由于他们更新了 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');
}
}
and here is the class:
这是课程:
.fully_colored_holiday,
.fully_colored_holidaydiv,
.fully_colored_holidayspan{
background:#FF8C8C !important;
}