[WC-2892]: Calendar time format (#1729)

Author: samuelreichert

packages/pluggableWidgets/calendar-web/src/Calendar.xml

@@ -114,6 +114,10 @@
                         <attributeType name="DateTime" />
                     </attributeTypes>
                 </property>
+                <property key="timeFormat" type="textTemplate" required="false">
+                    <caption>Time format</caption>
+                    <description>Default time format is "hh:mm a"</description>
+                </property>
                 <property key="minHour" type="integer" defaultValue="0">
                     <caption>Day start hour</caption>
                     <description>The hour at which the day view starts (0–23)</description>

packages/pluggableWidgets/calendar-web/src/helpers/CalendarPropsBuilder.ts

@@ -1,5 +1,11 @@
 import { ObjectItem } from "mendix";
-import { CalendarProps as ReactCalendarProps, Formats, NavigateAction, ViewsProps } from "react-big-calendar";
+import {
+    CalendarProps as ReactCalendarProps,
+    DateLocalizer,
+    Formats,
+    NavigateAction,
+    ViewsProps
+} from "react-big-calendar";
 import { withDragAndDropProps } from "react-big-calendar/lib/addons/dragAndDrop";
 
 import { CalendarContainerProps } from "../../typings/CalendarProps";
@@ -115,6 +121,14 @@ export class CalendarPropsBuilder {
             formats.eventTimeRangeFormat = () => "";
         }
 
+        if (this.props.timeFormat?.status === "available") {
+            const timeFormat = this.props.timeFormat.value ?? "hh:mm a";
+
+            formats.timeGutterFormat = (date: Date, _culture: string, localizer: DateLocalizer) => {
+                return localizer.format(date, timeFormat);
+            };
+        }
+
         return formats;
     }
 

packages/pluggableWidgets/calendar-web/typings/CalendarProps.d.ts

@@ -46,6 +46,7 @@ export interface CalendarContainerProps {
     defaultViewCustom: DefaultViewCustomEnum;
     defaultViewStandard: DefaultViewStandardEnum;
     startDateAttribute?: EditableValue<Date>;
+    timeFormat?: DynamicValue<string>;
     minHour: number;
     maxHour: number;
     customViewCaption?: DynamicValue<string>;
@@ -99,6 +100,7 @@ export interface CalendarPreviewProps {
     defaultViewCustom: DefaultViewCustomEnum;
     defaultViewStandard: DefaultViewStandardEnum;
     startDateAttribute: string;
+    timeFormat: string;
     minHour: number | null;
     maxHour: number | null;
     customViewCaption: string;