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

How to color code fullcalendar events based on description

本文关键字：事件 颜色 编码 日历 何根 描述      更新时间：2024-02-27

我们为整个公司使用一个日历来显示谁有休息日。人力资源部希望为软件部门的任何人使用蓝色，为电子部门使用红色，为硬件部门使用绿色作为活动背景色。

之前的开发人员使用了FullCalendar1.5.3和GoogleCalendar。人力资源部会通过在谷歌日历描述中输入S、E或H来指定哪个人在哪个部门。以前的开发人员编写了一个自定义代码来读取该描述并使用正确的背景颜色创建事件。由于2014年11月27日谷歌v2关闭，我不得不使用最新的fullcalendar.js和gcal.js库重新创建它，这证明它几乎是重新编写的，可以使用谷歌API的东西。

我拿到了日历，可以显示事件，但我不知道如何让它阅读字母的描述，并根据描述更改背景色。有人知道如何做到这一点吗，也许可以使用一个简单的开关案例，或者if语句？

您可以为此使用eventRender（回调）。检查description文本并更改所需事件的bgcolor。

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

如需进一步帮助，请查看此处的完整日历文档

谢谢Franky！我能够创造它，

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');
			}
		},

相关文章：