@mantine/schedule 9.4.0 → 9.4.2

package/lib/components/ResourcesDayView/ResourcesDayView.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, ScrollAreaProps, StylesApiProps } from '@mantine/core';
 import { ScheduleLabelsOverride } from '../../labels';
-import { DateLabelFormat, DateStringValue, DateTimeStringValue, ScheduleEventData, ScheduleMode, ScheduleResourceData, ScheduleResourceGroup, ScheduleViewLevel } from '../../types';
+import { AnyDateValue, DateLabelFormat, DateStringValue, DateTimeStringValue, ScheduleEventData, ScheduleMode, ScheduleResourceData, ScheduleResourceGroup, ScheduleViewLevel } from '../../types';
 import { MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents';
 import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
 import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
@@ -21,8 +21,10 @@ export interface ResourcesDayViewProps extends BoxProps, StylesApiProps<Resource
     startTime?: string;
     /** End time for the day view, in `HH:mm:ss` format @default 23:59:59 */
     endTime?: string;
-    /** Number of minutes for each interval in the day view @default 60 */
+    /** Number of minutes for each interval in the day view. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours (e.g. `120`, `240`) @default 60 */
     intervalMinutes?: number;
+    /** Minimum on-screen size of an event along the time axis, in px. Prevents very short events from collapsing. Larger values make brief events easier to see but extend them past their real start time. @default 1 */
+    minEventSize?: number;
     /** Dayjs format for slot labels or a callback function that returns formatted value @default HH:mm */
     slotLabelFormat?: DateLabelFormat;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */
@@ -37,6 +39,8 @@ export interface ResourcesDayViewProps extends BoxProps, StylesApiProps<Resource
     withCurrentTimeIndicator?: boolean;
     /** If set, the time indicator displays the current time in the bubble @default true */
     withCurrentTimeBubble?: boolean;
+    /** A function to get the current time, called on every tick. Can be used to display the current time indicator in a different timezone. @default () => dayjs() */
+    getCurrentTime?: () => AnyDateValue;
     /** If set, the header is displayed @default true */
     withHeader?: boolean;
     /** Called when view level select button is clicked */

package/lib/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.d.ts

@@ -5,6 +5,7 @@ interface GetResourcesDayViewEventsInput {
     date: AnyDateValue;
     startTime?: string;
     endTime?: string;
+    intervalMinutes?: number;
 }
 export interface ResourcesDayViewEventsResult {
     regularEvents: Record<string | number, DayPositionedEventData[]>;
@@ -12,5 +13,5 @@ export interface ResourcesDayViewEventsResult {
     backgroundTimedEvents: Record<string | number, DayPositionedEventData[]>;
     backgroundAllDayEvents: Record<string | number, DayPositionedEventData[]>;
 }
-export declare function getResourcesDayViewEvents({ events, resources, date, startTime, endTime, }: GetResourcesDayViewEventsInput): ResourcesDayViewEventsResult;
+export declare function getResourcesDayViewEvents({ events, resources, date, startTime, endTime, intervalMinutes, }: GetResourcesDayViewEventsInput): ResourcesDayViewEventsResult;
 export {};

package/lib/components/ResourcesWeekView/ResourcesWeekView.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, ScrollAreaProps, StylesApiProps } from '@mantine/core';
 import { ScheduleLabelsOverride } from '../../labels';
-import { DateLabelFormat, DateStringValue, DateTimeStringValue, DayOfWeek, ScheduleEventData, ScheduleMode, ScheduleResourceData, ScheduleResourceGroup, ScheduleViewLevel } from '../../types';
+import { AnyDateValue, DateLabelFormat, DateStringValue, DateTimeStringValue, DayOfWeek, ScheduleEventData, ScheduleMode, ScheduleResourceData, ScheduleResourceGroup, ScheduleViewLevel } from '../../types';
 import { MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents';
 import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
 import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
@@ -16,7 +16,10 @@ export interface ResourcesWeekViewProps extends BoxProps, StylesApiProps<Resourc
     resources: ScheduleResourceData[];
     startTime?: string;
     endTime?: string;
+    /** Number of minutes for each interval in the week view. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours (e.g. `120`, `240`) @default 60 */
     intervalMinutes?: number;
+    /** Minimum on-screen size of an event along the time axis, in px. Prevents very short events from collapsing. Larger values make brief events easier to see but extend them past their real start time. @default 1 */
+    minEventSize?: number;
     slotLabelFormat?: DateLabelFormat;
     radius?: MantineRadius;
     /** Date and time to scroll to on initial render, in `YYYY-MM-DD HH:mm:ss` format */
@@ -25,6 +28,8 @@ export interface ResourcesWeekViewProps extends BoxProps, StylesApiProps<Resourc
     locale?: string;
     withCurrentTimeIndicator?: boolean;
     withCurrentTimeBubble?: boolean;
+    /** A function to get the current time, called on every tick. Can be used to display the current time indicator in a different timezone. @default () => dayjs() */
+    getCurrentTime?: () => AnyDateValue;
     withHeader?: boolean;
     onViewChange?: (view: ScheduleViewLevel) => void;
     previousControlProps?: React.ComponentProps<'button'> & DataAttributes;
@@ -81,6 +86,17 @@ export interface ResourcesWeekViewProps extends BoxProps, StylesApiProps<Resourc
         dropDateTime: DateTimeStringValue;
         resourceId?: string | number;
     }) => void;
+    /** If true, events can be resized by dragging their left/right edges @default false */
+    withEventResize?: boolean;
+    /** Called when event is resized */
+    onEventResize?: (data: {
+        eventId: string | number;
+        newStart: DateTimeStringValue;
+        newEnd: DateTimeStringValue;
+        event: ScheduleEventData;
+    }) => void;
+    /** Function to determine if event can be resized */
+    canResizeEvent?: (event: ScheduleEventData) => boolean;
     recurrenceExpansionLimit?: number;
     /** Maximum number of events visible per time slot before "+more" indicator shows, minimum value is 1 @default 2 */
     maxEventsPerTimeSlot?: number;

package/lib/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.d.ts

@@ -23,7 +23,8 @@ interface GetResourcesWeekViewEventsInput {
     weekdays: string[];
     startTime?: string;
     endTime?: string;
+    intervalMinutes?: number;
     expansionLimit?: number;
 }
-export declare function getResourcesWeekViewEvents({ events, resources, weekdays, startTime, endTime, expansionLimit, }: GetResourcesWeekViewEventsInput): ResourcesWeekViewEventsResult;
+export declare function getResourcesWeekViewEvents({ events, resources, weekdays, startTime, endTime, intervalMinutes, expansionLimit, }: GetResourcesWeekViewEventsInput): ResourcesWeekViewEventsResult;
 export {};

package/lib/components/WeekView/WeekView.d.ts

@@ -21,7 +21,7 @@ export interface WeekViewProps extends BoxProps, StylesApiProps<WeekViewFactory>
     startTime?: string;
     /** End time for the day view, in `HH:mm:ss` format @default 23:59:59 */
     endTime?: string;
-    /** Number of minutes for each interval in the day view @default 60 */
+    /** Number of minutes for each interval in the day view. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours (e.g. `120`, `240`) @default 60 */
     intervalMinutes?: number;
     /** If set, grid lines are displayed for intervals smaller than one hour, for example 15 and 30 minutes intervals @default true */
     withSubHourGridLines?: boolean;

package/lib/hooks/use-horizontal-event-resize.d.ts

@@ -15,13 +15,15 @@ export interface UseHorizontalEventResizeInput {
     canResizeEvent?: (event: ScheduleEventData) => boolean;
 }
 export declare function useHorizontalEventResize({ enabled, mode, startTime, endTime, intervalMinutes, onEventResize, canResizeEvent, }: UseHorizontalEventResizeInput): {
-    handleResizeStart: ({ event, edge, container, originalLeft, originalWidth, eventDate, pointerEvent, }: {
+    handleResizeStart: ({ event, edge, container, originalLeft, originalWidth, eventDate, dayIndex, dayCount, pointerEvent, }: {
         event: ScheduleEventData;
         edge: ResizeEdge;
         container: HTMLElement;
         originalLeft: number;
         originalWidth: number;
         eventDate: string;
+        dayIndex?: number;
+        dayCount?: number;
         pointerEvent: React.PointerEvent;
     }) => void;
     isResizing: boolean;

package/lib/utils/clamp-interval-minutes/clamp-interval-minutes.d.ts

@@ -1,2 +1,11 @@
-/** Clamp interval minutes to valid values (1-60) and ensure it divides evenly into 60 */
+/**
+ * Clamps interval minutes to a value that keeps the time grid consistent:
+ *
+ * - Values of 60 or less must divide evenly into an hour (e.g. `15`, `20`, `30`, `60`).
+ * - Values above an hour must be a whole number of hours (e.g. `120`, `240`) so that slots
+ *   still start on hour boundaries.
+ *
+ * Values that don't satisfy these rules fall back to `60`. The result is capped to a single
+ * day (`1440`).
+ */
 export declare function clampIntervalMinutes(intervalMinutes: number): number;

package/lib/utils/get-day-relative-percent/get-day-relative-percent.d.ts

@@ -0,0 +1,15 @@
+interface GetDayRelativePercentInput {
+    clientX: number;
+    containerLeft: number;
+    containerWidth: number;
+    dayIndex: number;
+    dayCount: number;
+}
+/**
+ * Maps a horizontal pointer position to a percent (0-100) within a single day's
+ * sub-region of a container that holds `dayCount` equal-width days side by side.
+ * `dayIndex === 0` and `dayCount === 1` make it equivalent to a plain percent
+ * across the whole container. The result is clamped to the `[0, 100]` range.
+ */
+export declare function getDayRelativePercent({ clientX, containerLeft, containerWidth, dayIndex, dayCount, }: GetDayRelativePercentInput): number;
+export {};

package/lib/utils/get-time-axis-event-style/get-time-axis-event-style.d.ts

@@ -0,0 +1,26 @@
+export interface GetTimeAxisEventStyleInput {
+    /** Offset of the event's leading edge along the time axis, in percent */
+    start: number;
+    /** Span of the event along the time axis, in percent */
+    span: number;
+    /** Axis along which time flows @default 'horizontal' */
+    axis?: 'horizontal' | 'vertical';
+    /** Minimum visible size of the event along the time axis, in px. Prevents very short events from collapsing to zero. The minimum grows toward the trailing edge so the box never starts before the event's real start. @default 1 */
+    minSize?: number;
+}
+export interface HorizontalEventStyle {
+    left: string;
+    right: string;
+    minWidth: string;
+}
+export interface VerticalEventStyle {
+    top: string;
+    bottom: string;
+    minHeight: string;
+}
+export declare function getTimeAxisEventStyle(input: GetTimeAxisEventStyleInput & {
+    axis?: 'horizontal';
+}): HorizontalEventStyle;
+export declare function getTimeAxisEventStyle(input: GetTimeAxisEventStyleInput & {
+    axis: 'vertical';
+}): VerticalEventStyle;

package/lib/utils/index.d.ts

@@ -30,6 +30,7 @@ export { getMonthRange } from './get-month-range/get-month-range';
 export { parseTimeString } from './parse-time-string/parse-time-string';
 export { toTimeString } from './to-time-string/to-time-string';
 export { getDayPosition } from './get-day-position/get-day-position';
+export { getTimeAxisEventStyle } from './get-time-axis-event-style/get-time-axis-event-style';
 export { calculateDropTime } from './calculate-drop-time/calculate-drop-time';
 export { calculateMonthDropDate } from './calculate-month-drop-date/calculate-month-drop-date';
 export { getBusinessHoursMod } from './get-business-hours-mod/get-business-hours-mod';
@@ -45,3 +46,4 @@ export { handleResourcesGridKeyDown } from './handle-resources-grid-key-down/han
 export type { HandleResourcesGridKeyDownInput, ResourcesGridControlsRef, } from './handle-resources-grid-key-down/handle-resources-grid-key-down';
 export { getGroupToResourceIdMap } from './get-group-to-resource-id-map/get-group-to-resource-id-map';
 export { getIndexFromDragPoint } from './get-index-from-drag-point/get-index-from-drag-point';
+export { getDayRelativePercent } from './get-day-relative-percent/get-day-relative-percent';

package/package.json

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

package/styles.css

@@ -296,7 +296,7 @@
   background-color: var(--event-bg);
   color: var(--event-color);
   pointer-events: all;
-  border-radius: var(--event-radius);
+  border-radius: min(var(--event-radius), 50%);
   font-weight: var(--mantine-font-weight-medium);
   font-size: calc(0.75rem * var(--mantine-scale));
   line-height: 1;
@@ -333,6 +333,21 @@
   }
 }
 
+@container (max-width: 12px) {
+
+.m_71699dc6:where([data-auto-size]) {
+      padding-inline: 0
+  }
+    }
+
+@container (min-width: 16px) {
+
+.m_71699dc6:where([data-auto-size]) {
+      width: calc(100% - 2px);
+      margin-inline: auto
+  }
+    }
+
 @container (max-height: 18px) {
 
 .m_71699dc6:where([data-auto-size]) {

package/styles.layer.css

@@ -296,7 +296,7 @@
   background-color: var(--event-bg);
   color: var(--event-color);
   pointer-events: all;
-  border-radius: var(--event-radius);
+  border-radius: min(var(--event-radius), 50%);
   font-weight: var(--mantine-font-weight-medium);
   font-size: calc(0.75rem * var(--mantine-scale));
   line-height: 1;
@@ -333,6 +333,21 @@
   }
 }
 
+@container (max-width: 12px) {
+
+.m_71699dc6:where([data-auto-size]) {
+      padding-inline: 0
+  }
+    }
+
+@container (min-width: 16px) {
+
+.m_71699dc6:where([data-auto-size]) {
+      width: calc(100% - 2px);
+      margin-inline: auto
+  }
+    }
+
 @container (max-height: 18px) {
 
 .m_71699dc6:where([data-auto-size]) {