UI Builder Calendar Component Questions

[Velma]

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]

To answer my most critical question myself, "America/New York" works for my particular use case--it handles daylight savings and not daylight savings. Not an ideal name, but functional is good.

[Marc Mouries]

to send a calendar invite, check the page Create iCalendar invitations for custom tables

to make the description show for a half hour event, try to reduce the timeRowSpan - number - Value in minutes, for which time scale scale should be drawn. Default value is 60. Meaning 24 markers of 1 hour each will be seen on the time scale.

PS: Split your questions in multiple posts, this will make it easier to answer and for others to find the relevant answer when they have a similar question.

[Velma]

Thanks, Marc. I am saving that link for creating Calendar invites for if I have time to implement it someday--it is great to know that documentation is there and that it is really sanely possible. I believe timeRowSpan is an attribute of the objects in the array under View Settings? It doesn't show up by default at least in Rome--but now that you've explained it I think that would make the long calendar even longer, and it does not seem there is a way to change what shows in the block (name rather than time), so letting that one go. I will consider the posting a dozen separate questions idea--thanks for the feedback. 🙂

[Velma · Accepted solution]

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.)