feat(week-view): add ability to customise document cursor when resizing events (#1613)

Co-authored-by: Magnus von Wachenfeldt <[email protected]>

Author: brutusmcforce

projects/angular-calendar/src/modules/day/calendar-day-view.component.ts

@@ -10,6 +10,7 @@ import { Subject } from 'rxjs';
 import { CalendarEventTimesChangedEvent } from '../common/calendar-event-times-changed-event.interface';
 import { PlacementArray } from 'positioning';
 import { CalendarWeekViewBeforeRenderEvent } from '../week/calendar-week.module';
+import { ResizeCursors } from 'angular-resizable-element';
 
 export type CalendarDayViewBeforeRenderEvent =
   CalendarWeekViewBeforeRenderEvent;
@@ -47,6 +48,7 @@ export type CalendarDayViewBeforeRenderEvent =
       [tooltipTemplate]="tooltipTemplate"
       [tooltipAppendToBody]="tooltipAppendToBody"
       [tooltipDelay]="tooltipDelay"
+      [resizeCursors]="resizeCursors"
       [hourSegmentTemplate]="hourSegmentTemplate"
       [eventTemplate]="eventTemplate"
       [eventTitleTemplate]="eventTitleTemplate"
@@ -193,6 +195,13 @@ export class CalendarDayViewComponent {
     event: CalendarEventTimesChangedEvent
   ) => boolean;
 
+  /**
+   * Customise the document cursor when dragging to resize an event
+   */
+  @Input() resizeCursors: Partial<
+    Pick<ResizeCursors, 'leftOrRight' | 'topOrBottom'>
+  >;
+
   /**
    * Called when an event title is clicked
    */

projects/angular-calendar/src/modules/week/calendar-week-view.component.ts

@@ -27,6 +27,7 @@ import {
   WeekViewAllDayEventRow,
 } from 'calendar-utils';
 import { ResizeEvent } from 'angular-resizable-element';
+import { ResizeCursors } from 'angular-resizable-element';
 import { CalendarDragHelper } from '../common/calendar-drag-helper.provider';
 import { CalendarResizeHelper } from '../common/calendar-resize-helper.provider';
 import {
@@ -141,6 +142,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
               rtl ? (100 / days.length) * allDayEvent.offset : null
             "
             mwlResizable
+            [resizeCursors]="resizeCursors"
             [resizeSnapGrid]="{ left: dayColumnWidth, right: dayColumnWidth }"
             [validateResize]="validateResize"
             (resizeStart)="
@@ -281,6 +283,7 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
                 [style.left.%]="timeEvent.left"
                 [style.width.%]="timeEvent.width"
                 mwlResizable
+                [resizeCursors]="resizeCursors"
                 [resizeSnapGrid]="{
                   left: dayColumnWidth,
                   right: dayColumnWidth,
@@ -592,6 +595,13 @@ export class CalendarWeekViewComponent
     event: CalendarEventTimesChangedEvent
   ) => boolean;
 
+  /**
+   * Customise the document cursor when dragging to resize an event
+   */
+  @Input() resizeCursors: Partial<
+    Pick<ResizeCursors, 'leftOrRight' | 'topOrBottom'>
+  >;
+
   /**
    * Called when a header week day is clicked. Adding a `cssClass` property on `$event.day` will add that class to the header element
    */