如何更改全日历中重叠事件的颜色答案

【问题标题】：How do i change colors for overlapping events in fullcalendar如何更改全日历中重叠事件的颜色
【发布时间】：2014-12-01 23:04:16
【问题描述】：

我正在做一个关于 Asp 的项目。 Net MVC，我正在尝试实现 Jquery fullcalendar。

如果当天已存在该事件，我希望新添加的事件更改其颜色。

谢谢

【问题讨论】：

您的 fullCalendar 收到 JSON 回复了吗？或者请说明您的事件源。
是的，其他一切都运行良好，我只是想要一个新添加的事件来改变它的颜色，如果它在那个特定的日期和时间已经存在的话。 s11.postimg.org/7rie5vqjn/Overlap.png我想让第二个事件的颜色改变..
如何添加该事件？我是说来源？

标签： jquery fullcalendar

【解决方案1】：

我找到了最适合你的答案：

对 fc-event-skin 类的一些新更改...现在它只是 fc-event，因此样式应该不是问题。请在此处查看作者的注释fullcalendar fc-event class...

最好的方法是在事件对象中设置 className 并将其添加到“fc-event-skin”类找到的元素中。但是，您添加的类将在 css 中稍后出现，并且颜色不会优先，因此您必须使用 !important。这也保留了“假”圆角...

将此方法连接到日历上...

eventRender:
function (event, element, view) {
    element.find('.fc-event-skin').addClass(event.className.join(' '));
}

这在你自己的样式表中...

.redGray
{
    border-color: DarkGray !important;
    background-color: LightGray !important;
    color: red !important;
}

原始答案：

我认为这是渲染代码中的一个小错误。 element 参数是一个 jQuery 对象，因此您可以根据自定义事件数据对其进行修改。如果你设置了元素的样式和文本，它将以你设置的颜色呈现；但是，在我看来，其他样式已从元素中删除，例如圆角以及时间和文本的格式。

eventRender: 
function (event, element) {
    if (event.LeadId != null) {
        element.css('color', 'blue');
        element.css('background-color', 'yellow');
        element.text(element.text);
    }

参考：Fullcalendar doesn't render color when using eventRender

【讨论】：