Custom Color Coding for CQ5 Calendar

The CQ5 Calendars by default have color codes fixed for the derived events and the events that can be created.

However we can also customize the color for certain event types. Lets take a scenario where we can define new meeting types ( for our reference) and color code them.

This provides an intuitive experience for the user to decide the kind of event he/she is going to attend.

 

To achieve this we have to perform the following steps.

 

          1. Copy the Calendar folder structure (/libs/collab/calendar)  to your local apps folder to customize the features.
          2. Customize the Calendar edit form to include a meeting type, in our case its defined as four (Meeting,Seminar,Speech and Conference)
            • Create a new Event Edit Form and associate that for the Calendar.
            • Create a new Event View Form and repeat the same except that now it is a read only mode.
          3. We have to modify the java script which renders the color for the various event types. This is available under the file MonthLens.js file
            • The function createAllDayEventDiv retrieves the color for the all day event in question  like given below.
              • var color = CQ.collab.cal.Calendar.getColorFor(event);
                Replace the default function with a custom one like
                var color = CQ.collab.cal.Calendar.getEventColorFor(event);
            • Perform the same changes for renderTimeEvents function too ( i.e. replace the default one with the custom function getEventColorFor).
          4. The Event Type to the color code can be done in multiple ways, but here we will take a look at the simplest approach of matching the event Type with predefined color.
            • Open the Calendar.js file and add the following piece of code

/**
* Returns the color to use for an event. This color will be the same
* for all events from the same calendar/subscription.
*
* @return {String} a hex color value in the form of "FF0000"
*/
getEventColorFor: function(event) {
var colorValue = "40864B";
var eventType = event.get("eventType");
if(eventType == "seminar") {
colorValue = "ED1C24"; // RED
}
else if (eventType == "meeting") {
colorValue="00A2E8"; // BLUE
}
else if (eventType == "speech") {
colorValue="FF7F27"; // orange
}
else if (eventType == "conference") {
colorValue="22B14C"; // GREEN
}
return colorValue;
}

            •  Edit the calendar and add events of each type.
            • Once completed the calendar should looking similar to what is displayed here.
Color Coded Calendar

Color Coded Calendar

Share on Facebook