使用 FullCalendar 在月视图上自定义视图答案

【问题标题】：Customizing view on Month view with FullCalendar使用 FullCalendar 在月视图上自定义视图
【发布时间】：2011-05-30 00:19:51
【问题描述】：

我更改了FullCalendar 的每日和每周视图上的className 标签，以显示日历中项目的状态。

问题在于月视图中所有事件的样式都相同。有没有办法用自定义 CSS 标签覆盖它？我试过color，但这似乎不起作用。

谢谢。

【问题讨论】：

什么是完整的日历是一个插件？也许你不介意给我们看一些代码？
尝试添加 !important 例如颜色：#ffffff !important;
FullCalendar 是一个 jQuery 插件.. 一个相当不错的插件.. arshaw.com/fullcalendar

标签： jquery css fullcalendar

【解决方案1】：

确保为您希望单独显示的事件使用单独的className。例如：

events: [
    {
        title: 'All Day Event',
        start: new Date(y, m, 1),
        className: 'Myevent_1'
    },
    {
        title: 'Long Event',
        start: new Date(y, m, d-5),
        end: new Date(y, m, d-2),
        className: 'Myevent_2'
    },
    ... ...

然后像这样（至少）构造样式：

.Myevent_1, .Myevent_1 .fc-event-skin {
    background: gold;
}
.Myevent_2, .Myevent_2 .fc-event-skin {
    background: red;
}

See a demo at jsFiddle.

【讨论】：

【解决方案2】：

谢谢布洛克..

问题是我使用的：

.subOpen,
.fc-agenda .subOpen .fc-event-time,
.subOpen a {
    background-color:#FFFF33;
    color: #000000;
}

我实际上是从 FullCalendar 1.3 升级到 1.5.1，现在可以将以下内容作为偶数对象的一部分传递。

color 、 backgroundColor 、 BorderColor 和 textColor。 Ref: FullCalendar Event Object

使用时，它们会覆盖 fullCalendar.css 中的 CSS，并将设置正确传递给所有视图。

所以我没有使用 CSS，而是像这样使用事件数据传递颜色设置。

 [{"title":"Thomas Trutt","start":"2011-05-30 09:00","end":"2011-05-30 22:00","id":"28","opID":"3","allDay":false,"color":"#36F"}]

这很有效，因为我的所有事件都是从数据库中提取的。

再次感谢

【讨论】：