UIB Calendar Component, Colors for Events on the Calendar

[Chad R]

Hi All,

I got a good one today, I have been working on a UI Page for a requirement where they want a Calendar that shows events based off a custom table. As part of the requirement they want the events to be able to be color coded on the calendar. Below is an example of the Calendar and one of the events I have configured. The goal is for the event, change freeze, when I select the importance of high - red for the calendar event visualization to also show red instead of the default blue. I'm new to the UI builder and  so far have struggled to find where I would make this configuration. Any help here as always is greatly appreciated as I continue my journey on learning the UI Builder. 

[Chad R]

I've tried just about everything I can think of and nothing has worked so far. This one might be unsolvable. 

[Velma · Accepted solution]

I create my data via a transform (various documentation elsewhere, but I think I noticed there is now a different preferred methodology--mine works well, so I am not rebuilding. It looks like this. Setting the background color works swimmingly (and instantly when the status is edited). I believe there is also a textColor property.

function transform(input){
	var eventArray = [];
	var records = input.data;

	for (var counter in records){
		var record = records[counter];
		var calendarEvent = {};
		calendarEvent.id = record.sys_id.value;
		calendarEvent.title = record.event_name.displayValue;
		
		var start = new GlideDateTime(record.event_begin_datetime.value);
		calendarEvent.startMS = start.getNumericValue();
		
		var end = new GlideDateTime(record.event_end_datetime.value);
		calendarEvent.endMS = end.getNumericValue();
		
		var status = record.event_status.displayValue;
		
		var bgColor = "";
		var textColor = "";
		
		switch (status) {
			case "Open":
				bgColor = "#FFC433";
				break;
			case "Complete":
				bgColor = "#AED6F1";
				break;
			case "Canceled":
				bgColor = "#D7DBDD";
				break;
			default:
				//bgColor = "#FFC433";
				break;
		}
		calendarEvent.bgColor = bgColor;

		calendarEvent.description = buildDescriptionString(record, status);
		
		eventArray.push(calendarEvent);
	}
	
	function buildDescriptionString(record, status) {
               var working = status;
		//[ concatenate various values from record]
		return working;
	}

	return eventArray;
}

The Properties section on the transform looks like this:

[
    {
      "name": "data",
      "label": "data",
      "description": "Transform Events for Calendar",
      "readOnly": false,
      "fieldType": "json",
      "valueType": "object",
      "mandatory": true
    }
]

[Chad R]

Velma, 

You have taught me something new today, I didn't even think of using the transform for some reason to make this happen, your solution works beautifully, thank you very much I'll make sure to share this in my network as well as I've had a few colleagues with this same issue.

[Ravi Gaurav]

Hi! It sounds like you are working on a UI Page in ServiceNow, and you are trying to customize the color of events on a calendar based on their importance level.

To achieve this, you can modify the CSS of the calendar to change the background color of events based on their importance level. Here's an example of how you can do this:

First, create a new field on your custom table to store the importance level of each event. For example, you could create a choice field called importance_level with values like "Low", "Medium", and "High".

Next, open your UI Page and navigate to the HTML template for your calendar view. This template is usually called sp_calendar.html.

Inside the template, you can add a JavaScript function to set the background color of each event based on its importance level. For example, you could add the following function:

function setColorByImportance() {
var events = document.querySelectorAll('.fc-event');
for (var i = 0; i < events.length; i++) {
var event = events[i];
var importance = event.getAttribute('data-importance');
if (importance === 'High') {
event.style.backgroundColor = 'red';
} else if (importance === 'Medium') {
event.style.backgroundColor = 'orange';
} else {
event.style.backgroundColor = 'blue';
}
}
}

This function uses the querySelectorAll() method to select all the events on the calendar, then loops through them and checks their data-importance attribute (which you can set in the event data source) to determine their importance level. Depending on the importance level, it sets the background color of the event using the style.backgroundColor property.

Finally, you can call the setColorByImportance() function after the calendar is rendered to apply the color coding. You can do this by adding a line of code like this:

javascriptCopy code
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('myCalendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
// calendar options here
});
calendar.render();
setColorByImportance(); // <-- add this line
});

This code adds an event listener to the DOMContentLoaded event (which fires when the page is fully loaded), then initializes and renders the FullCalendar object (using the myCalendar element as the target), and finally calls the setColorByImportance() function to set the event colors.

I hope this helps! Let me know if you have any further questions.

If my answer solved your issue, please mark my answer as ✅ Correct & 👍Helpful based on the Impact.