feat(calendar-web): split standard and custom config

Author: rahmanunver

packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts

@@ -35,14 +35,18 @@ export function getProperties(values: CalendarPreviewProps, defaultProperties: P
     // Hide custom week range properties when view is set to 'standard'
     if (values.view === "standard") {
         hidePropertiesIn(defaultProperties, values, [
+            "defaultViewCustom",
             "showSunday",
             "showMonday",
             "showTuesday",
             "showWednesday",
             "showThursday",
             "showFriday",
-            "showSaturday"
+            "showSaturday",
+            "customViewCaption"
         ]);
+    } else {
+        hidePropertyIn(defaultProperties, values, "defaultViewStandard");
     }
 
     // Show/hide title properties based on selection

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

@@ -83,7 +83,7 @@
                     <caption>Enable create</caption>
                     <description />
                 </property>
-                <property key="defaultView" type="enumeration" defaultValue="month">
+                <property key="defaultViewCustom" type="enumeration" defaultValue="month">
                     <caption>Initial selected view</caption>
                     <description>Work week and agenda are only available in custom views</description>
                     <enumerationValues>
@@ -94,6 +94,15 @@
                         <enumerationValue key="agenda">Agenda</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="defaultViewStandard" type="enumeration" defaultValue="month">
+                    <caption>Default view</caption>
+                    <description>The default view to show when the calendar is loaded</description>
+                    <enumerationValues>
+                        <enumerationValue key="day">Day</enumerationValue>
+                        <enumerationValue key="week">Week</enumerationValue>
+                        <enumerationValue key="month">Month</enumerationValue>
+                    </enumerationValues>
+                </property>
                 <property key="startDateAttribute" type="attribute" required="false">
                     <caption>Start date attribute</caption>
                     <description>The start date that should be shown in the view</description>

packages/pluggableWidgets/calendar-web/src/utils/calendar-utils.ts

@@ -67,10 +67,10 @@ interface DragAndDropCalendarProps<TEvent extends object = Event, TResource exte
         withDragAndDropProps<TEvent, TResource> {}
 
 export function extractCalendarProps(props: CalendarContainerProps): DragAndDropCalendarProps<CalEvent, object> {
-    const visibleSet = new Set<number>();
-    // Caption for custom work week button / title
-
+    const isCustomView = props.view === "custom";
+    const defaultView = isCustomView ? props.defaultViewCustom : props.defaultViewStandard;
     const customCaption: string = props.customViewCaption ?? "Custom";
+    const visibleSet = new Set<number>();
     const dayProps = [
         { prop: props.showSunday, day: 0 },
         { prop: props.showMonday, day: 1 },
@@ -158,16 +158,9 @@ export function extractCalendarProps(props: CalendarContainerProps): DragAndDrop
         return { title, start, end, allDay, color, item };
     });
 
-    // Update button label inside localizer messages
-    (localizer as any).messages = {
-        ...localizer.messages,
-        work_week: customCaption
-    };
-
-    const viewsOption: ViewsProps<CalEvent, object> =
-        props.view === "standard"
-            ? { day: true, week: true, month: true }
-            : { day: true, week: true, month: true, work_week: CustomWeek, agenda: true };
+    const viewsOption: ViewsProps<CalEvent, object> = isCustomView
+        ? { day: true, week: true, month: true, work_week: CustomWeek, agenda: true }
+        : { day: true, week: true, month: true };
 
     // Compute minimum and maximum times for the day based on configured hours
     const minTime = new Date();
@@ -222,7 +215,7 @@ export function extractCalendarProps(props: CalendarContainerProps): DragAndDrop
         components: {
             toolbar: CustomToolbar
         },
-        defaultView: props.defaultView,
+        defaultView,
         messages: {
             work_week: customCaption
         },

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

@@ -12,7 +12,9 @@ export type ViewEnum = "standard" | "custom";
 
 export type EditableEnum = "default" | "never";
 
-export type DefaultViewEnum = "day" | "week" | "month" | "work_week" | "agenda";
+export type DefaultViewCustomEnum = "day" | "week" | "month" | "work_week" | "agenda";
+
+export type DefaultViewStandardEnum = "day" | "week" | "month";
 
 export type WidthUnitEnum = "pixels" | "percentage";
 
@@ -40,7 +42,8 @@ export interface CalendarContainerProps {
     view: ViewEnum;
     editable: EditableEnum;
     enableCreate: boolean;
-    defaultView: DefaultViewEnum;
+    defaultViewCustom: DefaultViewCustomEnum;
+    defaultViewStandard: DefaultViewStandardEnum;
     startDateAttribute?: EditableValue<Date>;
     minHour: number;
     maxHour: number;
@@ -91,7 +94,8 @@ export interface CalendarPreviewProps {
     view: ViewEnum;
     editable: EditableEnum;
     enableCreate: boolean;
-    defaultView: DefaultViewEnum;
+    defaultViewCustom: DefaultViewCustomEnum;
+    defaultViewStandard: DefaultViewStandardEnum;
     startDateAttribute: string;
     minHour: number | null;
     maxHour: number | null;