UI Builder Calendar Component Questions

Velma · ‎06-27-2022

Here's my it doesn't work if I can't do this question. How can I get the calendar to show events in the correct local time?

I am able to get the data to show correctly in Eastern Standard Time by adding EST to Available TimeZones. I cannot find a way to get it to show Eastern Daylight Time--EDT is rejected. What I actually want is for it to show in the correct time (EST if EST, EDT if EDT), you know, your basic functionality. My use case is pretty simple because all my data is US Eastern time and I want it to always show in the correct US Eastern time for the date. Any help on this? I can coerce the data into anything that will make this work.

Here are some less critical remaining issues.

--Some of the sample events have both start and end attributes and startMS and endMS attributes--what does it mean to have both? What if they represent different date-times? Can one be left out?

--Any way to make the description show for a half hour event?

--Any way to make the description wrap on the calendar or agenda view?

--Any way to customize the agenda view?

--Does the popover (slot, properties) really work in some way? How?

--There are all these slots under the calendar, but if I put components in them nothing changes (limited experiments). Do any of them do anything?

--Has someone done a video showing how all this stuff could work?

Thanks for any suggestions, especially about the main issue. If this is not doable, can anyone suggest how I can make a calendar invite for Outlook which I send in a flow via email?

Velma · ‎07-20-2022

This is what I learned.

1--On my primary question, the calendar is built on moment timezones. Search for lists of moment timezones valid names and acronyms. I couldn't find a way to access moment timezones directly in a UI Builder script, but you can set it up somewhere or just find some version somewhere on the web. The name property in your objects under Available Timezones need to be from those lists, the label can be whatever you choose. Then local time, daylight savings time and all work. Mine ended up looking like this.

[

{

"name": "America/New_York",

"label": "US Eastern Time"

},

{

"name": "GMT",

"label": "UTC"

}

]

2--The Timezone property sets the default--it needs to be a name (not label) from Available Timezones.

3--I set Time Format to "hh:mm a" to get a standard US time usage.

4--If Context Date is null it will set the calendar to today's date with a marker for current time.

5--San Diego documentation is considerably better for this component and most of it seems to apply to Rome.

6--I simplified out the Timeline Sections. My data from the transformation for the Events looks like an array of objects like these:

{

"id": "e3ff55541bcf81502fea10ad9c4bcb19",

"title": "Event 334",

"startMS": 1648582200000,

"endMS": 1648584000000,

"bgColor": "#FFC433",

"description": "[per your choice]"

}
You are not supposed to use both the MS format dates and the date format dates--ms is preferred. I set the background colors by status and the description based on various in the transform.

7--I couldn't figure out the popover and all. I made a modal pop up on Event Clicked using the Label value tabbed component to show more data in an easy to read format, including a link to the record's underlying form. (In more detail: Event Clicked calls a page script; the payload includes the Id of the calendar event; that page script sets a client state parameter with the id; when the CSP is changed, it triggers a Lookup Record data resource bound to that CSP to run. Data Fetch Succeeded event on the Lookup Record calls another page script which builds the JSON for the label value tabbed component and opens the modal.)

View solution in original post

Andrew Bettcher · ‎06-24-2025

I was asked to add UTC to a calendar which I did and it works OK but caused me to spot a problem where the default timezone is GMT but it's one hour out as we're currently in a DST period (GMT + 1).

The label and the value of the available timezone are both the same.

Do I need to add another timezone with a different label just for this?

Andrew Bettcher · ‎06-24-2025

Aha. I see. Rather than selecting GMT from the list of available timezones, select an OOTB location (in this case "Europe/London" and it will adjust automatically.

Re-reading, you very clearly said that. I just misinterpreted it.

All works fine now.

Ta.

Andrew Bettcher · ‎06-24-2025

Same for me regarding popover. Worked OK in PDI and despite confirming all of the right sys_ids were being passed in at the right time via console logs, it just wouldn't popup.

We added a context menu where user can select preview which then pops up (or pops over) a modal container.