SharePoint 2013 calendar displays different colors according to category

Recently there is a small need, is the SharePoint calendar type list, users want to according to the category in the event, in the foreground view to display a different color, racked their brains, think of such a method, share to everyone, hope there is a better way to message recommend to me.

Effects, such as:

Different category of event, foreground display background color is not the same;

Principle

By analyzing the foreground HTML of the calendar view, it is found that all the events are in a Div, and the Div class is the same, so it is easier to use jquery to get all the event's Div.

Another layer of view, Div under the title of the link, there is the ID of the event, through the JS parse out this ID is not difficult, so, according to the ID with ECMAScript to obtain the category of the event also become feasible, You can then change this event's outermost div background color.

Based on the value of the ID, use the ECMAScript script to go to the SharePoint calendar to read the category value, and then according to the value of the outermost div to the corresponding background color, below, the use of the JS script, give everyone a reference.

Advantages

Currently testing, perfect support add and delete after the asynchronous load, support the day view, the Week view, the monthly view of the various switches, support the expansion and contraction of the project too much folding is the asynchronous load occurred;

Disadvantages

Orange Is the default color, because the ECMAScript script is asynchronous, so the change will have a gradient effect, such as, you can see the change is a gradual process, but also very pleasing, hehe.

Other sounds

In the process of making this calendar, also see some other solutions, rewrite the calendar view is not mentioned, see Erucy in SharePoint 2010, the link, but found that the month view is not subtitle, so no way to achieve, there is the calendar overlap function, link I also attached, Let's see for yourselves.

Reference documents

Http://www.cnblogs.com/erucy/archive/2010/09/20/2416097.html

Http://www.cnblogs.com/yunliang1028/archive/2012/02/15/2352766.html

SharePoint 2013 calendar displays different colors according to category