FullCalendar - Google 日历事件颜色

标签 fullcalendar

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

由于 Google 日历事件的颜色没有被引入完整日历,我想用不同的背景颜色在本地设置每个事件的样式。

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

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

希望能听到一些人的建议。

最佳答案

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}]

enter image description here

  • Proxy-Req:您对代理的请求
  • Proxy-Res:您的代理人给您的回复

注意颜色,您可以使用它直接定义事件的颜色。

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

我首先用空 feed 加载页面,然后使用客户端请求 feed,它看起来更动态,如果他们导航 allot,使用缓存它可以足够快。

关于FullCalendar - Google 日历事件颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8223853/

相关文章:

fullcalendar - FullCalendar 中的 2 个月或更多个月 View 甚至一年 View ?

css - FullCalendar:通过 'addEventSource' 为一整天添加背景色,而不是为事件单独添加

javascript - Foundation 和 jquery Fullcalendar 问题

jquery - 点击fullcalendar插件的特定时间

javascript - 全日历 : minTime wrongly calculate fc-not-start

javascript - 如何禁用日期控制按钮的 FullCalendar onClick 功能?

angular - 无法读取 null 的属性 '__k' - FullCalendar + Angular 11

javascript - 如何在js Fullcalendar中找到第二个和第四个星期六?

javascript - 如何从全日历年 View 中隐藏上个月和下个月的日期和事件?

javascript - 在完整日历中显示三个月