feat(calendar-web): add custom toolbar config, fix time format config, remove previous custom config

rahmanunver · rahmanunver · commit 476c3f4ba814 · 2025-09-11T16:50:56.000+02:00
diff --git a/packages/pluggableWidgets/calendar-web/CHANGELOG.md b/packages/pluggableWidgets/calendar-web/CHANGELOG.md
@@ -6,6 +6,22 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- You can now customize which controls appear in the calendar’s top bar and how they are arranged, with optional captions, tooltips, and a link-style appearance.
+
+- The calendar title can be formatted consistently across views, including custom work week.
+
+- Time formatting is applied consistently to the time gutter and to event/agenda time ranges, with robust fallbacks for invalid patterns.
+
+### Changed
+
+- When the event time range is disabled, events no longer display start/end time text.
+
+### Breaking changes
+
+- Custom view buttons and their captions are now set inside the Custom top bar views configuration.
+
 ## [2.0.0] - 2025-08-12
 
 ### Breaking changes
diff --git a/packages/pluggableWidgets/calendar-web/package.json b/packages/pluggableWidgets/calendar-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/calendar-web",
     "widgetName": "Calendar",
-    "version": "2.0.0",
+    "version": "2.2.0",
     "description": "Calendar",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",
diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts b/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts
@@ -10,26 +10,6 @@ import { CalendarPreviewProps } from "../typings/CalendarProps";
 import IconSVGDark from "./assets/StructureCalendarDark.svg";
 import IconSVG from "./assets/StructureCalendarLight.svg";
 
-const CUSTOM_VIEW_CONFIG: Array<keyof CalendarPreviewProps> = [
-    "customViewShowDay",
-    "customViewShowWeek",
-    "customViewShowMonth",
-    "customViewShowAgenda",
-    "customViewShowCustomWeek",
-    "customViewCaption",
-    "defaultViewCustom"
-];
-
-const CUSTOM_VIEW_DAYS_CONFIG: Array<keyof CalendarPreviewProps> = [
-    "customViewShowMonday",
-    "customViewShowTuesday",
-    "customViewShowWednesday",
-    "customViewShowThursday",
-    "customViewShowFriday",
-    "customViewShowSaturday",
-    "customViewShowSunday"
-];
-
 export function getProperties(values: CalendarPreviewProps, defaultProperties: Properties): Properties {
     if (values.heightUnit === "percentageOfWidth") {
         hidePropertyIn(defaultProperties, values, "height");
@@ -51,15 +31,11 @@ export function getProperties(values: CalendarPreviewProps, defaultProperties: P
         hidePropertiesIn(defaultProperties, values, ["maxHeight", "overflowY"]);
     }
 
-    // Hide custom week range properties when the view is set to 'standard'
+    // In custom view, legacy visible-day toggles are removed; only keep default view selection.
     if (values.view === "standard") {
-        hidePropertiesIn(defaultProperties, values, [...CUSTOM_VIEW_CONFIG, ...CUSTOM_VIEW_DAYS_CONFIG]);
+        hidePropertiesIn(defaultProperties, values, ["defaultViewCustom"]);
     } else {
         hidePropertyIn(defaultProperties, values, "defaultViewStandard");
-
-        if (values.customViewShowCustomWeek === false) {
-            hidePropertiesIn(defaultProperties, values, ["customViewCaption", ...CUSTOM_VIEW_DAYS_CONFIG]);
-        }
     }
 
     // Show/hide title properties based on selection
diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.editorPreview.tsx b/packages/pluggableWidgets/calendar-web/src/Calendar.editorPreview.tsx
@@ -2,7 +2,7 @@ import classnames from "classnames";
 import { createElement, ReactElement } from "react";
 import { Calendar, dateFnsLocalizer, EventPropGetter } from "react-big-calendar";
 import { CalendarPreviewProps } from "../typings/CalendarProps";
-import { CustomToolbar } from "./components/Toolbar";
+import { CustomToolbar, createConfigurableToolbar } from "./components/Toolbar";
 import { constructWrapperStyle, WrapperStyleProps } from "./utils/style-utils";
 import { eventPropGetter, format, getDay, parse, startOfWeek } from "./utils/calendar-utils";
 
@@ -75,10 +75,23 @@ export function preview(props: CalendarPreviewProps): ReactElement {
     // Cast eventPropGetter to satisfy preview Calendar generic
     const previewEventPropGetter = eventPropGetter as unknown as EventPropGetter<(typeof events)[0]>;
 
+    const toolbar =
+        props.view === "custom" && props.toolbarItems?.length
+            ? createConfigurableToolbar(
+                  props.toolbarItems.map(i => ({
+                      itemType: i.itemType,
+                      position: i.position,
+                      caption: i.caption,
+                      tooltip: i.tooltip,
+                      renderMode: i.renderMode
+                  })) as any
+              )
+            : CustomToolbar;
+
     return (
         <div className={classnames("widget-events-preview", "widget-calendar", className)} style={wrapperStyle}>
             <Calendar
-                components={{ toolbar: CustomToolbar }}
+                components={{ toolbar }}
                 defaultView={props.defaultViewStandard}
                 events={events}
                 localizer={localizer}
diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.tsx b/packages/pluggableWidgets/calendar-web/src/Calendar.tsx
@@ -8,12 +8,7 @@ import "./ui/Calendar.scss";
 import { useCalendarEvents } from "./helpers/useCalendarEvents";
 
 export default function MxCalendar(props: CalendarContainerProps): ReactElement {
-    // useMemo with empty dependency array is used
-    // because style and calendar controller needs to be created only once
-    // and not on every re-render
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const wrapperStyle = useMemo(() => constructWrapperStyle(props), []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     const calendarController = useMemo(() => new CalendarPropsBuilder(props), []);
     const calendarProps = useMemo(() => {
         calendarController.updateProps(props);
diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.xml b/packages/pluggableWidgets/calendar-web/src/Calendar.xml
@@ -115,6 +115,10 @@
                     <caption>Time format</caption>
                     <description>Default time format is "hh:mm a"</description>
                 </property>
+                <property key="topBarDateFormat" type="textTemplate" required="false">
+                    <caption>Top bar date format</caption>
+                    <description>Format used for the title in the toolbar across views. Defaults to a locale-aware format.</description>
+                </property>
                 <property key="minHour" type="integer" defaultValue="0">
                     <caption>Day start hour</caption>
                     <description>The hour at which the day view starts (0–23)</description>
@@ -130,34 +134,57 @@
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Custom view">
-            <propertyGroup caption="Visible views">
-                <property key="customViewShowDay" type="boolean" defaultValue="true">
-                    <caption>Day</caption>
-                    <description>Show day view in the toolbar</description>
-                </property>
-                <property key="customViewShowWeek" type="boolean" defaultValue="true">
-                    <caption>Week</caption>
-                    <description>Show week view in the toolbar</description>
-                </property>
-                <property key="customViewShowCustomWeek" type="boolean" defaultValue="false">
-                    <caption>Custom Work Week</caption>
-                    <description>Show custom week view in the toolbar</description>
-                </property>
-                <!-- Custom week caption -->
-                <property key="customViewCaption" type="textTemplate" required="false">
-                    <caption>Custom view caption</caption>
-                    <description>Label used for the custom work-week button and title. Defaults to "Custom".</description>
-                    <translations>
-                        <translation lang="en_US">Custom</translation>
-                    </translations>
-                </property>
-                <property key="customViewShowMonth" type="boolean" defaultValue="true">
-                    <caption>Month</caption>
-                    <description>Show month view in the toolbar</description>
-                </property>
-                <property key="customViewShowAgenda" type="boolean" defaultValue="false">
-                    <caption>Agenda</caption>
-                    <description>Show agenda view in the toolbar</description>
+            <propertyGroup caption="Toolbar">
+                <property key="toolbarItems" type="object" isList="true" required="false">
+                    <caption>Custom top bar views</caption>
+                    <description>Configure items displayed in the calendar toolbar.</description>
+                    <properties>
+                        <property key="itemType" type="enumeration" defaultValue="month">
+                            <caption>Item</caption>
+                            <category>Toolbar</category>
+                            <description>Select which item to render on the toolbar.</description>
+                            <enumerationValues>
+                                <enumerationValue key="previous">Previous button</enumerationValue>
+                                <enumerationValue key="today">Today button</enumerationValue>
+                                <enumerationValue key="next">Next button</enumerationValue>
+                                <enumerationValue key="title">Title date text</enumerationValue>
+                                <enumerationValue key="month">Month button</enumerationValue>
+                                <enumerationValue key="week">Week button</enumerationValue>
+                                <enumerationValue key="work_week">Work week button</enumerationValue>
+                                <enumerationValue key="day">Day button</enumerationValue>
+                                <enumerationValue key="agenda">Agenda button</enumerationValue>
+                            </enumerationValues>
+                        </property>
+                        <property key="position" type="enumeration" defaultValue="left">
+                            <caption>Position</caption>
+                            <category>Toolbar</category>
+                            <description>Align the item within the toolbar.</description>
+                            <enumerationValues>
+                                <enumerationValue key="left">Left</enumerationValue>
+                                <enumerationValue key="center">Center</enumerationValue>
+                                <enumerationValue key="right">Right</enumerationValue>
+                            </enumerationValues>
+                        </property>
+                        <property key="caption" type="textTemplate" required="false">
+                            <caption>Caption</caption>
+                            <category>Toolbar</category>
+                            <description>Optional text for the button or title. If empty, a default localized label is used.</description>
+                        </property>
+                        <property key="tooltip" type="textTemplate" required="false">
+                            <caption>Tooltip</caption>
+                            <category>Toolbar</category>
+                            <description>Optional hover text for the button.</description>
+                        </property>
+                        <property key="renderMode" type="enumeration" defaultValue="button">
+                            <caption>Render mode</caption>
+                            <category>Toolbar</category>
+                            <description>Choose how the item is rendered.</description>
+                            <enumerationValues>
+                                <enumerationValue key="button">Button</enumerationValue>
+                                <enumerationValue key="link">Link</enumerationValue>
+                            </enumerationValues>
+                        </property>
+                    </properties>
                 </property>
             </propertyGroup>
             <propertyGroup caption="Custom view visible days">
diff --git a/packages/pluggableWidgets/calendar-web/src/__tests__/Calendar.spec.tsx b/packages/pluggableWidgets/calendar-web/src/__tests__/Calendar.spec.tsx
@@ -65,11 +65,8 @@ const customViewProps: CalendarContainerProps = {
     customViewShowFriday: true,
     customViewShowSaturday: false,
     showAllEvents: true,
-    customViewShowDay: true,
-    customViewShowWeek: true,
-    customViewShowCustomWeek: false,
-    customViewShowMonth: true,
-    customViewShowAgenda: false
+    toolbarItems: [],
+    topBarDateFormat: undefined
 };
 
 const standardViewProps: CalendarContainerProps = {
diff --git a/packages/pluggableWidgets/calendar-web/src/components/Toolbar.tsx b/packages/pluggableWidgets/calendar-web/src/components/Toolbar.tsx
@@ -46,3 +46,113 @@ export function CustomToolbar({ label, localizer, onNavigate, onView, view, view
         </div>
     );
 }
+
+export type ResolvedToolbarItem = {
+    itemType: "previous" | "today" | "next" | "title" | "month" | "week" | "work_week" | "day" | "agenda";
+    position: "left" | "center" | "right";
+    caption?: string;
+    tooltip?: string;
+    renderMode: "button" | "link";
+};
+
+export function createConfigurableToolbar(items: ResolvedToolbarItem[]): (props: ToolbarProps) => ReactElement {
+    return function ConfigurableToolbar({ label, localizer, onNavigate, onView, view, views }: ToolbarProps) {
+        const renderButton = (
+            key: string,
+            content: ReactElement | string,
+            onClick: () => void,
+            active = false,
+            renderMode: "button" | "link" = "button",
+            tooltip?: string
+        ): ReactElement => (
+            <Button
+                key={key}
+                className={classNames("btn", renderMode === "link" ? "btn-link" : "btn-default", { active })}
+                onClick={onClick}
+                title={tooltip}
+            >
+                {content}
+            </Button>
+        );
+
+        const isViewEnabled = (name: View): boolean => {
+            return Array.isArray(views) ? (views as View[]).includes(name) : true;
+        };
+
+        const groups: Record<"left" | "center" | "right", ResolvedToolbarItem[]> = {
+            left: [],
+            center: [],
+            right: []
+        };
+        items.forEach(item => {
+            groups[item.position].push(item);
+        });
+
+        const renderItem = (item: ResolvedToolbarItem): ReactElement | null => {
+            switch (item.itemType) {
+                case "previous":
+                    return renderButton(
+                        "prev",
+                        <IconInternal icon={{ type: "glyph", iconClass: "glyphicon-backward" }} />,
+                        () => onNavigate(Navigate.PREVIOUS),
+                        false,
+                        item.renderMode,
+                        item.tooltip
+                    );
+                case "today":
+                    return renderButton(
+                        "today",
+                        (item.caption ?? localizer.messages.today) as unknown as ReactElement,
+                        () => onNavigate(Navigate.TODAY),
+                        false,
+                        item.renderMode,
+                        item.tooltip
+                    );
+                case "next":
+                    return renderButton(
+                        "next",
+                        <IconInternal icon={{ type: "glyph", iconClass: "glyphicon-forward" }} />,
+                        () => onNavigate(Navigate.NEXT),
+                        false,
+                        item.renderMode,
+                        item.tooltip
+                    );
+                case "title":
+                    return (
+                        <span key="title" className="calendar-label" title={item.tooltip}>
+                            {label}
+                        </span>
+                    );
+                case "month":
+                case "week":
+                case "work_week":
+                case "day":
+                case "agenda": {
+                    const name = item.itemType as View;
+                    if (!isViewEnabled(name)) {
+                        return null;
+                    }
+                    const caption = item.caption ?? localizer.messages[name];
+                    return renderButton(
+                        name,
+                        caption as unknown as ReactElement,
+                        () => onView(name),
+                        view === name,
+                        item.renderMode,
+                        item.tooltip
+                    );
+                }
+                default:
+                    return null;
+            }
+        };
+
+        return (
+            <div className="calendar-toolbar">
+                <div className="btn-group">{groups.left.map(renderItem)}</div>
+                <div className="btn-group">{groups.center.map(renderItem)}</div>
+                <div className="btn-group">{groups.right.map(renderItem)}</div>
+            </div>
+        );
+    };
+}
diff --git a/packages/pluggableWidgets/calendar-web/src/helpers/CalendarPropsBuilder.ts b/packages/pluggableWidgets/calendar-web/src/helpers/CalendarPropsBuilder.ts
diff --git a/packages/pluggableWidgets/calendar-web/src/helpers/CustomWeekController.ts b/packages/pluggableWidgets/calendar-web/src/helpers/CustomWeekController.ts
diff --git a/packages/pluggableWidgets/calendar-web/typings/CalendarProps.d.ts b/packages/pluggableWidgets/calendar-web/typings/CalendarProps.d.ts

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@mendix/calendar-web",`
`3`	`3`	`"widgetName": "Calendar",`
`4`		`- "version": "2.0.0",`
	`4`	`+ "version": "2.2.0",`
`5`	`5`	`"description": "Calendar",`
`6`	`6`	`"copyright": "© Mendix Technology BV 2025. All rights reserved.",`
`7`	`7`	`"license": "Apache-2.0",`