feat(calendar-web): yearDayClickView to standart and custom

rahmanunver · rahmanunver · commit 7e50cafa324b · 2026-07-23T11:57:54.000+02:00
diff --git a/packages/pluggableWidgets/calendar-web/openspec/changes/add-calendar-year-view/proposal.md b/packages/pluggableWidgets/calendar-web/openspec/changes/add-calendar-year-view/proposal.md
@@ -27,7 +27,7 @@ Users need a year-at-a-glance view to see events across all 12 months simultaneo
 
 **Code Changes:**
 
-- **XML Configuration** (`Calendar.xml`): Add "year" enum value to `defaultViewStandard`, `defaultViewCustom`, and toolbar `itemType` properties; add top-level `yearDayClickView` enum (day/week/work_week/month/agenda) controlling the day-click target
+- **XML Configuration** (`Calendar.xml`): Add "year" enum value to `defaultViewStandard`, `defaultViewCustom`, and toolbar `itemType` properties; add per-mode day-click target enums `yearDayClickViewStandard` (day/week/month) and `yearDayClickViewCustom` (day/week/work_week/month/agenda), each shown only in its matching view mode via `Calendar.editorConfig.ts`
 - **Type Definitions** (`CalendarProps.d.ts`): Auto-generated types will include "year" in view enums
 - **View Registration** (`CalendarPropsBuilder.ts`): Update `buildVisibleViews()` to include year view component, update type unions
 - **Toolbar** (`Toolbar.tsx`): Add "year" to `ResolvedToolbarItem` type and render logic
diff --git a/packages/pluggableWidgets/calendar-web/openspec/changes/add-calendar-year-view/specs/calendar-year-view/spec.md b/packages/pluggableWidgets/calendar-web/openspec/changes/add-calendar-year-view/specs/calendar-year-view/spec.md
@@ -74,7 +74,12 @@ Days with events SHALL display a single dot indicator, regardless of the number
 
 ### Requirement: Day click navigates to the configured target view
 
-Clicking a day cell SHALL navigate the calendar to the author-configured day-click target view (via the `yearDayClickView` property) for the selected date, PROVIDED that target view is enabled. The target choices are day, week, work_week, month, and agenda; the default is day. If the configured target view is not among the calendar's enabled views, day-click SHALL be disabled: day cells are rendered as non-interactive (no button role, tab stop, click, or keyboard handler) while retaining their aria-label, and no navigation occurs.
+Clicking a day cell SHALL navigate the calendar to the author-configured day-click target view for the selected date, PROVIDED that target view is enabled. The target is configured per view mode via two properties, so the available choices always match the mode's available views:
+
+- **Standard mode** — `yearDayClickViewStandard`, choices: day, week, month (default day). All are always enabled in Standard mode, so the target is always honored.
+- **Custom mode** — `yearDayClickViewCustom`, choices: day, week, work_week, month, agenda (default day). Only honored if that view is enabled via a toolbar item.
+
+The builder collapses the mode-specific property into a single effective target early (mirroring `defaultView`), so downstream logic is mode-agnostic. If the configured target view is not among the calendar's enabled views (only reachable in Custom mode), day-click SHALL be disabled: day cells are rendered as non-interactive (no button role, tab stop, click, or keyboard handler) while retaining their aria-label, and no navigation occurs.
 
 #### Scenario: User clicks a day in the current month
 
diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts b/packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts
@@ -34,6 +34,7 @@ export function getProperties(values: CalendarPreviewProps, defaultProperties: P
     if (values.view === "standard") {
         hidePropertiesIn(defaultProperties, values, [
             "defaultViewCustom",
+            "yearDayClickViewCustom",
             "toolbarItems",
             "customViewShowMonday",
             "customViewShowTuesday",
@@ -44,7 +45,12 @@ export function getProperties(values: CalendarPreviewProps, defaultProperties: P
             "customViewShowSunday"
         ]);
     } else {
-        hidePropertiesIn(defaultProperties, values, ["defaultViewStandard", "topBarDateFormat", "timeFormat"]);
+        hidePropertiesIn(defaultProperties, values, [
+            "defaultViewStandard",
+            "yearDayClickViewStandard",
+            "topBarDateFormat",
+            "timeFormat"
+        ]);
     }
 
     values.toolbarItems?.forEach((item, index) => {
diff --git a/packages/pluggableWidgets/calendar-web/src/Calendar.xml b/packages/pluggableWidgets/calendar-web/src/Calendar.xml
@@ -101,9 +101,18 @@
                         <enumerationValue key="year">Year</enumerationValue>
                     </enumerationValues>
                 </property>
-                <property key="yearDayClickView" type="enumeration" defaultValue="day">
+                <property key="yearDayClickViewStandard" type="enumeration" defaultValue="day">
                     <caption>Year view: day click opens</caption>
-                    <description>Which view opens when a day is clicked in the Year view. Only applies if that view is enabled; otherwise clicking a day does nothing.</description>
+                    <description>Which view opens when a day is clicked in the Year view.</description>
+                    <enumerationValues>
+                        <enumerationValue key="day">Day</enumerationValue>
+                        <enumerationValue key="week">Week</enumerationValue>
+                        <enumerationValue key="month">Month</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="yearDayClickViewCustom" type="enumeration" defaultValue="day">
+                    <caption>Year view: day click opens</caption>
+                    <description>Which view opens when a day is clicked in the Year view. Only applies if that view is enabled via a toolbar item; otherwise clicking a day does nothing.</description>
                     <enumerationValues>
                         <enumerationValue key="day">Day</enumerationValue>
                         <enumerationValue key="week">Week</enumerationValue>
diff --git a/packages/pluggableWidgets/calendar-web/src/__tests__/Calendar.spec.tsx b/packages/pluggableWidgets/calendar-web/src/__tests__/Calendar.spec.tsx
@@ -72,7 +72,8 @@ const customViewProps: CalendarContainerProps = {
     view: "custom",
     defaultViewStandard: "month",
     defaultViewCustom: "work_week",
-    yearDayClickView: "day",
+    yearDayClickViewStandard: "day",
+    yearDayClickViewCustom: "day",
     editable: dynamic.available(true),
     showEventDate: dynamic.available(true),
     widthUnit: "percentage",
@@ -259,11 +260,11 @@ describe("CalendarPropsBuilder validation", () => {
 
     const buildWithToolbarItems = (
         itemTypes: string[],
-        yearDayClickView: CalendarContainerProps["yearDayClickView"] = "day"
+        yearDayClickView: CalendarContainerProps["yearDayClickViewCustom"] = "day"
     ): ReturnType<typeof CalendarPropsBuilder.prototype.build> => {
         const props = {
             ...customViewProps,
-            yearDayClickView,
+            yearDayClickViewCustom: yearDayClickView,
             toolbarItems: itemTypes.map(itemType => ({
                 itemType,
                 position: "right",
@@ -300,4 +301,19 @@ describe("CalendarPropsBuilder validation", () => {
         const views = buildWithToolbarItems(["year", "week"], "month").views as Record<string, unknown>;
         expect(views.month).toBe(false);
     });
+
+    const buildStandard = (
+        yearDayClickViewStandard: CalendarContainerProps["yearDayClickViewStandard"]
+    ): ReturnType<typeof CalendarPropsBuilder.prototype.build> => {
+        const props = { ...customViewProps, view: "standard", yearDayClickViewStandard } as any;
+        return new CalendarPropsBuilder(props).build(mockLocalizer, "en");
+    };
+
+    it("resolves the standard-mode day-click view against the fixed day/week/month set", () => {
+        // Standard mode always enables day/week/month/year, so a standard target of "month"
+        // is honored: month is a registered view and the year view is available to drill from.
+        const views = buildStandard("month").views as Record<string, unknown>;
+        expect(views.month).toBe(true);
+        expect(views.year).toBeTruthy();
+    });
 });
diff --git a/packages/pluggableWidgets/calendar-web/src/helpers/CalendarPropsBuilder.ts b/packages/pluggableWidgets/calendar-web/src/helpers/CalendarPropsBuilder.ts
@@ -2,15 +2,15 @@ import { ObjectItem } from "mendix";
 import { DateLocalizer, Formats, ViewsProps } from "react-big-calendar";
 import { CustomWeekController } from "./CustomWeekController";
 import { YearViewController } from "./YearViewController";
-import { CalendarContainerProps, YearDayClickViewEnum } from "../../typings/CalendarProps";
+import { CalendarContainerProps, YearDayClickViewCustomEnum } from "../../typings/CalendarProps";
 import { createConfigurableToolbar, CustomToolbar, ResolvedToolbarItem } from "../components/Toolbar";
 import { eventPropGetter, getTextValue } from "../utils/calendar-utils";
 import { CalendarEvent, DragAndDropCalendarProps } from "../utils/typings";
 
 export class CalendarPropsBuilder {
     private visibleDays: Set<number>;
     private defaultView: "month" | "week" | "work_week" | "day" | "agenda" | "year";
-    private yearDayClickView: YearDayClickViewEnum;
+    private yearDayClickView: YearDayClickViewCustomEnum;
     private isCustomView: boolean;
     private events: CalendarEvent[];
     private minTime: Date;
@@ -23,7 +23,9 @@ export class CalendarPropsBuilder {
     constructor(private props: CalendarContainerProps) {
         this.isCustomView = props.view === "custom";
         this.defaultView = this.isCustomView ? props.defaultViewCustom : props.defaultViewStandard;
-        this.yearDayClickView = props.yearDayClickView;
+        // Collapse the mode-specific day-click view into one field early, mirroring how
+        // `defaultView` is chosen above — the rest of the builder stays mode-agnostic.
+        this.yearDayClickView = this.isCustomView ? props.yearDayClickViewCustom : props.yearDayClickViewStandard;
         this.visibleDays = this.buildVisibleDays();
         this.events = this.buildEvents(props.databaseDataSource?.items ?? []);
         this.minTime = this.buildTime(props.minHour ?? 0);
diff --git a/packages/pluggableWidgets/calendar-web/typings/CalendarProps.d.ts b/packages/pluggableWidgets/calendar-web/typings/CalendarProps.d.ts
@@ -14,7 +14,9 @@ export type DefaultViewStandardEnum = "day" | "week" | "month" | "year";
 
 export type DefaultViewCustomEnum = "day" | "week" | "month" | "work_week" | "agenda" | "year";
 
-export type YearDayClickViewEnum = "day" | "week" | "work_week" | "month" | "agenda";
+export type YearDayClickViewStandardEnum = "day" | "week" | "month";
+
+export type YearDayClickViewCustomEnum = "day" | "week" | "work_week" | "month" | "agenda";
 
 export type ItemTypeEnum = "day" | "month" | "agenda" | "week" | "work_week" | "year" | "title" | "previous" | "next" | "today";
 
@@ -85,7 +87,8 @@ export interface CalendarContainerProps {
     view: ViewEnum;
     defaultViewStandard: DefaultViewStandardEnum;
     defaultViewCustom: DefaultViewCustomEnum;
-    yearDayClickView: YearDayClickViewEnum;
+    yearDayClickViewStandard: YearDayClickViewStandardEnum;
+    yearDayClickViewCustom: YearDayClickViewCustomEnum;
     showEventDate: DynamicValue<boolean>;
     timeFormat?: DynamicValue<string>;
     topBarDateFormat?: DynamicValue<string>;
@@ -141,7 +144,8 @@ export interface CalendarPreviewProps {
     view: ViewEnum;
     defaultViewStandard: DefaultViewStandardEnum;
     defaultViewCustom: DefaultViewCustomEnum;
-    yearDayClickView: YearDayClickViewEnum;
+    yearDayClickViewStandard: YearDayClickViewStandardEnum;
+    yearDayClickViewCustom: YearDayClickViewCustomEnum;
     showEventDate: string;
     timeFormat: string;
     topBarDateFormat: string;
