如何根据描述对全日历事件进行颜色编码

Question

我们为整个公司使用一个日历，显示谁休假。 HR 想为软件部门的任何人使用蓝色，为电子部门使用红色，为硬件部门使用绿色作为活动背景颜色。

之前的开发者为此使用了 FullCalendar1.5.3 和 Google 日历。 HR 会通过在 google 日历描述中输入 S、E 或 H 来指定哪个人在哪个部门。以前的开发人员编写了一个客户代码来读取该描述并创建具有正确背景颜色的事件。由于 2014 年 11 月 27 日 google v2 被关闭，我不得不使用最新的 fullcalendar.js 和 gcal.js 库重新创建它，这些库几乎被重写以便能够使用 google API 东西。

我让日历工作并显示事件，但我不知道如何让它读取字母的描述并根据它的描述更改 bgcolor。有谁知道如何做到这一点，也许使用简单的 switch case 或 if 语句？

Answer 1

您可以为此使用 eventRender(回调)。检查 description 文本并为您想要的事件更改 bgcolor。

eventRender: function( event, element, view ) { 
     if (event.description == "x") {
         //apply your logic here, make changes to element.
         element.css('background', 'red');
     }
}

需要进一步帮助check fullcalendar docs here

Answer 2

谢谢弗兰奇！我能够创建它，

eventRender: function (event, element) {
   if (event.description == "(S)") { //SOFTWARE DEPARTMENT
    element.css('background-color', '#00FF00');
   } else if (event.description == "(E)") { // ELECTRONICS DEPARTMENT
    element.css('background-color', '#0000FF'); 
   } else if (event.description == "(J)") { // JP
    element.css('background-color', '#FF0000');
   } else if (event.description == "(H)") { // HARDWARE DEPARTMENT
    element.css('background-color', '#FFFF00');
   } else if (event.description == "(A)") { // ADMIN DEPARTMENT
    element.css('background-color', '#FF00FF');
   } else { // ANYONE ELSE NOT IN EITHER OF THE DEPARTMENTS ABOVE
    element.css('background-color', '#000000');
   }
  },

如何根据描述对全日历事件进行颜色编码

How to color code fullcalendar events based on description

javascript

calendar

fullcalendar

google-calendar-api

gcal