fix(calendar-web): update startDateAttribute to use EditableValue and handle null cases

Author: samuelreichert

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

@@ -8,7 +8,7 @@ import "./ui/Calendar.scss";
 import { useCalendarEvents } from "./helpers/useCalendarEvents";
 import { useLocalizer } from "./helpers/useLocalizer";
 
-export default function MxCalendar(props: CalendarContainerProps): ReactElement {
+export default function MxCalendar(props: CalendarContainerProps): ReactElement | null {
     // useMemo with empty dependency array is used
     // because style and calendar controller needs to be created only once
     // and not on every re-render
@@ -26,6 +26,11 @@ export default function MxCalendar(props: CalendarContainerProps): ReactElement
     }, [props, calendarController, localizer, culture]);
 
     const calendarEvents = useCalendarEvents(props);
+
+    if (props.startDateAttribute && props.startDateAttribute.status !== "available") {
+        return null;
+    }
+
     return (
         <div className={classNames("widget-calendar", props.class)} style={wrapperStyle}>
             <DnDCalendar {...calendarProps} {...calendarEvents} />

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

@@ -62,9 +62,9 @@
                         <attributeType name="String" />
                     </attributeTypes>
                 </property>
-                <property key="startDateAttribute" type="attribute" dataSource="databaseDataSource" required="false">
+                <property key="startDateAttribute" type="attribute" required="false">
                     <caption>Start date attribute</caption>
-                    <description>The start date that should be shown in the view</description>
+                    <description>The DateTime attribute used on initial load</description>
                     <attributeTypes>
                         <attributeType name="DateTime" />
                     </attributeTypes>

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

@@ -14,6 +14,7 @@ export class CalendarPropsBuilder {
     private minTime: Date;
     private maxTime: Date;
     private toolbarItems?: ResolvedToolbarItem[];
+    private defaultDate?: Date;
 
     constructor(private props: CalendarContainerProps) {
         this.isCustomView = props.view === "custom";
@@ -23,13 +24,15 @@ export class CalendarPropsBuilder {
         this.minTime = this.buildTime(props.minHour ?? 0);
         this.maxTime = this.buildTime(props.maxHour ?? 24);
         this.toolbarItems = this.buildToolbarItems();
+        this.defaultDate = props.startDateAttribute?.value;
     }
 
     updateProps(props: CalendarContainerProps): void {
         // Update the props object, skipping props that are static (on construction only)
         this.props = props;
         this.events = this.buildEvents(props.databaseDataSource?.items ?? []);
         this.toolbarItems = this.buildToolbarItems();
+        this.defaultDate = props.startDateAttribute?.value;
     }
 
     build(localizer: DateLocalizer, culture: string): DragAndDropCalendarProps<CalendarEvent> {
@@ -71,7 +74,8 @@ export class CalendarPropsBuilder {
             titleAccessor: (event: CalendarEvent) => event.title,
             showAllEvents: this.props.showAllEvents,
             min: this.minTime,
-            max: this.maxTime
+            max: this.maxTime,
+            ...(this.defaultDate ? { defaultDate: this.defaultDate } : {})
         };
     }
 

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

@@ -4,7 +4,7 @@
  * @author Mendix Widgets Framework Team
  */
 import { CSSProperties } from "react";
-import { ActionValue, DynamicValue, ListValue, Option, ListActionValue, ListAttributeValue, ListExpressionValue } from "mendix";
+import { ActionValue, DynamicValue, EditableValue, ListValue, Option, ListActionValue, ListAttributeValue, ListExpressionValue } from "mendix";
 
 export type TitleTypeEnum = "attribute" | "expression";
 
@@ -79,7 +79,7 @@ export interface CalendarContainerProps {
     startAttribute?: ListAttributeValue<Date>;
     endAttribute?: ListAttributeValue<Date>;
     eventColor?: ListAttributeValue<string>;
-    startDateAttribute?: ListAttributeValue<Date>;
+    startDateAttribute?: EditableValue<Date>;
     editable: DynamicValue<boolean>;
     view: ViewEnum;
     defaultViewStandard: DefaultViewStandardEnum;