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

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

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

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

优点
目前测试,完美支持增删改后的异步加载,支持日视图、周视图、月视图的各种切换,支持项目过多折叠的展开和收缩是发生的异步加载;
缺点
橘红色为默认的颜色,由于ECMAScript脚本是异步的,所以改变会有一个渐变的效果,如下图,可以看到改变是一个渐变的过程,不过也挺赏心悦目的,呵呵。

其他声音
在做这个日历的过程中,也看到一些其他解决方案,重写日历视图就不提了;看到Erucy在SharePoint 2010里面做的,链接附后,但是发现月视图上没有了副标题,所以没办法实现了;还有就是日历重叠功能,链接我也附后了,大家自己参考吧。
参考文档
http://www.cnblogs.com/erucy/archive/2010/09/20/2416097.html
http://www.cnblogs.com/yunliang1028/archive/2012/02/15/2352766.html
SharePoint 2013 日历根据Category显示不同颜色的更多相关文章
- SharePoint 2013 日历重叠功能简介
之前做了一个“SharePoint 2013 日历根据Category显示不同颜色”,然后大家留言说为什么不用SharePoint自带的日历重叠功能,所以自己尝试一下这个功能,和之前的博客进行一下对比 ...
- SharePoint 2013 日历视图兼容性问题
在IE11上访问SharePoint 2013 calendar视图,发现加入兼容性视图以后访问,正常,如下图: 不加入兼容性视图IE11访问,出现兼容性问题,如下图: 因为有些环境有问题,有些环境没 ...
- SharePoint 2013 自定义翻页显示列表项
项目需求:自定义开发一个能分页显示列表项的小部件,允许左右翻页,能根据用户权限来显示管理链接等. 效果如下: 技术要求:使用sharepoint rest API 来获取列表项,这样性能高,能够快速响 ...
- SharePoint 2013/2010 中的日历重合 (Calendars Overlay)
本文介绍 SharePoint 2013/2010 中的日历重合 (Calendars Overlay). 日历重合 (Calendars Overlay)的用途就是将 不多于10个日历或日历视图聚集 ...
- SharePoint 2013 定制搜索显示模板(二)
前言 之前一篇博客,简单的介绍了如何定制搜索显示模板,这一次,我们介绍一下如何定制搜索显示时,弹出来的那个页面,相信这个大家也都会遇到的. 1.第一部分就是搜索显示模板的部分,第二部分就是搜索项目详情 ...
- SharePoint 2013 定制搜索显示模板
前言 之前我们已经介绍了一些关于搜索的相关配置,当然,用户关于搜索的要求可能是各种各样.有时候,用户会说,你们的显示结果太Low了,确实是:不过,在SharePoint中,我们可以很容易的定制搜索结果 ...
- SharePoint 2013技巧分享系列 - 同步Exchange显示高清用户照片
在“SharePoint 2013技巧分享系列 - Active Directory同步显示用户照片”文中介绍了如何同步Active Directory显示用户照片,但是同步完成后,用户照片尺寸和清晰 ...
- SharePoint 2013技巧分享系列 - Active Directory同步显示用户照片
为了保持通讯信息的一致性,需要设置SharePoint,Exchange, Lync等信息同步更新显示,例如,员工头像信息. 本文介绍如何在SharePoint 2013中同步显示Active Dir ...
- SharePoint 2013 关于自定义显示列表表单的bug
1.在SharePoint 2013中,我们隐藏列表Dispform页面的ListFormWebPart部件,转而使用自定义显示列表表单进行展示,因为这样更容易定制我们需要的显示: 2.之后发现文件夹 ...
随机推荐
- 漫谈可视化Prefuse(三)---Prefuse API数据结构阅读有感
前篇回顾:上篇<漫谈可视化Prefuse(二)---一分钟学会Prefuse>主要通过一个Prefuse的具体实例了解了构建一个Prefuse application的具体步骤.一个Pre ...
- PHP函数处理函数实例详解
1. call_user_func和call_user_func_array: 以上两个函数以不同的参数形式调用回调函数.见如下示例: <?php class AnotherTestClass ...
- Android SDK Manager无法更新的解决
只需要配置一下hosts文件,在文件的末尾添加下面一句: 74.125.237.1 dl-ssl.google.com windows系统中hosts文件的位置为:C:\Windows\System3 ...
- 《ASP.NET SignalR系列》第二课 SignalR的使用说明
从现在开始相关文章请到: http://lko2o.com/moon 接续上一篇:<ASP.NET SignalR系列>第一课 认识SignalR (还没有看的话,建议您先看看) 一.指定 ...
- github.com/dotnet/orleans
Orleans is a framework that provides a straight-forward approach to building distributed high-scale ...
- C#+ html 实现类似QQ聊天界面的气泡效果
/**定义两个人的头像*/ Myhead = "<img src=qrc:/chatdemo/Msg/Head.png width='30px'heigth='30px'>&qu ...
- 替换html元素
html: <div id='divContainer'> <div id='divBeReplaced'>被替换的元素</div> </div> 1. ...
- 使用ajax和js无刷新改变页面内容和地址栏URL
发现一个可以改变地址栏,而不导致页面刷新的东东. Chrome, FF测试通过,不支持IE. 实现目标 页面的跳转(前进后退,点击等)不重新请求页面 页面URL与页面展现内容一致(符合人们对传统网页的 ...
- 显示XML文档时排序数据
先看XML文档: 也可拷贝下面代码另存为XMl文档: <stepList> <steps> <step> <order>1</order> ...
- CSS代码重构与优化之路
作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...