feat(calendar-web): new props step and timeslots and fix for day/week/month view change

Author: StefanKellerSiemens

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

@@ -131,6 +131,14 @@
                     <caption>Show all events</caption>
                     <description>Auto-adjust calendar height to display all events without "more" links</description>
                 </property>
+                <property key="step" type="integer" defaultValue="60">
+                    <caption>Step</caption>
+                    <description>Determines the selectable time increments in week and day views</description>
+                </property>
+                <property key="timeslots" type="integer" defaultValue="2">
+                    <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>
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Custom view">

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

@@ -86,6 +86,8 @@ const customViewProps: CalendarContainerProps = {
     customViewShowFriday: true,
     customViewShowSaturday: false,
     showAllEvents: true,
+    step: 60,
+    timeslots: 2,
     toolbarItems: [],
     topBarDateFormat: undefined
 };

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

@@ -19,6 +19,8 @@ exports[`Calendar renders correctly with basic props 1`] = `
     formats="[object Object]"
     localizer="[object Object]"
     messages="[object Object]"
+    step="60"
+    timeslots="2"
     views="[object Object]"
   />
 </div>

packages/pluggableWidgets/calendar-web/src/helpers/CalendarPropsBuilder.ts

@@ -14,6 +14,8 @@ export class CalendarPropsBuilder {
     private minTime: Date;
     private maxTime: Date;
     private toolbarItems?: ResolvedToolbarItem[];
+    private step: number;
+    private timeSlots: number;
 
     constructor(private props: CalendarContainerProps) {
         this.isCustomView = props.view === "custom";
@@ -23,6 +25,8 @@ export class CalendarPropsBuilder {
         this.minTime = this.buildTime(props.minHour ?? 0);
         this.maxTime = this.buildTime(props.maxHour ?? 24);
         this.toolbarItems = this.buildToolbarItems();
+        this.step = props.step;
+        this.timeSlots = props.timeslots;
     }
 
     updateProps(props: CalendarContainerProps): void {
@@ -71,7 +75,9 @@ export class CalendarPropsBuilder {
             titleAccessor: (event: CalendarEvent) => event.title,
             showAllEvents: this.props.showAllEvents,
             min: this.minTime,
-            max: this.maxTime
+            max: this.maxTime,
+            step: this.step,
+            timeslots: this.timeSlots
         };
     }
 

packages/pluggableWidgets/calendar-web/src/helpers/useCalendarEvents.ts

@@ -1,12 +1,18 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { CalendarEvent, EventDropOrResize } from "../utils/typings";
 import { CalendarContainerProps } from "../../typings/CalendarProps";
-import { CalendarProps, NavigateAction } from "react-big-calendar";
+import { CalendarProps, NavigateAction, View } from "react-big-calendar";
 import { getViewRange } from "../utils/calendar-utils";
 
 type CalendarEventHandlers = Pick<
     CalendarProps<CalendarEvent>,
-    "onSelectEvent" | "onDoubleClickEvent" | "onKeyPressEvent" | "onSelectSlot" | "onNavigate" | "selected"
+    | "onSelectEvent"
+    | "onDoubleClickEvent"
+    | "onKeyPressEvent"
+    | "onSelectSlot"
+    | "onNavigate"
+    | "selected"
+    | "onRangeChange"
 > & {
     onEventDrop: (event: EventDropOrResize) => void;
     onEventResize: (event: EventDropOrResize) => void;
@@ -116,7 +122,7 @@ export function useCalendarEvents(props: CalendarContainerProps): CalendarEventH
         [onDragDropResize]
     );
 
-    const handleRangeChange = useCallback(
+    const handleNavigate = useCallback(
         (date: Date, view: string, _action: NavigateAction) => {
             const action = onViewRangeChange;
 
@@ -132,6 +138,24 @@ export function useCalendarEvents(props: CalendarContainerProps): CalendarEventH
         [onViewRangeChange]
     );
 
+    const handleRangeChange = useCallback(
+        (range: Date[] | { start: Date; end: Date }, view?: View) => {
+            const action = onViewRangeChange;
+
+            if (action?.canExecute) {
+                const start = Array.isArray(range) ? range[0] : range.start;
+                const end = Array.isArray(range) ? range[range.length - 1] : range.end;
+
+                action.execute({
+                    rangeStart: start,
+                    rangeEnd: end,
+                    currentView: view
+                });
+            }
+        },
+        [onViewRangeChange]
+    );
+
     useEffect(() => {
         /**
          * What Is This?
@@ -152,7 +176,8 @@ export function useCalendarEvents(props: CalendarContainerProps): CalendarEventH
         onSelectSlot: handleCreateEvent,
         onEventDrop: handleEventDropOrResize,
         onEventResize: handleEventDropOrResize,
-        onNavigate: handleRangeChange,
+        onNavigate: handleNavigate,
+        onRangeChange: handleRangeChange,
         selected
     };
 }

packages/pluggableWidgets/calendar-web/typings/CalendarProps.d.ts

@@ -90,6 +90,8 @@ export interface CalendarContainerProps {
     minHour: number;
     maxHour: number;
     showAllEvents: boolean;
+    step: number;
+    timeslots: number;
     toolbarItems: ToolbarItemsType[];
     customViewShowMonday: boolean;
     customViewShowTuesday: boolean;
@@ -143,6 +145,8 @@ export interface CalendarPreviewProps {
     minHour: number | null;
     maxHour: number | null;
     showAllEvents: boolean;
+    step: number | null;
+    timeslots: number | null;
     toolbarItems: ToolbarItemsPreviewType[];
     customViewShowMonday: boolean;
     customViewShowTuesday: boolean;