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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 19:53:46  来源:igfitidea点击:

Setting Fullcalendar Cell Background Color

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

datemust be date string equivalent to php Y-m-ddate 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>