在 jQuery weekcalendar 插件中为事件设置不同的背景颜色答案

【问题标题】：Set different background-colors for events in the jQuery weekcalendar plugin在 jQuery weekcalendar 插件中为事件设置不同的背景颜色
【发布时间】：2013-01-28 17:36:07
【问题描述】：

我正在与jQuery weekcalendar plugin 合作，以显示带有约会的基于网络的日历。所有事件的颜色都在这个 CSS 部分中设置：

.wc-cal-event {
    background-color: #00BFFF;
    font-size: 0.8em;
    position: absolute;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    color: #000;
    width: 100%;
    border: 1px solid #000;
    font-weight: normal;
}

我刚刚实现了日历中的新约会属于某个类别的功能（例如在 Outlook 中）。基于这个类别，约会的背景颜色应该会改变，比如说它应该是红色的。

如何动态更改事件的背景？当我更改.wc-cal-event 时，每个事件的每个背景都会受到影响。

感谢您的回答。

【问题讨论】：

如果你能创建一个显示这个问题的小提琴会更容易回答。

标签： javascript jquery css jquery-plugins

【解决方案1】：

可以在这个函数中完成：

eventRender : function(calEvent, $event) {
    $.ajax({
        url: url,
        dataType: 'json',
        async: false,
        success: function(data) {
            $.each(data, function(i, appointment) {
                $event.css('backgroundColor', appointment.htmlColor);
                $event.css('color', appointment.textColor);
            });
        }
    });
}

【讨论】：

【解决方案2】：

给每个事件它自己的类，例如.wc-cal-event.meeting 并应用您的样式。

【讨论】：