SharePoint 日历根据Category显示不同颜色

SharePoint 2023-01-12

最近有一个小需求，就是SharePoint的日历类型列表，用户希望根据Event里面的Category不同，在前台视图显示成不同的颜色，绞尽脑汁，想到这么个办法，分享给大家，希望有更好方法的也能留言推荐给我。

　　效果，如下图：

　　不一样Category的Event，前台显示的背景色不相同；

clip_image002

　　原理

　　通过分析日历视图的前台HTML，发现所有的Event都在一个div里面，而且div的class都是一样的，所以，用JQuery获取所有Event的div就比较容易了。

clip_image004

　　再深一层查看，div下面标题的链接，里面有Event的ID，通过js解析出来这个ID也不是什么难事儿，所以，根据ID用ECMAScript获取这个Event的Category也变得可行，然后再把这个Event最外面的div背景颜色改变，即可。

clip_image006

　　根据ID的值用ECMAScript脚本去SharePoint日历里读取Category的值，然后根据值来将最外面的Div改变为相应的背景颜色，下面，即使用的js脚本，给大家一个参考。

clip_image008

　　优点

　　目前测试，完美支持增删改后的异步加载，支持日视图、周视图、月视图的各种切换，支持项目过多折叠的展开和收缩是发生的异步加载；

　　缺点

　　橘红色为默认的颜色，由于ECMAScript脚本是异步的，所以改变会有一个渐变的效果，如下图，可以看到改变是一个渐变的过程，不过也挺赏心悦目的，呵呵。

clip_image010

　　其他声音

　　在做这个日历的过程中，也看到一些其他解决方案，重写日历视图就不提了；看到Erucy在SharePoint 2010里面做的，链接附后，但是发现月视图上没有了副标题，所以没办法实现了；还有就是日历重叠功能，链接我也附后了，大家自己参考吧。