{"id":7199,"date":"2017-10-30T14:48:47","date_gmt":"2017-10-30T06:48:47","guid":{"rendered":"http:\/\/www.boostsolutions.com\/blog\/?p=7199"},"modified":"2023-07-31T11:38:08","modified_gmt":"2023-07-31T03:38:08","slug":"color-code-calendar-events-calendar-rollup-web-part","status":"publish","type":"post","link":"https:\/\/www.boostsolutions.com\/blog\/color-code-calendar-events-calendar-rollup-web-part\/","title":{"rendered":"Color code calendar events on Calendar Rollup Web Part"},"content":{"rendered":"<p>Recently, BoostSolutions announced the release of Calendar Rollup 3.0 for SharePoint 2010\/2013\/2016. One great feature is that users have more options to color code the events not only based on the event types.<\/p>\n<p>Calendar Rollup 3.0 enables users to color code the events based on multiple column types, such as Single Line of Text, Number, Yes\/No. This feature is very useful in following scenarios.<\/p>\n<p>Scenario 1:<\/p>\n<p>There are a lot of events recorded in a Calendar list, and I want to set the events color as green when the event title contains \u201cTraining\u201d.<\/p>\n<p>In \u201cCustomize Color Scheme\u201d section, I specify the scheme as \u201cTitle contains training\u201d, and set the background color as green, text color as white.<\/p>\n<p><a href=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-7201\" src=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-1.png\" alt=\"calendar-rollup-blog-1\" width=\"566\" height=\"149\" srcset=\"https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-1.png 566w, https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-1-300x78.png 300w\" sizes=\"(max-width: 566px) 100vw, 566px\" \/><\/a><\/p>\n<p>After that, the events contain \u201cTraining\u201d will be shown as green in calendar as following.<\/p>\n<p><a href=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-2.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-7202\" src=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-2.png\" alt=\"calendar-rollup-blog-2\" width=\"973\" height=\"509\" srcset=\"https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-2.png 973w, https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-2-300x156.png 300w\" sizes=\"(max-width: 973px) 100vw, 973px\" \/><\/a><\/p>\n<p>Scenario 2:<\/p>\n<p>In the calendar, I want to mark the tasks as red when the task complete is 100%.<\/p>\n<p>In \u201cCustomize Color Scheme\u201d section, specify the scheme as \u201c%Complete Is equal to 1\u201d, and set the background color as red, text color as white.<\/p>\n<p><a href=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-3.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-7203\" src=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-3.png\" alt=\"calendar-rollup-blog-3\" width=\"553\" height=\"156\" srcset=\"https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-3.png 553w, https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-3-300x84.png 300w\" sizes=\"(max-width: 553px) 100vw, 553px\" \/><\/a><\/p>\n<p>And then, the tasks which complete is equal to 100% will be shown as red in calendar as following.<\/p>\n<p><a href=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-4.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-7204\" src=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-4.png\" alt=\"calendar-rollup-blog-4\" width=\"1016\" height=\"490\" srcset=\"https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-4.png 1016w, https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-4-300x144.png 300w\" sizes=\"(max-width: 1016px) 100vw, 1016px\" \/><\/a><\/p>\n<p>Scenario 3:<\/p>\n<p>When I record events on calendar, I want to distinguish the private and public events with different colors. There is a column named as Public, and the column type is Yes or No. when I select Yes, means that event is public, and the color should be blue.<\/p>\n<p>In \u201cCustomize Color Scheme\u201d section, specify the scheme as \u201cPublic Is equal to Yes\u201d, and set the background color as blue, text color as white.<\/p>\n<p><a href=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-5.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-7205\" src=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-5.png\" alt=\"calendar-rollup-blog-5\" width=\"574\" height=\"158\" srcset=\"https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-5.png 574w, https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-5-300x82.png 300w\" sizes=\"(max-width: 574px) 100vw, 574px\" \/><\/a><\/p>\n<p>And then, the public events will be shown as following.<\/p>\n<p><a href=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-6.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-7206\" src=\"http:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-6.png\" alt=\"calendar-rollup-blog-6\" width=\"1005\" height=\"490\" srcset=\"https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-6.png 1005w, https:\/\/www.boostsolutions.com\/blog\/wp-content\/uploads\/2017\/10\/calendar-rollup-blog-6-300x146.png 300w\" sizes=\"(max-width: 1005px) 100vw, 1005px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently, BoostSolutions announced the release of Calendar Rollup 3.0 for SharePoint 2010\/2013\/2016. One great feature is that users have more options to color code the events not only based on the event types. Calendar Rollup 3.0 enables users to color code the events based on multiple column types, such as Single Line of Text, Number, [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,485],"tags":[],"_links":{"self":[{"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7199"}],"collection":[{"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=7199"}],"version-history":[{"count":3,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7199\/revisions"}],"predecessor-version":[{"id":7208,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7199\/revisions\/7208"}],"wp:attachment":[{"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=7199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=7199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boostsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=7199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}