@mantine/schedule 9.5.0 → 9.5.1-alpha.0

package/lib/components/YearView/YearViewMonth.d.ts

@@ -23,6 +23,8 @@ export interface YearViewMonthSettings {
     weekdayFormat?: DateLabelFormat;
     /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */
     weekendDays?: DayOfWeek[];
+    /** If set, weekend days are displayed. When `false`, weekend columns are hidden and the month grid shrinks. @default true */
+    withWeekendDays?: boolean;
     /** Props passed down to the week number button */
     getWeekNumberProps?: (weekStartDate: DateStringValue) => Record<string, any>;
     /** Props passed down to the day button */
@@ -59,4 +61,4 @@ export interface YearViewMonthProps extends YearViewMonthSettings {
         dayIndex: number;
     };
 }
-export declare function YearViewMonth({ month, getStyles, monthLabelFormat, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, getDayProps, onDayClick, onWeekNumberClick, onMonthClick, getWeekNumberProps, highlightToday, groupedEvents, mode, withOutsideDays, __getDayRef, __onDayKeyDown, firstDayIndex, }: YearViewMonthProps): import("react/jsx-runtime").JSX.Element;
+export declare function YearViewMonth({ month, getStyles, monthLabelFormat, withWeekNumbers, withWeekDays, locale, firstDayOfWeek, weekdayFormat, weekendDays, withWeekendDays, getDayProps, onDayClick, onWeekNumberClick, onMonthClick, getWeekNumberProps, highlightToday, groupedEvents, mode, withOutsideDays, __getDayRef, __onDayKeyDown, firstDayIndex, }: YearViewMonthProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/YearView/get-visible-week-days.d.ts

@@ -0,0 +1,19 @@
+import { DateStringValue, DayOfWeek } from '../../types';
+interface HiddenWeekendColumnsInput {
+    weekendDays: DayOfWeek[];
+    firstDayOfWeek: DayOfWeek;
+    withWeekendDays: boolean | undefined;
+}
+/**
+ * Returns indices of week columns (0-6, relative to `firstDayOfWeek`) that are
+ * hidden because they fall on a weekend day and `withWeekendDays` is `false`.
+ */
+export declare function getHiddenWeekendColumns({ weekendDays, firstDayOfWeek, withWeekendDays, }: HiddenWeekendColumnsInput): number[];
+interface VisibleWeekDaysInput {
+    week: DateStringValue[];
+    weekendDays: DayOfWeek[];
+    withWeekendDays: boolean | undefined;
+}
+/** Filters out weekend days from a week when `withWeekendDays` is `false` */
+export declare function getVisibleWeekDays({ week, weekendDays, withWeekendDays, }: VisibleWeekDaysInput): DateStringValue[];
+export {};

package/lib/hooks/use-day-grid-event-resize.d.ts

@@ -0,0 +1,35 @@
+import { DateStringValue, DateTimeStringValue, ScheduleEventData, ScheduleMode } from '../types';
+import { MonthResizeEdge } from '../utils/calculate-month-resize-dates/calculate-month-resize-dates';
+export interface UseDayGridEventResizeInput {
+    enabled?: boolean;
+    mode?: ScheduleMode;
+    onEventResize?: (data: {
+        eventId: string | number;
+        newStart: DateTimeStringValue;
+        newEnd: DateTimeStringValue;
+        event: ScheduleEventData;
+    }) => void;
+    canResizeEvent?: (event: ScheduleEventData) => boolean;
+}
+export interface DayGridResizeStartInput {
+    event: ScheduleEventData;
+    edge: MonthResizeEdge;
+    cells: (HTMLElement | null)[];
+    days: DateStringValue[];
+    pointerEvent: React.PointerEvent;
+}
+/**
+ * Resizes an event by dragging its start or end edge across a strip of day cells.
+ * The target day is resolved by hit-testing `cells` with the pointer position, so
+ * the hook works for any layout that renders one element per day in a single row.
+ */
+export declare function useDayGridEventResize({ enabled, mode, onEventResize, canResizeEvent, }: UseDayGridEventResizeInput): {
+    handleResizeStart: ({ event, edge, cells, days, pointerEvent }: DayGridResizeStartInput) => void;
+    isResizing: boolean;
+    resizingEventId: string | number | null;
+    resizingEdge: MonthResizeEdge | null;
+    previewStart: string | null;
+    previewEnd: string | null;
+    isResizableEvent: (event: ScheduleEventData) => boolean;
+    wasResizing: () => boolean;
+};

package/lib/utils/calculate-month-resize-dates/calculate-month-resize-dates.d.ts

@@ -0,0 +1,17 @@
+import { DateStringValue, DateTimeStringValue, ScheduleEventData } from '../../types';
+export type MonthResizeEdge = 'start' | 'end';
+export interface CalculateMonthResizeDatesInput {
+    /** The event being resized */
+    event: ScheduleEventData;
+    /** Edge of the event that is being dragged */
+    edge: MonthResizeEdge;
+    /** The day on which the dragged edge was released */
+    targetDay: DateStringValue;
+}
+export interface CalculateMonthResizeDatesResult {
+    /** New start date for the event */
+    start: DateTimeStringValue;
+    /** New end date for the event */
+    end: DateTimeStringValue;
+}
+export declare function calculateMonthResizeDates({ event, edge, targetDay, }: CalculateMonthResizeDatesInput): CalculateMonthResizeDatesResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/schedule",
-  "version": "9.5.0",
+  "version": "9.5.1-alpha.0",
   "description": "Schedule Mantine component",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,9 +35,9 @@
     "directory": "packages/@mantine/schedule"
   },
   "peerDependencies": {
-    "@mantine/core": "9.5.0",
-    "@mantine/dates": "9.5.0",
-    "@mantine/hooks": "9.5.0",
+    "@mantine/core": "9.5.1-alpha.0",
+    "@mantine/dates": "9.5.1-alpha.0",
+    "@mantine/hooks": "9.5.1-alpha.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

package/styles.css

@@ -1922,6 +1922,7 @@
 .m_7301354d {
   --year-view-radius: var(--schedule-radius, var(--mantine-radius-default));
   --year-view-font-size: var(--mantine-font-size-sm);
+  --year-view-columns: 7;
   container-type: inline-size;
 }
 
@@ -2087,7 +2088,8 @@
   }
 
 .m_e33cb11b {
-  flex: 0 0 calc(100% / 7 - var(--week-numbers-offset) / 7);
+  flex: 0 0
+    calc(100% / var(--year-view-columns) - var(--week-numbers-offset) / var(--year-view-columns));
   height: calc(2.25rem * var(--mantine-scale));
   font-size: var(--year-view-font-size);
   font-weight: var(--mantine-font-weight-medium);
@@ -2114,7 +2116,8 @@
 }
 
 .m_399ab70f {
-  flex: 0 0 calc(100% / 7 - var(--week-numbers-offset) / 7);
+  flex: 0 0
+    calc(100% / var(--year-view-columns) - var(--week-numbers-offset) / var(--year-view-columns));
   padding: calc(0.25rem * var(--mantine-scale));
   font-size: var(--year-view-font-size);
   color: var(--day-base-color);
@@ -3461,6 +3464,64 @@
   pointer-events: none;
 }
 
+.m_4a182c06:hover .m_4dcd6369 {
+    opacity: 0.5;
+  }
+
+.m_4a182c06 .m_4dcd6369:hover {
+    opacity: 0.8;
+  }
+
+.m_4a182c06:where([data-resizing]) .m_4dcd6369:where([data-active]) {
+    opacity: 0.8;
+  }
+
+.m_4a182c06:where([data-resizing]) .m_4dcd6369:not([data-active]) {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+.m_4dcd6369 {
+  position: absolute;
+  top: 20%;
+  width: calc(0.25rem * var(--mantine-scale));
+  height: 60%;
+  cursor: ew-resize;
+  z-index: 5;
+  border-radius: calc(0.125rem * var(--mantine-scale));
+  opacity: 0;
+  transition: opacity 100ms ease;
+  pointer-events: all;
+  touch-action: none;
+  background-color: var(--event-color);
+}
+
+.m_4dcd6369::before {
+    content: '';
+    position: absolute;
+    inset: calc(-0.25rem * var(--mantine-scale)) calc(-0.375rem * var(--mantine-scale));
+  }
+
+.m_4dcd6369:where([data-edge='start']) {
+    inset-inline-start: calc(-0.125rem * var(--mantine-scale));
+  }
+
+.m_4dcd6369:where([data-edge='end']) {
+    inset-inline-end: calc(-0.125rem * var(--mantine-scale));
+  }
+
+.m_652b3acd:where([data-resizing]) * {
+    cursor: ew-resize !important;
+  }
+
+.m_652b3acd:where([data-resizing]) .m_4a182c06:not([data-resizing]) {
+    pointer-events: none;
+  }
+
+.m_652b3acd:where([data-resizing]) .m_4a182c06:not([data-resizing]) .m_4dcd6369 {
+      opacity: 0;
+    }
+
 .m_428e1853 {
   height: 100%;
 }

package/styles.layer.css

@@ -1922,6 +1922,7 @@
 .m_7301354d {
   --year-view-radius: var(--schedule-radius, var(--mantine-radius-default));
   --year-view-font-size: var(--mantine-font-size-sm);
+  --year-view-columns: 7;
   container-type: inline-size;
 }
 
@@ -2087,7 +2088,8 @@
   }
 
 .m_e33cb11b {
-  flex: 0 0 calc(100% / 7 - var(--week-numbers-offset) / 7);
+  flex: 0 0
+    calc(100% / var(--year-view-columns) - var(--week-numbers-offset) / var(--year-view-columns));
   height: calc(2.25rem * var(--mantine-scale));
   font-size: var(--year-view-font-size);
   font-weight: var(--mantine-font-weight-medium);
@@ -2114,7 +2116,8 @@
 }
 
 .m_399ab70f {
-  flex: 0 0 calc(100% / 7 - var(--week-numbers-offset) / 7);
+  flex: 0 0
+    calc(100% / var(--year-view-columns) - var(--week-numbers-offset) / var(--year-view-columns));
   padding: calc(0.25rem * var(--mantine-scale));
   font-size: var(--year-view-font-size);
   color: var(--day-base-color);
@@ -3461,6 +3464,64 @@
   pointer-events: none;
 }
 
+.m_4a182c06:hover .m_4dcd6369 {
+    opacity: 0.5;
+  }
+
+.m_4a182c06 .m_4dcd6369:hover {
+    opacity: 0.8;
+  }
+
+.m_4a182c06:where([data-resizing]) .m_4dcd6369:where([data-active]) {
+    opacity: 0.8;
+  }
+
+.m_4a182c06:where([data-resizing]) .m_4dcd6369:not([data-active]) {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+.m_4dcd6369 {
+  position: absolute;
+  top: 20%;
+  width: calc(0.25rem * var(--mantine-scale));
+  height: 60%;
+  cursor: ew-resize;
+  z-index: 5;
+  border-radius: calc(0.125rem * var(--mantine-scale));
+  opacity: 0;
+  transition: opacity 100ms ease;
+  pointer-events: all;
+  touch-action: none;
+  background-color: var(--event-color);
+}
+
+.m_4dcd6369::before {
+    content: '';
+    position: absolute;
+    inset: calc(-0.25rem * var(--mantine-scale)) calc(-0.375rem * var(--mantine-scale));
+  }
+
+.m_4dcd6369:where([data-edge='start']) {
+    inset-inline-start: calc(-0.125rem * var(--mantine-scale));
+  }
+
+.m_4dcd6369:where([data-edge='end']) {
+    inset-inline-end: calc(-0.125rem * var(--mantine-scale));
+  }
+
+.m_652b3acd:where([data-resizing]) * {
+    cursor: ew-resize !important;
+  }
+
+.m_652b3acd:where([data-resizing]) .m_4a182c06:not([data-resizing]) {
+    pointer-events: none;
+  }
+
+.m_652b3acd:where([data-resizing]) .m_4a182c06:not([data-resizing]) .m_4dcd6369 {
+      opacity: 0;
+    }
+
 .m_428e1853 {
   height: 100%;
 }