[WC-3208]: Calendar module Start Date Attribute implementation (#2108)

Author: samuelreichert

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?.status === "loading" ? (
+                <progress 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/__tests__/Calendar.spec.tsx

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { dynamic, ListValueBuilder } from "@mendix/widget-plugin-test-utils";
 
 import MxCalendar from "../Calendar";
@@ -10,37 +10,39 @@ jest.mock("react-big-calendar", () => {
     const originalModule = jest.requireActual("react-big-calendar");
     return {
         ...originalModule,
-        Calendar: ({
-            children,
-            defaultView,
-            culture,
-            resizable,
-            selectable,
-            showAllEvents,
-            min,
-            max,
-            events,
-            step,
-            timeslots,
-            ...domProps
-        }: any) => (
-            <div
-                data-testid="mock-calendar"
-                data-default-view={defaultView}
-                data-culture={culture}
-                data-resizable={resizable}
-                data-selectable={selectable}
-                data-show-all-events={showAllEvents}
-                data-min={min?.toISOString()}
-                data-max={max?.toISOString()}
-                data-events-count={events?.length ?? 0}
-                data-step={step}
-                data-timeslots={timeslots}
-                {...domProps}
-            >
-                {children}
-            </div>
-        ),
+        Calendar: (mockProps: any) => {
+            const {
+                children,
+                defaultView,
+                defaultDate,
+                culture,
+                resizable,
+                selectable,
+                showAllEvents,
+                events,
+                step,
+                timeslots,
+                ...domProps
+            } = mockProps;
+
+            return (
+                <div
+                    data-testid="mock-calendar"
+                    data-default-view={defaultView}
+                    data-default-date={defaultDate?.toISOString()}
+                    data-culture={culture}
+                    data-resizable={resizable}
+                    data-selectable={selectable}
+                    data-show-all-events={showAllEvents}
+                    data-events-count={events?.length ?? 0}
+                    data-step={step}
+                    data-timeslots={timeslots}
+                    {...domProps}
+                >
+                    {children}
+                </div>
+            );
+        },
         dateFnsLocalizer: () => ({
             format: jest.fn(),
             parse: jest.fn(),
@@ -58,7 +60,7 @@ jest.mock("react-big-calendar", () => {
 });
 
 jest.mock("react-big-calendar/lib/addons/dragAndDrop", () => {
-    return jest.fn((Component: any) => Component);
+    return jest.fn(Component => Component);
 });
 
 const customViewProps: CalendarContainerProps = {
@@ -97,11 +99,6 @@ const customViewProps: CalendarContainerProps = {
     topBarDateFormat: undefined
 };
 
-const standardViewProps: CalendarContainerProps = {
-    ...customViewProps,
-    view: "standard"
-};
-
 beforeAll(() => {
     jest.useFakeTimers();
     jest.setSystemTime(new Date("2025-04-28T12:00:00Z"));
@@ -123,19 +120,78 @@ describe("Calendar", () => {
         expect(container.querySelector(".calendar-class")).toBeTruthy();
     });
 
-    it("does not render custom view button in standard view", () => {
-        const { container } = render(<MxCalendar {...standardViewProps} />);
-        expect(container).toBeTruthy();
-        // Since we're mocking the calendar, we can't test for specific text content
-        // but we can verify the component renders without errors
-    });
-
     it("passes step and timeslots to the calendar", () => {
         const { getByTestId } = render(<MxCalendar {...customViewProps} />);
         const calendar = getByTestId("mock-calendar");
         expect(calendar.getAttribute("data-step")).toBe("60");
         expect(calendar.getAttribute("data-timeslots")).toBe("2");
     });
+
+    it("renders loading bar when startDateAttribute is loading", () => {
+        const props = {
+            ...customViewProps,
+            startDateAttribute: {
+                status: "loading"
+            } as any
+        };
+
+        const { container } = render(<MxCalendar {...props} />);
+
+        expect(container.querySelector(".widget-calendar-loading-bar")).toBeTruthy();
+        expect(container.querySelector("progress.widget-calendar-loading-bar")).toBeTruthy();
+        expect(screen.queryByTestId("mock-calendar")).toBeFalsy();
+    });
+
+    it("renders calendar when startDateAttribute is available", () => {
+        const props = {
+            ...customViewProps,
+            startDateAttribute: {
+                status: "available",
+                value: new Date("2025-05-01T00:00:00.000Z")
+            } as any
+        };
+
+        render(<MxCalendar {...props} />);
+
+        expect(screen.getByTestId("mock-calendar")).toBeTruthy();
+        expect(screen.queryByRole("progressbar")).toBeFalsy();
+    });
+
+    it("renders calendar when startDateAttribute is unavailable", () => {
+        const props = {
+            ...customViewProps,
+            startDateAttribute: {
+                status: "unavailable"
+            } as any
+        };
+
+        render(<MxCalendar {...props} />);
+
+        expect(screen.getByTestId("mock-calendar")).toBeTruthy();
+        expect(screen.queryByRole("progressbar")).toBeFalsy();
+    });
+
+    it("renders calendar when startDateAttribute is undefined", () => {
+        render(<MxCalendar {...customViewProps} startDateAttribute={undefined} />);
+
+        expect(screen.getByTestId("mock-calendar")).toBeTruthy();
+        expect(screen.queryByRole("progressbar")).toBeFalsy();
+    });
+
+    it("passes defaultDate from startDateAttribute value", () => {
+        const defaultDate = new Date("2025-06-10T08:30:00.000Z");
+        const props = {
+            ...customViewProps,
+            startDateAttribute: {
+                status: "available",
+                value: defaultDate
+            } as any
+        };
+
+        render(<MxCalendar {...props} />);
+
+        expect(screen.getByTestId("mock-calendar").getAttribute("data-default-date")).toBe("2025-06-10T08:30:00.000Z");
+    });
 });
 
 describe("CalendarPropsBuilder validation", () => {
@@ -147,7 +203,10 @@ describe("CalendarPropsBuilder validation", () => {
         messages: {}
     } as any;
 
-    const buildWithStepTimeslots = (step: number, timeslots: number) => {
+    const buildWithStepTimeslots = (
+        step: number,
+        timeslots: number
+    ): ReturnType<typeof CalendarPropsBuilder.prototype.build> => {
         const props = { ...customViewProps, step, timeslots };
         const builder = new CalendarPropsBuilder(props);
         return builder.build(mockLocalizer, "en");

packages/pluggableWidgets/calendar-web/src/__tests__/__snapshots__/Calendar.spec.tsx.snap

@@ -10,8 +10,6 @@ exports[`Calendar renders correctly with basic props 1`] = `
     data-culture="en-US"
     data-default-view="day"
     data-events-count="0"
-    data-max="2025-04-28T23:59:59.000Z"
-    data-min="2025-04-28T00:00:00.000Z"
     data-resizable="true"
     data-selectable="true"
     data-show-all-events="true"
@@ -20,7 +18,9 @@ exports[`Calendar renders correctly with basic props 1`] = `
     data-timeslots="2"
     formats="[object Object]"
     localizer="[object Object]"
+    max="Mon Apr 28 2025 23:59:59 GMT+0000 (Coordinated Universal Time)"
     messages="[object Object]"
+    min="Mon Apr 28 2025 00:00:00 GMT+0000 (Coordinated Universal Time)"
     views="[object Object]"
   />
 </div>

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%;
+            }
+        }
+    }
 }