Time Format for events on the Calendar

[cocarrig]

Description: For Calendar integrations, update formatting which for consistency with integrations use: Remove 'a' and 'p' and replace to 'am' and 'pm' respectfully. For 24 hour formatting, use HH:MM formatting (IE 14:00).

Discussed in https://github.com/dakboard/Cloud-Platform/discussions/1927

^{Originally posted by **rsalsbery** June 20, 2023} On the Big Monthly and Monthly calendar it has come to our attention that when an event starts at the top of the hour that the time stamp does not include the Minutes. See Below: Customers have requested that we have the format be HH:MM when displaying this time to improve the aesthetic look of the calendar. I would recommend making this a selectable option as this was originally done to save space in the Calendar Day block.

[rsalsbery]

Duplicate case:

https://github.com/dakboard/Cloud-Platform/issues/2244

[Dan-Peck]

Development Update

While this is still under development, the following info may still change in the final release version, however, the expected HTML structure and CSS classes available in most calendar types will be as follows:

Classes:

• .time-val - Main time container
• .time-val > .hour-val - Container for the hour
• .time-val > .minute-val - Container for the minute
• .time-val > .meridiem - Element used to display the am/pm string (using content property, not HTML content)
• .time-val.isAM - Class is present when time is in first half of the day
• .time-val.isPM - Class is present when time is in the second half of the day
• .time-val.is24 - Class is present when displaying time in 24-hour format
• .time-val.top-of-hour - Class is present when the minute is :00

Examples:

<span class="time-val isAM ">
  <span class="hour-val">12</span>
  <span class="minute-val">30</span>
  <span class="meridiem"></span>
</span>

<span class="time-val isAM  top-of-hour ">
  <span class="hour-val">4</span>
  <span class="minute-val">00</span>
  <span class="meridiem"></span>
</span>

<span class="time-val isPM  is24 ">
  <span class="hour-val">23</span>
  <span class="minute-val">30</span>
  <span class="meridiem"></span>
</span>

This release will change the standard appearance of times in the calendar. However, for those that wish to revert such changes back to what they are now will be able to use any/all of the following CSS to do so:

/** Hides :{minute} on top of the hour times **/
.time-val.top-of-hour .minute-val {
    display: none;
}

/** Change "am" to "a" **/
.time-val.isAM .meridiem:after {
    content: "a" !important;
}
/** Change "pm" to "p" **/
.time-val.isPM .meridiem:after {
    content: "p" !important;
}

/** Hides ":" separator **/
.time-val .minute-val:before {
    display: none;
}

Note that each calendar type may also make minor CSS adjustments to the formatting to suit the rendering for that type. But this should provide a great deal more flexibility and target-ability in styling calendar times.

[Dan-Peck]

Merged in @ 3aedce1 and added to the queue for upcoming release to the live site.