[WC-3208]: Calendar module Start Date Attribute implementation

packages/pluggableWidgets/calendar-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- Improved handling of the start date attribute to ensure correct calendar initialization.
+
 ## [2.3.0] - 2026-02-17
 
 ### Added

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

@@ -16,6 +16,7 @@ export class CalendarPropsBuilder {
     private toolbarItems?: ResolvedToolbarItem[];
     private step: number;
     private timeSlots: number;
+    private defaultDate?: Date;
 
     constructor(private props: CalendarContainerProps) {
         this.isCustomView = props.view === "custom";
@@ -36,13 +37,15 @@ export class CalendarPropsBuilder {
                 `[Calendar] timeslots value ${props.timeslots} was clamped to ${this.timeSlots}. Must be between 1 and 4.`
             );
         }
+        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> {
@@ -86,7 +89,8 @@ export class CalendarPropsBuilder {
             min: this.minTime,
             max: this.maxTime,
             step: this.step,
-            timeslots: this.timeSlots
+            timeslots: this.timeSlots,
+            ...(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;