We added a new hours Formatter called hoursList. This Formatter has more flexibility around displaying hours, and the open status information on cards.
Before
After
Basic Usage
To use the formatter out of the box, call the formatter in your card’s the following in your card’s hours field (under dataForRender):
hours: Formatter.hoursList(profile),
Additional Formatter Options
The second parameter in the formatter allows you to add additional configuration. It accepts a JSON object with three optional keys:
-
isTwentyFourHourClock: Use 24 hour clock if true, 12 hour clock if false. Defaults based on locale if undefined. -
disableOpenStatus: If true, displays the hours intervals, rather than the open status string for today. Defaults to false. -
firstDayInList: A day name in English, e.g. “SUNDAY”, this day will be displayed first in the list. If unspecified, the current day will be at the top.
Advanced Examples
To use a twenty four hour clock:
hours: Formatter.hoursList(profile, { 'isTwentyFourHourClock': 'true'} ),
To disable open status:
hours: Formatter.hoursList(profile, { 'disableOpenStatus': 'true'} ),
To set the first day in the list to Sunday a twenty four hour clock:
hours: Formatter.hoursList(profile, { 'firstDayInList': 'SUNDAY'} ),
Using a Different Hours Field or Locale
The formatter defaults to using the hours built-in filed. To use a different hours field, you’ll need to use the third parameter, and pass an empty object as the second.
hours: Formatter.hoursList(profile, {}, 'c_myCustomHoursField'),
Finally, the locale used defaults to the page’s locale. You can override this in the fourth parameter if needed.
hours: Formatter.hoursList(profile, {}, 'hours', 'en'),
