FullCalendar - Google 日历活动颜色答案

【问题标题】：FullCalendar - Google Calendar Event ColorsFullCalendar - Google 日历活动颜色
【发布时间】：2012-01-03 15:54:18
【问题描述】：

我正在使用 FullCalendar 将 Google 日历嵌入到 this 网页中

由于没有将 Google 日历活动的颜色引入完整日历，我想在本地为每个活动设置不同的背景颜色。

最简单的解决方案是为每个事件添加一个类名。我希望将事件标题生成到类名中。

我尝试使用ClassName，但无法正常工作。

希望听到有人提供一些建议。

【问题讨论】：

标签： fullcalendar

【解决方案1】：

className 必须以 JSON 格式返回，因此您将需要一个代理 PHP/ASHX，您将调用它，将参数传递给它，它将调用 Google Cal，对其进行转换并返回类似这样的内容..

[{"title":"News that will blow you away!","url":"news.aspx?i=1657","start":"2011-11-22T00:01:00","end":"2011-11-22T23:59:00","color":"rgb(232,157,0)","className":"data-newsevent clickable","newsEvent":"True","EventName":null,"description":null,"EventCompTypeMSP":null}]

Proxy-Req：您对代理的请求
Proxy-Res：您的代理对您的响应

注意颜色，你可以直接用它来定义事件的颜色。

注意我的 classNames data-newsevent 和 clickable，我用 jQuery 来做某些特殊的点击事件——它们实际上不包含任何颜色样式，但你可以做到，你可能必须使用 !important 因为 fullCaldner应用默认颜色。

我首先使用空提要加载页面，然后使用客户端请求提要，这似乎更加动态，如果他们导航分配，使用缓存可以足够快。

【讨论】：

【解决方案2】：

我希望将事件标题生成到类名中。

所以你可以像这样使用eventRender 回调：

eventRender: function(event, element) {
    /**
     * @params
     * event : fullcalendar event
     * element : jQuery container
     */

     // be aware of whitespaces !
     element.addClass("fc-" + event.title.replace(/\s+/g, "_"));

}

【讨论】：