[WC-2792]: Calendar actions & events (#1589)

Author: samuelreichert

package.json

@@ -38,7 +38,7 @@
             ]
         },
         "overrides": {
-            "@mendix/pluggable-widgets-tools": "10.18.2",
+            "@mendix/pluggable-widgets-tools": "10.21.0",
             "react": "^18.0.0",
             "react-dom": "^18.0.0",
             "prettier": "3.5.3",
@@ -55,7 +55,8 @@
             "json5@0.x": ">=1.0.2",
             "@codemirror/view": "^6.34.2",
             "enzyme>cheerio": "1.0.0-rc.10",
-            "ts-node": "10.9.2"
+            "ts-node": "10.9.2",
+            "react-big-calendar@1>clsx": "2.1.0"
         },
         "patchedDependencies": {
             "react-big-calendar@0.19.2": "patches/react-big-calendar@0.19.2.patch",

packages/pluggableWidgets/calendar-web/package.json

@@ -53,7 +53,7 @@
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",
         "@mendix/eslint-config-web-widgets": "workspace:*",
-        "@mendix/pluggable-widgets-tools": "10.16.0",
+        "@mendix/pluggable-widgets-tools": "*",
         "@mendix/prettier-config-web-widgets": "workspace:*",
         "@mendix/run-e2e": "workspace:^*",
         "@mendix/widget-plugin-component-kit": "workspace:*",

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

@@ -1,69 +1,17 @@
 import classnames from "classnames";
-import * as dateFns from "date-fns";
 import { ReactElement, createElement } from "react";
-import { Calendar, dateFnsLocalizer, ViewsProps } from "react-big-calendar";
-import "react-big-calendar/lib/css/react-big-calendar.css";
+import { DnDCalendar, extractCalendarProps } from "./utils/calendar-utils";
 import { CalendarContainerProps } from "../typings/CalendarProps";
 import { constructWrapperStyle } from "./utils/utils";
 
-const localizer = dateFnsLocalizer({
-    format: dateFns.format,
-    parse: dateFns.parse,
-    startOfWeek: dateFns.startOfWeek,
-    getDay: dateFns.getDay,
-    locales: {}
-});
-
-interface CalEvent {
-    title: string;
-    start: Date;
-    end: Date;
-    allDay: boolean;
-    color?: string;
-}
-
 export default function MxCalendar(props: CalendarContainerProps): ReactElement {
     const { class: className } = props;
     const wrapperStyle = constructWrapperStyle(props);
-
-    const items = props.databaseDataSource?.items ?? [];
-
-    const events: CalEvent[] = items.map(item => {
-        const title =
-            props.titleType === "attribute" && props.titleAttribute
-                ? (props.titleAttribute.get(item).value ?? "")
-                : props.titleType === "expression" && props.titleExpression
-                  ? String(props.titleExpression.get(item) ?? "")
-                  : "Untitled Event";
-
-        const start = props.startAttribute?.get(item).value ?? new Date();
-        const end = props.endAttribute?.get(item).value ?? start;
-        const allDay = props.allDayAttribute?.get(item).value ?? false;
-        const color = props.eventColor?.get(item).value;
-
-        return { title, start, end, allDay, color };
-    });
-
-    const viewsOption: ViewsProps<CalEvent, object> =
-        props.view === "standard" ? ["month", "week", "day"] : ["month", "week", "work_week", "day", "agenda"];
-
-    const eventPropGetter = (event: CalEvent) => ({
-        style: event.color ? { backgroundColor: event.color } : undefined
-    });
+    const calendarProps = extractCalendarProps(props);
 
     return (
         <div className={classnames("widget-calendar", className)} style={wrapperStyle}>
-            <Calendar<CalEvent>
-                localizer={localizer}
-                events={events}
-                defaultView={props.defaultView}
-                startAccessor={event => event.start}
-                endAccessor={event => event.end}
-                views={viewsOption}
-                titleAccessor={event => event.title}
-                allDayAccessor={event => event.allDay}
-                eventPropGetter={eventPropGetter}
-            />
+            <DnDCalendar {...calendarProps} />
         </div>
     );
 }

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

@@ -114,14 +114,40 @@
             <property key="onClickEvent" type="action" required="false">
                 <caption>On click action</caption>
                 <description />
+                <actionVariables>
+                    <actionVariable key="startDate" type="DateTime" caption="Event start date" />
+                    <actionVariable key="endDate" type="DateTime" caption="Event end date" />
+                    <actionVariable key="allDay" type="Boolean" caption="Event all day" />
+                    <actionVariable key="title" type="String" caption="Event title" />
+                </actionVariables>
             </property>
             <property key="onCreateEvent" type="action" required="false">
                 <caption>On create action</caption>
                 <description>The create event is triggered when a time slot is selected, and the 'Enable create' property is set to 'true'</description>
+                <actionVariables>
+                    <actionVariable key="startDate" type="DateTime" caption="New event start date" />
+                    <actionVariable key="endDate" type="DateTime" caption="New event end date" />
+                    <actionVariable key="allDay" type="Boolean" caption="All day flag" />
+                </actionVariables>
             </property>
             <property key="onChange" type="action" required="false">
                 <caption>On change action</caption>
                 <description>The change event is triggered on moving/dragging an item or changing the start or end time of by resizing an item</description>
+                <actionVariables>
+                    <actionVariable key="oldStart" type="DateTime" caption="Old start date" />
+                    <actionVariable key="oldEnd" type="DateTime" caption="Old end date" />
+                    <actionVariable key="newStart" type="DateTime" caption="New start date" />
+                    <actionVariable key="newEnd" type="DateTime" caption="New end date" />
+                </actionVariables>
+            </property>
+            <property key="onRangeChange" type="action" required="false">
+                <caption>On view range change</caption>
+                <description>Triggered when the calendar view range (start/end) changes</description>
+                <actionVariables>
+                    <actionVariable key="rangeStart" type="DateTime" caption="View range start" />
+                    <actionVariable key="rangeEnd" type="DateTime" caption="View range end" />
+                    <actionVariable key="currentView" type="String" caption="Current view" />
+                </actionVariables>
             </property>
         </propertyGroup>
         <propertyGroup caption="Dimensions">

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

@@ -10,7 +10,7 @@ exports[`Calendar renders correctly with basic props 1`] = `
         style="width: 100%; height: 400px;"
       >
         <div
-          class="rbc-calendar"
+          class="rbc-addons-dnd rbc-calendar"
         >
           <div
             class="rbc-toolbar"
@@ -256,6 +256,9 @@ exports[`Calendar renders correctly with basic props 1`] = `
                     </button>
                   </div>
                 </div>
+                <div
+                  class="rbc-addons-dnd-row-body"
+                />
               </div>
             </div>
             <div
@@ -372,6 +375,9 @@ exports[`Calendar renders correctly with basic props 1`] = `
                     </button>
                   </div>
                 </div>
+                <div
+                  class="rbc-addons-dnd-row-body"
+                />
               </div>
             </div>
             <div
@@ -488,6 +494,9 @@ exports[`Calendar renders correctly with basic props 1`] = `
                     </button>
                   </div>
                 </div>
+                <div
+                  class="rbc-addons-dnd-row-body"
+                />
               </div>
             </div>
             <div
@@ -604,6 +613,9 @@ exports[`Calendar renders correctly with basic props 1`] = `
                     </button>
                   </div>
                 </div>
+                <div
+                  class="rbc-addons-dnd-row-body"
+                />
               </div>
             </div>
             <div
@@ -720,6 +732,9 @@ exports[`Calendar renders correctly with basic props 1`] = `
                     </button>
                   </div>
                 </div>
+                <div
+                  class="rbc-addons-dnd-row-body"
+                />
               </div>
             </div>
           </div>
@@ -733,7 +748,7 @@ exports[`Calendar renders correctly with basic props 1`] = `
       style="width: 100%; height: 400px;"
     >
       <div
-        class="rbc-calendar"
+        class="rbc-addons-dnd rbc-calendar"
       >
         <div
           class="rbc-toolbar"
@@ -979,6 +994,9 @@ exports[`Calendar renders correctly with basic props 1`] = `
                   </button>
                 </div>
               </div>
+              <div
+                class="rbc-addons-dnd-row-body"
+              />
             </div>
           </div>
           <div
@@ -1095,6 +1113,9 @@ exports[`Calendar renders correctly with basic props 1`] = `
                   </button>
                 </div>
               </div>
+              <div
+                class="rbc-addons-dnd-row-body"
+              />
             </div>
           </div>
           <div
@@ -1211,6 +1232,9 @@ exports[`Calendar renders correctly with basic props 1`] = `
                   </button>
                 </div>
               </div>
+              <div
+                class="rbc-addons-dnd-row-body"
+              />
             </div>
           </div>
           <div
@@ -1327,6 +1351,9 @@ exports[`Calendar renders correctly with basic props 1`] = `
                   </button>
                 </div>
               </div>
+              <div
+                class="rbc-addons-dnd-row-body"
+              />
             </div>
           </div>
           <div
@@ -1443,6 +1470,9 @@ exports[`Calendar renders correctly with basic props 1`] = `
                   </button>
                 </div>
               </div>
+              <div
+                class="rbc-addons-dnd-row-body"
+              />
             </div>
           </div>
         </div>

packages/pluggableWidgets/calendar-web/src/utils/calendar-utils.ts

@@ -0,0 +1,130 @@
+import { Calendar, dateFnsLocalizer, ViewsProps } from "react-big-calendar";
+import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
+import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
+import "react-big-calendar/lib/css/react-big-calendar.css";
+
+import * as dateFns from "date-fns";
+import { CalendarContainerProps } from "../../typings/CalendarProps";
+
+// Define the event shape
+export interface CalEvent {
+    title: string;
+    start: Date;
+    end: Date;
+    allDay: boolean;
+    color?: string;
+}
+
+// Configure date-fns localizer
+const localizer = dateFnsLocalizer({
+    format: dateFns.format,
+    parse: dateFns.parse,
+    startOfWeek: dateFns.startOfWeek,
+    getDay: dateFns.getDay,
+    locales: {}
+});
+
+export const DnDCalendar = withDragAndDrop(Calendar);
+
+function getViewRange(view: string, date: Date) {
+    switch (view) {
+        case "month":
+            return { start: dateFns.startOfMonth(date), end: dateFns.endOfMonth(date) };
+        case "week":
+            return { start: dateFns.startOfWeek(date), end: dateFns.endOfWeek(date) };
+        case "work_week": {
+            const start = dateFns.startOfWeek(date);
+            return { start, end: dateFns.addDays(start, 4) };
+        }
+        case "day":
+            return { start: date, end: date };
+        default:
+            return { start: date, end: date };
+    }
+}
+
+export function extractCalendarProps(props: CalendarContainerProps) {
+    const items = props.databaseDataSource?.items ?? [];
+    const events: CalEvent[] = items.map(item => {
+        const title =
+            props.titleType === "attribute" && props.titleAttribute
+                ? (props.titleAttribute.get(item).value ?? "")
+                : props.titleType === "expression" && props.titleExpression
+                  ? String(props.titleExpression.get(item) ?? "")
+                  : "Untitled Event";
+        const start = props.startAttribute?.get(item).value ?? new Date();
+        const end = props.endAttribute?.get(item).value ?? start;
+        const allDay = props.allDayAttribute?.get(item).value ?? false;
+        const color = props.eventColor?.get(item).value;
+        return { title, start, end, allDay, color };
+    });
+
+    const viewsOption: ViewsProps<CalEvent, object> =
+        props.view === "standard" ? ["month", "week", "day"] : ["month", "week", "work_week", "day", "agenda"];
+
+    const eventPropGetter = (event: CalEvent) => ({
+        style: event.color ? { backgroundColor: event.color } : undefined
+    });
+
+    const handleSelectEvent = (event: CalEvent) => {
+        if (props.onClickEvent?.canExecute) {
+            props.onClickEvent.execute({
+                startDate: event.start,
+                endDate: event.end,
+                allDay: event.allDay,
+                title: event.title
+            });
+        }
+    };
+
+    const handleSelectSlot = (slotInfo: { start: Date; end: Date; action: string }) => {
+        if (props.enableCreate && props.onCreateEvent?.canExecute) {
+            props.onCreateEvent.execute({
+                startDate: slotInfo.start,
+                endDate: slotInfo.end,
+                allDay: slotInfo.action === "select"
+            });
+        }
+    };
+
+    const handleEventDropOrResize = ({ event, start, end }: { event: CalEvent; start: Date; end: Date }) => {
+        if (props.onChange?.canExecute) {
+            props.onChange.execute({
+                oldStart: event.start,
+                oldEnd: event.end,
+                newStart: start,
+                newEnd: end
+            });
+        }
+    };
+
+    const handleRangeChange = (date: Date, view: string) => {
+        if (props.onRangeChange?.canExecute) {
+            const { start, end } = getViewRange(view, date);
+            props.onRangeChange.execute({
+                rangeStart: start,
+                rangeEnd: end,
+                currentView: view
+            });
+        }
+    };
+
+    return {
+        localizer,
+        events,
+        defaultView: props.defaultView,
+        startAccessor: (event: unknown) => (event as CalEvent).start,
+        endAccessor: (event: unknown) => (event as CalEvent).end,
+        selectable: props.enableCreate,
+        resizable: props.editable !== "never",
+        onSelectEvent: handleSelectEvent,
+        onSelectSlot: handleSelectSlot,
+        onEventDrop: handleEventDropOrResize,
+        onEventResize: handleEventDropOrResize,
+        onNavigate: handleRangeChange,
+        views: viewsOption,
+        titleAccessor: (event: unknown) => (event as CalEvent).title,
+        allDayAccessor: (event: unknown) => (event as CalEvent).allDay,
+        eventPropGetter
+    };
+}