diff --git a/packages/pluggableWidgets/calendar-web/CHANGELOG.md b/packages/pluggableWidgets/calendar-web/CHANGELOG.md
index 4bd6ccc4ac..a2538870ad 100644
--- a/packages/pluggableWidgets/calendar-web/CHANGELOG.md
+++ b/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
diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.tsx b/packages/pluggableWidgets/calendar-web/src/Calendar.tsx
index a7d8d31d52..1795c2ee41 100644
--- a/packages/pluggableWidgets/calendar-web/src/Calendar.tsx
+++ b/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 (
-
-
-
+
+ {props.startDateAttribute && props.startDateAttribute.status !== "available" ? (
+
+ ) : (
+
+
+
+ )}
+
);
}
diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.xml b/packages/pluggableWidgets/calendar-web/src/Calendar.xml
index 0af2436b56..25e9204adf 100644
--- a/packages/pluggableWidgets/calendar-web/src/Calendar.xml
+++ b/packages/pluggableWidgets/calendar-web/src/Calendar.xml
@@ -62,13 +62,6 @@
-
- Start date attribute
- The start date that should be shown in the view
-
-
-
-
@@ -139,6 +132,13 @@
Time slots
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
+
+ Start date attribute
+ The DateTime attribute used on initial load
+
+
+
+
diff --git a/packages/pluggableWidgets/calendar-web/src/helpers/CalendarPropsBuilder.ts b/packages/pluggableWidgets/calendar-web/src/helpers/CalendarPropsBuilder.ts
index 6d3c119b8e..d6176e11a6 100644
--- a/packages/pluggableWidgets/calendar-web/src/helpers/CalendarPropsBuilder.ts
+++ b/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,6 +37,7 @@ 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 {
@@ -43,6 +45,7 @@ export class CalendarPropsBuilder {
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 {
@@ -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 } : {})
};
}
diff --git a/packages/pluggableWidgets/calendar-web/src/ui/Calendar.scss b/packages/pluggableWidgets/calendar-web/src/ui/Calendar.scss
index d324b682cd..72181b73be 100644
--- a/packages/pluggableWidgets/calendar-web/src/ui/Calendar.scss
+++ b/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%;
+ }
+ }
+ }
}
diff --git a/packages/pluggableWidgets/calendar-web/typings/CalendarProps.d.ts b/packages/pluggableWidgets/calendar-web/typings/CalendarProps.d.ts
index b0a1628d5e..323b344cff 100644
--- a/packages/pluggableWidgets/calendar-web/typings/CalendarProps.d.ts
+++ b/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;
endAttribute?: ListAttributeValue;
eventColor?: ListAttributeValue;
- startDateAttribute?: ListAttributeValue;
editable: DynamicValue;
view: ViewEnum;
defaultViewStandard: DefaultViewStandardEnum;
@@ -92,6 +91,7 @@ export interface CalendarContainerProps {
showAllEvents: boolean;
step: number;
timeslots: number;
+ startDateAttribute?: EditableValue;
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;