[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

@@ -1,4 +1,4 @@
-import { ReactElement, useMemo } from "react";
+import { Fragment, ReactElement, useMemo } from "react";
 import classNames from "classnames";
 import { CalendarContainerProps } from "../typings/CalendarProps";
 import { CalendarPropsBuilder } from "./helpers/CalendarPropsBuilder";
@@ -26,9 +26,16 @@ export default function MxCalendar(props: CalendarContainerProps): ReactElement
     }, [props, calendarController, localizer, culture]);
 
     const calendarEvents = useCalendarEvents(props);
+
     return (
-        <div className={classNames("widget-calendar", props.class)} style={wrapperStyle}>
-            <DnDCalendar {...calendarProps} {...calendarEvents} />
-        </div>
+        <Fragment>
+            {props.startDateAttribute && props.startDateAttribute.status !== "available" ? (
+                <div className="widget-calendar-loading-bar" />
+            ) : (
+                <div className={classNames("widget-calendar", props.class)} style={wrapperStyle}>
+                    <DnDCalendar {...calendarProps} {...calendarEvents} />
+                </div>
+            )}
+        </Fragment>
     );
 }

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

@@ -62,13 +62,6 @@
                         <attributeType name="String" />
                     </attributeTypes>
                 </property>
-                <property key="startDateAttribute" type="attribute" dataSource="databaseDataSource" required="false">
-                    <caption>Start date attribute</caption>
-                    <description>The start date that should be shown in the view</description>
-                    <attributeTypes>
-                        <attributeType name="DateTime" />
-                    </attributeTypes>
-                </property>
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="View">
@@ -139,6 +132,13 @@
                     <caption>Time slots</caption>
                     <description>The number of slots per "section" in the time grid views. Adjust with step to change the default of 1 hour long groups, with 30 minute slots</description>
                 </property>
+                <property key="startDateAttribute" type="attribute" required="false">
+                    <caption>Start date attribute</caption>
+                    <description>The DateTime attribute used on initial load</description>
+                    <attributeTypes>
+                        <attributeType name="DateTime" />
+                    </attributeTypes>
+                </property>
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Custom view">

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/src/ui/Calendar.scss

@@ -1,4 +1,5 @@
 @use "sass:color";
+$brand-primary: #264ae5 !default;
 
 .widget-calendar {
     $cal-form-group-margin-bottom: 15px !default;
@@ -79,4 +80,75 @@
     .rbc-event {
         background-color: var(--brand-primary, $cal-brand-primary);
     }
+
+    &-loading-bar {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        background-color: var(--border-color-default, #ced0d3);
+        border: none;
+        border-radius: 2px;
+        color: var(--brand-primary, $brand-primary);
+        height: 4px;
+        width: 100%;
+
+        &::-webkit-progress-bar {
+            background-color: transparent;
+        }
+
+        &::-webkit-progress-value {
+            background-color: currentColor;
+            transition: all 0.2s;
+        }
+
+        &::-moz-progress-bar {
+            background-color: currentColor;
+            transition: all 0.2s;
+        }
+
+        &::-ms-fill {
+            border: none;
+            background-color: currentColor;
+            transition: all 0.2s;
+        }
+
+        &:indeterminate {
+            background-size: 200% 100%;
+            background-image: linear-gradient(
+                to right,
+                transparent 50%,
+                currentColor 50%,
+                currentColor 60%,
+                transparent 60%,
+                transparent 71.5%,
+                currentColor 71.5%,
+                currentColor 84%,
+                transparent 84%
+            );
+            animation: progress-linear 3s infinite linear;
+        }
+
+        &:indeterminate::-moz-progress-bar {
+            background-color: transparent;
+        }
+
+        &:indeterminate::-ms-fill {
+            animation-name: none;
+        }
+
+        @keyframes progress-linear {
+            0% {
+                background-size: 200% 100%;
+                background-position: left -31.25% top 0%;
+            }
+            50% {
+                background-size: 800% 100%;
+                background-position: left -49% top 0%;
+            }
+            100% {
+                background-size: 400% 100%;
+                background-position: left -102% top 0%;
+            }
+        }
+    }
 }

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,6 @@ export interface CalendarContainerProps {
     startAttribute?: ListAttributeValue<Date>;
     endAttribute?: ListAttributeValue<Date>;
     eventColor?: ListAttributeValue<string>;
-    startDateAttribute?: ListAttributeValue<Date>;
     editable: DynamicValue<boolean>;
     view: ViewEnum;
     defaultViewStandard: DefaultViewStandardEnum;
@@ -92,6 +91,7 @@ export interface CalendarContainerProps {
     showAllEvents: boolean;
     step: number;
     timeslots: number;
+    startDateAttribute?: EditableValue<Date>;
     toolbarItems: ToolbarItemsType[];
     customViewShowMonday: boolean;
     customViewShowTuesday: boolean;
@@ -134,7 +134,6 @@ export interface CalendarPreviewProps {
     startAttribute: string;
     endAttribute: string;
     eventColor: string;
-    startDateAttribute: string;
     editable: string;
     view: ViewEnum;
     defaultViewStandard: DefaultViewStandardEnum;
@@ -147,6 +146,7 @@ export interface CalendarPreviewProps {
     showAllEvents: boolean;
     step: number | null;
     timeslots: number | null;
+    startDateAttribute: string;
     toolbarItems: ToolbarItemsPreviewType[];
     customViewShowMonday: boolean;
     customViewShowTuesday: boolean;