- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-21-2023 08:12 AM - edited 04-21-2023 08:13 AM
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.
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-25-2023 02:11 PM
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
}
]
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-26-2023 07:46 AM - edited 04-26-2023 07:46 AM
Ravi, Chad is working on the Calendar component in a UI Builder page--he misspoke when he said "UI Page". (In UI Builder we do not have DOM access. 😟) But no doubt your documentation will be helpful to other folks who are working with "UI Pages". (If the search is working correctly "calendar" and "UI Page" should bring up this post.)