Color-Code and Toggle SharePoint Calendar Events

sharePointCalendarColorCoding.html

<style>
#WPQ2_nav_header {
    font-size: 3em;
    float: left;
}
.ms-acal-header td, .ms-acal-rootdiv td, .ms-acal-rootdiv th {
    vertical-align: middle;
}
.ms-acal-item {
    background-color: #666;
    border: solid 1px #666;
}
.ms-acal-vcont td {
    position: relative
}
.ms-acal-vcont td a {
    position: absolute;
    bottom: 0px;
    right: 0px;
}
#banner {
    background-image: url(AnnualCalendarGraphic-AR.jpg);
    height: 150px;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
#banner h1 {
    color: #af272f;
    border: 5px solid #af272f;
    background-color: #FFF;
    padding: 12px 15px 10px;
    position: relative;
}
.triangle {
    position: absolute;
    border-style: solid;
    border-width: 0px 20px 20px;
    border-color: transparent transparent transparent #AF272F;
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    bottom: 0;
    right: 0;
    margin-right: -1px;
}

/* overriding tag styles */

:root {
    --community: #008000;
    --conference: #00FF00;
    --org-board: #FF1493;
    --external-boards: #FFFF00;
    --signature: #800080;
    --holiday: #AF272F;
    --training: #FFA500;
    --wellness: #00BFFF;
    --erg: #00FFFF;
	
}

input[value="community"] {
    box-shadow: 3px 3px var(--community);
}
input[value="conference"] {
    box-shadow: 3px 3px var(--conference);
}
input[value="org-board"] {
    box-shadow: 3px 3px var(--org-board);
}
input[value="external-boards"] {
    box-shadow: 3px 3px var(--external-boards);
}
input[value="signature"] {
    box-shadow: 3px 3px var(--signature);
}
input[value="holiday"] {
    box-shadow: 3px 3px var(--holiday);
}
input[value="training"] {
    box-shadow: 3px 3px var(--training);
}
input[value="wellness"] {
    box-shadow: 3px 3px var(--wellness);
}
input[value="erg"] {
    box-shadow: 3px 3px var(--erg);
}
.community {
	background-color: green;
    border: 1px solid var(--community);
    color: #FFF;
}

.conference {
	background-color: lime;
    border: 1px solid var(--conference);
    color: #000;
}

.org-board {
	background-color: deeppink;
    border: 1px solid var(--org-board);
    color: #000;
}

.external-boards {
	background-color: yellow;
    border: 1px solid var(--external-boards);
    color: #000;
}

.signature {
	background-color: purple;
    border: 1px solid var(--signature);
    color: #FFF;
}

.holiday {
	background-color: var(--holiday);
    border: 1px solid var(--holiday);
    color: #FFF;
}

.training {
	background-color: orange;
    border: 1px solid var(--training);
    color: #000;
}

.wellness {
	background-color: deepskyblue;
    border: 1px solid var(--wellness);
    color: #000;
}

.erg {
        background-color: aqua;
    border: 1px solid var(--erg);
    color:#000;
}

.community *,
.signature *,
.holiday *,
.community a:link,
    .community a:visited,
    .community a:hover,
    .community a:active,
.signature a:link,
    .signature a:visited,
    .signature a:hover,
    .signature a:active,
.holiday a:link,
    .holiday a:visited,
    .holiday a:hover,
    .holiday a:active{
    color: #FFF !important;
}

.conference *,
.org-board *,
.external-boards *,
.training *,
.wellness *,
.erg *,
.conference a:link,
    .conference a:visited,
    .conference a:hover,
    .conference a:active,
.org-board a:link,
    .org-board a:visited,
    .org-board a:hover,
    .org-board a:active,
.external-boards a:link,
    .external-boards a:visited,
    .external-boards a:hover,
    .external-boards a:active,
.training a:link,
    .training a:visited,
    .training a:hover,
    .training a:active,
.wellness a:link,
    .wellness a:visited,
    .wellness a:hover,
    .wellness a:active,
.erg a:link,
    .erg a:visited,
    .erg a:hover,
    .erg a:active{ 
    color: #000 !important;
}

.community,
.signature,
.holiday,
.conference,
.org-board,
.external-boards,
.training,
.wellness, 
.erg{
    transition: all .3s ease-in-out;
}

.hide-tag {
    /* display: none; */
    opacity: 0;
}

#toggleContainer {
    display: flex;
    justify-content: space-between;
}
</style>
<script>
function colorCode(){
    // color-code the tagged events
    var calTitles = document.querySelectorAll('.ms-acal-item');
    var tagRegex = /(\[.*\])/i;
    calTitles.forEach(function(item){
        var tagMatches = item.innerHTML.match(tagRegex);
        if(tagMatches != null){
            // strip out the brackets because regex doesn't want to
            var bracketRegex = /\[*\]*/g;
            var tag = tagMatches[0].replace(bracketRegex, '');
            // console.log(tag);
            // item.closest('.ms-acal-item').setAttribute('data-tag', tag);
            item.classList.add(tag);
            item.classList.add(tag);
        }
    });
}
ExecuteOrDelayUntilScriptLoaded(colorCode,"sp.ribbon.js");

window.onload = function(){
    var $calendarContainer = $('#WebPartWPQ2');
    $calendarContainer.bind("DOMSubtreeModified", colorCode);
}

// the below function simulate a click on a link
function fireEventClick(elem){
    if(document.createEvent){
      var e = document.createEvent('MouseEvents');
      e.initMouseEvent('click', /* Event type */
      true, /* Can bubble */
      true, /* Cancelable */
      document.defaultView, /* View */
      1, /* Mouse clicks */
      0, /* Screen x */
      0, /* Screen y */
      0, /* Client x */
      0, /* Client y */
      false, /* Ctrl */
      false, /* Alt */
      false, /* Shift */
      false, /* Meta */
      0, /* Button */
      null); /* Related target */
      elem.dispatchEvent(e);
    } else { // pour IE
      elem.click();
    }
}

// Expand the events
// because Sharepoint redraw ALL the events when we click on Expand, then we need a special recurrent function
function ExpandEvents(idx) {
  var a = document.querySelectorAll('a[evtid="expand_collapse"]');
  if (idx < a.length) {
    if (a[idx].parentNode.getAttribute("_expand") !== "collapse") fireEventClick(a[idx]);
    ExpandEvents(++idx);
  }
}

function onCalendarGridsRendered(){
  setTimeout(function() {
    ExpandEvents(0)
  }, 250)
}

// some code reused from http://www.codeproject.com/Tips/759006/Enhancing-SharePoint-Calendar-sp-ui-applicationpag
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
    //Week or Day Calendar View
    SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids_Old = SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids;
    SP.UI.ApplicationPages.DetailCalendarView.prototype.renderGrids = function SP_UI_ApplicationPages_DetailCalendarView$renderGrids($p0) {
      this.renderGrids_Old($p0);
      onCalendarGridsRendered();
    };

    //Month Calendar View
    SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids_Old = SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids;
    SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids = function SP_UI_ApplicationPages_SummaryCalendarView$renderGrids($p0) {
      this.renderGrids_Old($p0);
      onCalendarGridsRendered();
    };

    ExpandEvents(0)
}, "SP.UI.ApplicationPages.Calendar.js");
</script>