@mantine/schedule 9.3.2 → 9.4.1

package/lib/components/AgendaView/get-agenda-view-events.d.ts

@@ -0,0 +1,9 @@
+import { AnyDateValue, DateStringValue, ScheduleEventData } from '../../types';
+export type AgendaGroupedEvents = Record<DateStringValue, ScheduleEventData[]>;
+interface GetAgendaViewEventsInput {
+    rangeStart: AnyDateValue;
+    rangeEnd: AnyDateValue;
+    events: ScheduleEventData[] | undefined;
+}
+export declare function getAgendaViewEvents({ rangeStart, rangeEnd, events }: GetAgendaViewEventsInput): AgendaGroupedEvents;
+export {};

package/lib/components/AgendaView/index.d.ts

@@ -0,0 +1,2 @@
+export { AgendaView } from './AgendaView';
+export type { AgendaViewProps, AgendaViewFactory, AgendaViewStylesNames, AgendaViewCssVariables, } from './AgendaView';

package/lib/components/DayView/DayView.d.ts

@@ -1,13 +1,14 @@
 import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, ScrollAreaAutosizeProps, StylesApiProps } from '@mantine/core';
 import { ScheduleLabelsOverride } from '../../labels';
 import { AnyDateValue, DateLabelFormat, DateStringValue, DateTimeStringValue, ScheduleEventData, ScheduleMode, ScheduleViewLevel } from '../../types';
+import { AgendaViewStylesNames } from '../AgendaView/AgendaView';
 import { CurrentTimeIndicatorStylesNames } from '../CurrentTimeIndicator/CurrentTimeIndicator';
 import { MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents';
 import { RenderEvent, RenderEventBody, ScheduleEventStylesNames } from '../ScheduleEvent/ScheduleEvent';
 import { MonthYearSelectStylesNames } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect';
 import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
 import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';
-export type DayViewStylesNames = 'dayView' | 'dayViewInner' | 'dayViewScrollArea' | 'dayViewAllDay' | 'dayViewAllDayEvents' | 'dayViewSlot' | 'dayViewSlots' | 'dayViewTimeSlots' | 'dayViewSlotLabel' | 'dayViewSlotLabels' | 'dayViewBackgroundEvent' | MoreEventsStylesNames | ScheduleEventStylesNames | Exclude<CombinedScheduleHeaderStylesNames, MonthYearSelectStylesNames> | CurrentTimeIndicatorStylesNames;
+export type DayViewStylesNames = 'dayView' | 'dayViewInner' | 'dayViewScrollArea' | 'dayViewAllDay' | 'dayViewAllDayEvents' | 'dayViewSlot' | 'dayViewSlots' | 'dayViewTimeSlots' | 'dayViewSlotLabel' | 'dayViewSlotLabels' | 'dayViewBackgroundEvent' | MoreEventsStylesNames | ScheduleEventStylesNames | Exclude<CombinedScheduleHeaderStylesNames, MonthYearSelectStylesNames> | CurrentTimeIndicatorStylesNames | AgendaViewStylesNames;
 export type DayViewCssVariables = {
     dayView: '--day-view-radius' | '--day-view-slot-height' | '--day-view-all-day-slot-height';
 };
@@ -25,6 +26,8 @@ export interface DayViewProps extends BoxProps, StylesApiProps<DayViewFactory>,
     endTime?: string;
     /** Number of minutes for each time slot @default 15 */
     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;
     /** If set, the all-day slot is displayed below the header @default true */
     withAllDaySlot?: boolean;
     /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */
@@ -124,6 +127,8 @@ export interface DayViewProps extends BoxProps, StylesApiProps<DayViewFactory>,
         start: DateTimeStringValue;
         end: DateTimeStringValue;
     }) => Record<string, any> | undefined;
+    /** If set, displays an Agenda button in the header that opens an agenda list view @default false */
+    withAgenda?: boolean;
 }
 export type DayViewFactory = Factory<{
     props: DayViewProps;

package/lib/components/MonthView/MonthView.d.ts

@@ -1,12 +1,13 @@
 import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, ScrollAreaProps, StylesApiProps } from '@mantine/core';
 import { ScheduleLabelsOverride } from '../../labels';
 import { DateLabelFormat, DateStringValue, DateTimeStringValue, DayOfWeek, ScheduleEventData, ScheduleMode, ScheduleViewLevel } from '../../types';
+import { AgendaViewStylesNames } from '../AgendaView/AgendaView';
 import { MoreEventsProps } from '../MoreEvents/MoreEvents';
 import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
 import { MonthYearSelectProps } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect';
 import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
 import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';
-export type MonthViewStylesNames = 'monthView' | 'monthViewScrollArea' | 'monthViewInner' | 'monthViewWeek' | 'monthViewDay' | 'monthViewDayLabel' | 'monthViewWeekNumber' | 'monthViewWeekday' | 'monthViewWeekdays' | 'monthViewWeekdaysCorner' | 'monthViewEvents' | 'monthViewBackgroundEvent' | CombinedScheduleHeaderStylesNames;
+export type MonthViewStylesNames = 'monthView' | 'monthViewScrollArea' | 'monthViewInner' | 'monthViewWeek' | 'monthViewDay' | 'monthViewDayLabel' | 'monthViewWeekNumber' | 'monthViewWeekday' | 'monthViewWeekdays' | 'monthViewWeekdaysCorner' | 'monthViewEvents' | 'monthViewBackgroundEvent' | CombinedScheduleHeaderStylesNames | AgendaViewStylesNames;
 export type MonthViewCssVariables = {
     monthView: '--month-view-radius' | '--month-view-max-events';
 };
@@ -20,6 +21,8 @@ export interface MonthViewProps extends BoxProps, StylesApiProps<MonthViewFactor
     withWeekNumbers?: boolean;
     /** If set, weekdays names are displayed in the first row @default true */
     withWeekDays?: boolean;
+    /** If set, weekend days are displayed. When `false`, days defined by `weekendDays` are hidden and the grid shrinks to the remaining columns @default true */
+    withWeekendDays?: boolean;
     /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */
     locale?: string;
     /** Number 0-6, where 0 – Sunday and 6 – Saturday. @default 1 – Monday */
@@ -99,6 +102,8 @@ export interface MonthViewProps extends BoxProps, StylesApiProps<MonthViewFactor
     recurrenceExpansionLimit?: number;
     /** Maximum number of events visible per day before "+more" indicator shows, value is clamped between 1 and 10 @default 2 */
     maxEventsPerDay?: number;
+    /** If set, displays an Agenda button in the header that opens an agenda list view @default false */
+    withAgenda?: boolean;
 }
 export type MonthViewFactory = Factory<{
     props: MonthViewProps;

package/lib/components/MonthView/get-renderable-month-event-segments.d.ts

@@ -4,6 +4,10 @@ interface GetRenderableMonthEventSegmentsInput {
     groupedByDay: Record<string, MonthPositionedEventData[]>;
     maxEventsPerDay: number;
     week: DateStringValue[];
+    /** Week-relative indices (0–6) of hidden columns, e.g. weekend days */
+    hiddenColumns?: number[];
+    /** Number of visible columns, defaults to 7 */
+    columnsCount?: number;
 }
 export interface RenderableMonthEventSegment {
     event: MonthPositionedEventData;
@@ -12,5 +16,5 @@ export interface RenderableMonthEventSegment {
     clipEnd: boolean;
     key: string;
 }
-export declare function getRenderableMonthEventSegments({ events, groupedByDay, maxEventsPerDay, week, }: GetRenderableMonthEventSegmentsInput): RenderableMonthEventSegment[];
+export declare function getRenderableMonthEventSegments({ events, groupedByDay, maxEventsPerDay, week, hiddenColumns, columnsCount, }: GetRenderableMonthEventSegmentsInput): RenderableMonthEventSegment[];
 export {};

package/lib/components/MonthView/get-visible-columns.d.ts

@@ -0,0 +1,19 @@
+declare const DAYS_IN_WEEK = 7;
+declare const COLUMN_WIDTH: number;
+/**
+ * Builds a map from a full week-day index (0–6, relative to the first day of
+ * the week) to its visible column index. Hidden columns are mapped to -1.
+ */
+export declare function getVisibleColumnMap(hiddenColumns: number[]): number[];
+export interface VisibleColumnSpan {
+    startOffset: number;
+    width: number;
+}
+/**
+ * Clips a span defined by full week-day indices (`startColumn`–`endColumn`,
+ * inclusive) to the visible columns, returning one entry per contiguous run of
+ * visible columns. Offsets and widths are expressed in percent of the visible
+ * grid width.
+ */
+export declare function clipSpanToVisibleColumns(startColumn: number, endColumn: number, visibleColumnMap: number[], columnsCount: number): VisibleColumnSpan[];
+export { DAYS_IN_WEEK, COLUMN_WIDTH };

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

@@ -0,0 +1,148 @@
+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 { MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents';
+import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
+import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
+import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';
+export type ResourcesDayViewStylesNames = 'resourcesDayView' | 'resourcesDayViewRoot' | 'resourcesDayViewInner' | 'resourcesDayViewTimeLabelsRow' | 'resourcesDayViewScrollArea' | 'resourcesDayViewCorner' | 'resourcesDayViewTimeLabel' | 'resourcesDayViewResourceLabel' | 'resourcesDayViewRow' | 'resourcesDayViewRowSlot' | 'resourcesDayViewRowSlots' | 'resourcesDayViewBackgroundEvent' | 'resourcesDayViewAllDayEvent' | 'resourcesDayViewCurrentTimeIndicator' | 'resourcesDayViewCurrentTimeIndicatorLine' | 'resourcesDayViewCurrentTimeIndicatorThumb' | 'resourcesDayViewCurrentTimeIndicatorTimeBubble' | 'resourcesDayViewEventWrapper' | 'resourcesDayViewResizeHandle' | 'resourcesDayViewGroupColumn' | 'resourcesDayViewGroupColumnEmpty' | MoreEventsStylesNames | CombinedScheduleHeaderStylesNames;
+export type ResourcesDayViewCssVariables = {
+    resourcesDayView: '--resources-day-view-radius' | '--resources-day-view-slot-width' | '--resources-day-view-row-height' | '--resources-day-view-group-label-width';
+};
+export interface ResourcesDayViewProps extends BoxProps, StylesApiProps<ResourcesDayViewFactory>, ElementProps<'div'> {
+    __staticSelector?: string;
+    /** Day to display, Date object or date string in `YYYY-MM-DD` format */
+    date: Date | string;
+    /** Called with the new date value when a date is selected */
+    onDateChange?: (value: DateStringValue) => void;
+    /** List of resources to display as rows */
+    resources: ScheduleResourceData[];
+    /** Start time for the day view, in `HH:mm:ss` format @default 00:00:00 */
+    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 */
+    intervalMinutes?: 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 */
+    radius?: MantineRadius;
+    /** Time to scroll to on initial render, in `HH:mm:ss` format */
+    startScrollTime?: string;
+    /** Props passed down to the `ScrollArea` component */
+    scrollAreaProps?: Partial<ScrollAreaProps> & DataAttributes;
+    /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */
+    locale?: string;
+    /** If set, displays a vertical line indicating the current time. By default, displayed only for the current day. */
+    withCurrentTimeIndicator?: boolean;
+    /** If set, the time indicator displays the current time in the bubble @default true */
+    withCurrentTimeBubble?: boolean;
+    /** If set, the header is displayed @default true */
+    withHeader?: boolean;
+    /** Called when view level select button is clicked */
+    onViewChange?: (view: ScheduleViewLevel) => void;
+    /** Props passed to previous control */
+    previousControlProps?: React.ComponentProps<'button'> & DataAttributes;
+    /** Props passed to next control */
+    nextControlProps?: React.ComponentProps<'button'> & DataAttributes;
+    /** Props passed to today control */
+    todayControlProps?: React.ComponentProps<'button'> & DataAttributes;
+    /** Props passed to view level select */
+    viewSelectProps?: Partial<ViewSelectProps> & DataAttributes;
+    /** Dayjs format for header label @default 'MMMM D, YYYY' */
+    headerFormat?: DateLabelFormat;
+    /** List of events to display */
+    events?: ScheduleEventData[];
+    /** Width of each time slot column @default 80px */
+    slotWidth?: React.CSSProperties['width'];
+    /** Height of each resource row @default 64px */
+    rowHeight?: React.CSSProperties['height'];
+    /** Labels override */
+    labels?: ScheduleLabelsOverride;
+    /** If set to true, highlights business hours with white background @default false */
+    highlightBusinessHours?: boolean;
+    /** Business hours range in `HH:mm:ss` format @default ['09:00:00', '17:00:00'] */
+    businessHours?: [string, string];
+    /** Function to customize event body */
+    renderEventBody?: RenderEventBody;
+    /** Function to fully customize event rendering */
+    renderEvent?: RenderEvent;
+    /** Function to customize resource label rendering */
+    renderResourceLabel?: (resource: ScheduleResourceData) => React.ReactNode;
+    /** List of resource groups to display as a column to the left of resource labels */
+    groups?: ScheduleResourceGroup[];
+    /** Function to customize group label rendering */
+    renderGroupLabel?: (group: ScheduleResourceGroup) => React.ReactNode;
+    /** Width of the group label column @default 80px */
+    groupLabelWidth?: React.CSSProperties['width'];
+    /** If true, events can be dragged and dropped @default false */
+    withEventsDragAndDrop?: boolean;
+    /** Called when event is dropped at new time, includes target resourceId */
+    onEventDrop?: (data: {
+        eventId: string | number;
+        newStart: DateTimeStringValue;
+        newEnd: DateTimeStringValue;
+        event: ScheduleEventData;
+        resourceId?: string | number;
+    }) => void;
+    /** Function to determine if event can be dragged */
+    canDragEvent?: (event: ScheduleEventData) => boolean;
+    /** Called when any event drag starts */
+    onEventDragStart?: (event: ScheduleEventData) => void;
+    /** Called when any event drag ends */
+    onEventDragEnd?: () => void;
+    /** Called when time slot is clicked, includes resourceId */
+    onTimeSlotClick?: (data: {
+        slotStart: DateTimeStringValue;
+        slotEnd: DateTimeStringValue;
+        nativeEvent: React.MouseEvent<HTMLButtonElement>;
+        resourceId?: string | number;
+    }) => void;
+    /** Called when event is clicked */
+    onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** If set, enables drag-to-select time slot ranges @default false */
+    withDragSlotSelect?: boolean;
+    /** Called when a time slot range is selected by dragging, includes resourceId */
+    onSlotDragEnd?: (data: {
+        rangeStart: DateTimeStringValue;
+        rangeEnd: DateTimeStringValue;
+        resourceId?: string | number;
+    }) => void;
+    /** Interaction mode @default default */
+    mode?: ScheduleMode;
+    /** Called when an external item is dropped onto the schedule */
+    onExternalEventDrop?: (data: {
+        dataTransfer: DataTransfer;
+        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;
+    /** Max number of generated recurring instances per recurring series @default 2000 */
+    recurrenceExpansionLimit?: number;
+    /** Maximum number of events visible per time slot before "+more" indicator shows, minimum value is 1 @default 2 */
+    maxEventsPerTimeSlot?: number;
+    /** Props passed down to `MoreEvents` component */
+    moreEventsProps?: Partial<MoreEventsProps>;
+}
+export type ResourcesDayViewFactory = Factory<{
+    props: ResourcesDayViewProps;
+    ref: HTMLDivElement;
+    stylesNames: ResourcesDayViewStylesNames;
+    vars: ResourcesDayViewCssVariables;
+}>;
+export declare const ResourcesDayView: import("@mantine/core").MantineComponent<{
+    props: ResourcesDayViewProps;
+    ref: HTMLDivElement;
+    stylesNames: ResourcesDayViewStylesNames;
+    vars: ResourcesDayViewCssVariables;
+}>;

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

@@ -0,0 +1,39 @@
+import { GetStylesApi } from '@mantine/core';
+import { ScheduleLabelsOverride } from '../../labels';
+import { ScheduleMode, ScheduleResourceData, ScheduleResourceGroup } from '../../types';
+import { DayTimeInterval, ResourceGroupInfo, ResourcesGridControlsRef } from '../../utils';
+import type { ResourcesDayViewFactory } from './ResourcesDayView';
+export interface ResourcesDayViewRowProps {
+    resource: ScheduleResourceData;
+    resourceIndex: number;
+    date: string;
+    slots: DayTimeInterval[];
+    getStyles: GetStylesApi<ResourcesDayViewFactory>;
+    children?: React.ReactNode;
+    labels?: ScheduleLabelsOverride;
+    highlightBusinessHours?: boolean;
+    businessHours?: [string, string];
+    withEventsDragAndDrop?: boolean;
+    onRowSlotsDragOver?: (e: React.DragEvent<HTMLDivElement>, resourceId: string | number, resourceIndex: number) => void;
+    onRowSlotsDragLeave?: () => void;
+    onRowSlotsDrop?: (e: React.DragEvent<HTMLDivElement>, resourceId: string | number, resourceIndex: number) => void;
+    onSlotClick?: (resourceId: string | number, slotTime: string, event: React.MouseEvent<HTMLButtonElement>) => void;
+    dropTargetSlotIndex?: number;
+    mode?: ScheduleMode;
+    slotsRef?: ResourcesGridControlsRef;
+    firstSlotIndex?: {
+        resourceIndex: number;
+        slotIndex: number;
+    };
+    onSlotKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, resourceIndex: number, slotIndex: number) => void;
+    withDragSlotSelect?: boolean;
+    onSlotPointerDown?: (event: React.PointerEvent<HTMLButtonElement>, index: number, group: string) => void;
+    isSlotDragSelected?: (index: number, group: string) => boolean;
+    rowSlotsContainerRef?: (node: HTMLDivElement | null) => void;
+    renderResourceLabel?: (resource: ScheduleResourceData) => React.ReactNode;
+    renderGroupLabel?: (group: ScheduleResourceGroup) => React.ReactNode;
+    scrolledX?: boolean;
+    groupInfo?: ResourceGroupInfo | null;
+    allDayCount?: number;
+}
+export declare function ResourcesDayViewRow({ resource, resourceIndex, date, slots, getStyles, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onRowSlotsDragOver, onRowSlotsDragLeave, onRowSlotsDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, rowSlotsContainerRef, renderResourceLabel, renderGroupLabel, scrolledX, groupInfo, allDayCount, }: ResourcesDayViewRowProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.d.ts

@@ -0,0 +1,2 @@
+import { DayPositionedEventData } from '../../../types';
+export declare function getOverlapClusters(events: DayPositionedEventData[]): DayPositionedEventData[][];

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

@@ -0,0 +1,16 @@
+import { AnyDateValue, DayPositionedEventData, ScheduleEventData, ScheduleResourceData } from '../../../types';
+interface GetResourcesDayViewEventsInput {
+    events: ScheduleEventData[] | undefined;
+    resources: ScheduleResourceData[];
+    date: AnyDateValue;
+    startTime?: string;
+    endTime?: string;
+}
+export interface ResourcesDayViewEventsResult {
+    regularEvents: Record<string | number, DayPositionedEventData[]>;
+    allDayEvents: Record<string | number, DayPositionedEventData[]>;
+    backgroundTimedEvents: Record<string | number, DayPositionedEventData[]>;
+    backgroundAllDayEvents: Record<string | number, DayPositionedEventData[]>;
+}
+export declare function getResourcesDayViewEvents({ events, resources, date, startTime, endTime, }: GetResourcesDayViewEventsInput): ResourcesDayViewEventsResult;
+export {};

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

@@ -0,0 +1,9 @@
+import type { ResourcesDayViewCssVariables, ResourcesDayViewFactory, ResourcesDayViewProps, ResourcesDayViewStylesNames } from './ResourcesDayView';
+export { ResourcesDayView } from './ResourcesDayView';
+export type { ResourcesDayViewProps, ResourcesDayViewFactory, ResourcesDayViewStylesNames, ResourcesDayViewCssVariables, };
+export declare namespace ResourcesDayView {
+    type Props = ResourcesDayViewProps;
+    type Factory = ResourcesDayViewFactory;
+    type StylesNames = ResourcesDayViewStylesNames;
+    type CssVariables = ResourcesDayViewCssVariables;
+}

package/lib/components/ResourcesMonthView/ResourcesMonthView.d.ts

@@ -0,0 +1,129 @@
+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 { MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents';
+import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
+import { MonthYearSelectProps } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect';
+import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
+import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';
+export type ResourcesMonthViewStylesNames = 'resourcesMonthView' | 'resourcesMonthViewRoot' | 'resourcesMonthViewScrollArea' | 'resourcesMonthViewDayLabelsRow' | 'resourcesMonthViewCorner' | 'resourcesMonthViewDayLabel' | 'resourcesMonthViewDayLabelWeekday' | 'resourcesMonthViewDayLabelNumber' | 'resourcesMonthViewRow' | 'resourcesMonthViewResourceLabel' | 'resourcesMonthViewRowSlots' | 'resourcesMonthViewCell' | 'resourcesMonthViewInner' | 'resourcesMonthViewGroupColumn' | 'resourcesMonthViewGroupColumnEmpty' | MoreEventsStylesNames | CombinedScheduleHeaderStylesNames;
+export type ResourcesMonthViewCssVariables = {
+    resourcesMonthView: '--resources-month-view-radius' | '--resources-month-view-day-width' | '--resources-month-view-row-height' | '--resources-month-view-group-label-width';
+};
+export interface ResourcesMonthViewProps extends BoxProps, StylesApiProps<ResourcesMonthViewFactory>, ElementProps<'div'> {
+    __staticSelector?: string;
+    /** Date to display, Date object or date string in `YYYY-MM-DD` format */
+    date: Date | string;
+    /** Called with the new date value when a date is selected */
+    onDateChange?: (value: DateStringValue) => void;
+    /** List of resources to display as rows */
+    resources: ScheduleResourceData[];
+    /** Locale passed down to dayjs */
+    locale?: string;
+    /** `dayjs` format for weekdays in day column headers @default 'dd' */
+    weekdayFormat?: DateLabelFormat;
+    /** Indices of weekend days */
+    weekendDays?: DayOfWeek[];
+    /** If set to false, weekend days are hidden @default true */
+    withWeekendDays?: boolean;
+    /** Date to scroll to on initial render, in `YYYY-MM-DD` format */
+    startScrollDate?: string;
+    /** Called when a cell is clicked, includes resourceId */
+    onDayClick?: (data: {
+        date: DateStringValue;
+        nativeEvent: React.MouseEvent<HTMLButtonElement>;
+        resourceId?: string | number;
+    }) => void;
+    /** If set, highlights the current day @default true */
+    highlightToday?: boolean;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */
+    radius?: MantineRadius;
+    /** If set, the header is displayed @default true */
+    withHeader?: boolean;
+    /** Props passed down to `MonthYearSelect` component */
+    monthYearSelectProps?: Partial<MonthYearSelectProps>;
+    /** Called when view level select button is clicked */
+    onViewChange?: (view: ScheduleViewLevel) => void;
+    /** Props passed to previous control */
+    previousControlProps?: React.ComponentProps<'button'> & DataAttributes;
+    /** Props passed to next control */
+    nextControlProps?: React.ComponentProps<'button'> & DataAttributes;
+    /** Props passed to today control */
+    todayControlProps?: React.ComponentProps<'button'> & DataAttributes;
+    /** Props passed to view level select */
+    viewSelectProps?: Partial<ViewSelectProps> & DataAttributes;
+    /** Events to display */
+    events?: ScheduleEventData[];
+    /** Width of each day column @default 40px */
+    dayWidth?: React.CSSProperties['width'];
+    /** Height of each resource row @default 48px */
+    rowHeight?: React.CSSProperties['height'];
+    /** Function to customize event body */
+    renderEventBody?: RenderEventBody;
+    /** Function to fully customize event rendering */
+    renderEvent?: RenderEvent;
+    /** Function to customize resource label rendering */
+    renderResourceLabel?: (resource: ScheduleResourceData) => React.ReactNode;
+    /** List of resource groups to display as a column to the left of resource labels */
+    groups?: ScheduleResourceGroup[];
+    /** Function to customize group label rendering */
+    renderGroupLabel?: (group: ScheduleResourceGroup) => React.ReactNode;
+    /** Width of the group label column @default 80px */
+    groupLabelWidth?: React.CSSProperties['width'];
+    /** If true, events can be dragged and dropped @default false */
+    withEventsDragAndDrop?: boolean;
+    /** Called when event is dropped, includes target resourceId */
+    onEventDrop?: (data: {
+        eventId: string | number;
+        newStart: DateTimeStringValue;
+        newEnd: DateTimeStringValue;
+        event: ScheduleEventData;
+        resourceId?: string | number;
+    }) => void;
+    /** Function to determine if event can be dragged */
+    canDragEvent?: (event: ScheduleEventData) => boolean;
+    /** Called when any event drag starts */
+    onEventDragStart?: (event: ScheduleEventData) => void;
+    /** Called when any event drag ends */
+    onEventDragEnd?: () => void;
+    /** Called when event is clicked */
+    onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** If set, enables drag-to-select day ranges @default false */
+    withDragSlotSelect?: boolean;
+    /** Called when a day range is selected by dragging, includes resourceId */
+    onSlotDragEnd?: (data: {
+        rangeStart: DateTimeStringValue;
+        rangeEnd: DateTimeStringValue;
+        resourceId?: string | number;
+    }) => void;
+    /** Labels override for i18n */
+    labels?: ScheduleLabelsOverride;
+    /** Interaction mode @default default */
+    mode?: ScheduleMode;
+    /** Props passed down to `ScrollArea` component */
+    scrollAreaProps?: Partial<ScrollAreaProps> & DataAttributes;
+    /** Called when an external item is dropped */
+    onExternalEventDrop?: (data: {
+        dataTransfer: DataTransfer;
+        dropDateTime: DateTimeStringValue;
+        resourceId?: string | number;
+    }) => void;
+    /** Maximum number of events visible per cell before "+more" indicator @default 2 */
+    maxEventsPerTimeSlot?: number;
+    /** Props passed down to `MoreEvents` component */
+    moreEventsProps?: Partial<MoreEventsProps>;
+    /** Max number of generated recurring instances @default 2000 */
+    recurrenceExpansionLimit?: number;
+}
+export type ResourcesMonthViewFactory = Factory<{
+    props: ResourcesMonthViewProps;
+    ref: HTMLDivElement;
+    stylesNames: ResourcesMonthViewStylesNames;
+    vars: ResourcesMonthViewCssVariables;
+}>;
+export declare const ResourcesMonthView: import("@mantine/core").MantineComponent<{
+    props: ResourcesMonthViewProps;
+    ref: HTMLDivElement;
+    stylesNames: ResourcesMonthViewStylesNames;
+    vars: ResourcesMonthViewCssVariables;
+}>;

package/lib/components/ResourcesMonthView/index.d.ts

@@ -0,0 +1,9 @@
+import type { ResourcesMonthViewCssVariables, ResourcesMonthViewFactory, ResourcesMonthViewProps, ResourcesMonthViewStylesNames } from './ResourcesMonthView';
+export { ResourcesMonthView } from './ResourcesMonthView';
+export type { ResourcesMonthViewProps, ResourcesMonthViewFactory, ResourcesMonthViewStylesNames, ResourcesMonthViewCssVariables, };
+export declare namespace ResourcesMonthView {
+    type Props = ResourcesMonthViewProps;
+    type Factory = ResourcesMonthViewFactory;
+    type StylesNames = ResourcesMonthViewStylesNames;
+    type CssVariables = ResourcesMonthViewCssVariables;
+}

package/lib/components/ResourcesSchedule/ResourcesSchedule.d.ts

@@ -0,0 +1,123 @@
+import { BoxProps, ElementProps, Factory, MantineRadius, StylesApiProps } from '@mantine/core';
+import { ScheduleLabelsOverride } from '../../labels';
+import { DateStringValue, DateTimeStringValue, ScheduleEventData, ScheduleMode, ScheduleResourceData } from '../../types';
+import { ResourcesDayViewProps, ResourcesDayViewStylesNames } from '../ResourcesDayView/ResourcesDayView';
+import { ResourcesMonthViewProps, ResourcesMonthViewStylesNames } from '../ResourcesMonthView/ResourcesMonthView';
+import { ResourcesWeekViewProps, ResourcesWeekViewStylesNames } from '../ResourcesWeekView/ResourcesWeekView';
+import { RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
+export type ResourcesScheduleStylesNames = 'root' | ResourcesDayViewStylesNames | ResourcesWeekViewStylesNames | ResourcesMonthViewStylesNames;
+export type ResourcesScheduleViewLevel = 'day' | 'week' | 'month';
+type ResourcesScheduleCommonProps = 'date' | 'onDateChange' | 'resources' | 'events' | 'locale' | 'radius' | 'labels' | 'renderEventBody' | 'renderResourceLabel' | 'withEventsDragAndDrop' | 'onEventDrop' | 'canDragEvent' | 'onEventDragStart' | 'onEventDragEnd' | 'onTimeSlotClick' | 'onEventClick' | 'onDayClick' | 'withDragSlotSelect' | 'onSlotDragEnd' | 'view' | 'onViewChange' | 'mode' | 'onExternalEventDrop' | 'withEventResize' | 'onEventResize' | 'canResizeEvent' | 'recurrenceExpansionLimit';
+type ResourcesScheduleViewProps<T> = Partial<Omit<T, ResourcesScheduleCommonProps>>;
+export interface ResourcesScheduleProps extends BoxProps, StylesApiProps<ResourcesScheduleFactory>, ElementProps<'div'> {
+    __staticSelector?: string;
+    /** List of resources to display */
+    resources: ScheduleResourceData[];
+    /** Current date to display (controlled) */
+    date?: Date | DateStringValue;
+    /** Default date (uncontrolled) */
+    defaultDate?: Date | DateStringValue;
+    /** Called when date changes via navigation */
+    onDateChange?: (date: DateStringValue) => void;
+    /** Current view level (controlled) */
+    view?: ResourcesScheduleViewLevel;
+    /** Default view level (uncontrolled) @default 'day' */
+    defaultView?: ResourcesScheduleViewLevel;
+    /** Called when view level changes */
+    onViewChange?: (view: ResourcesScheduleViewLevel) => void;
+    /** Events to display across all views */
+    events?: ScheduleEventData[];
+    /** Locale for date formatting */
+    locale?: string;
+    /** Key of theme.radius or any valid CSS value to set border-radius */
+    radius?: MantineRadius;
+    /** Labels override for i18n */
+    labels?: ScheduleLabelsOverride;
+    /** Custom event body renderer */
+    renderEventBody?: RenderEventBody;
+    /** Custom resource label renderer */
+    renderResourceLabel?: (resource: ScheduleResourceData) => React.ReactNode;
+    /** Enable drag and drop for events @default false */
+    withEventsDragAndDrop?: boolean;
+    /** Called when event is dropped */
+    onEventDrop?: (data: {
+        eventId: string | number;
+        newStart: DateTimeStringValue;
+        newEnd: DateTimeStringValue;
+        event: ScheduleEventData;
+        resourceId?: string | number;
+    }) => void;
+    /** Function to determine if event can be dragged */
+    canDragEvent?: (event: ScheduleEventData) => boolean;
+    /** Called when any event drag starts */
+    onEventDragStart?: (event: ScheduleEventData) => void;
+    /** Called when any event drag ends */
+    onEventDragEnd?: () => void;
+    /** Called when time slot is clicked */
+    onTimeSlotClick?: (data: {
+        slotStart: DateTimeStringValue;
+        slotEnd: DateTimeStringValue;
+        nativeEvent: React.MouseEvent<HTMLButtonElement>;
+        resourceId?: string | number;
+    }) => void;
+    /** Called when day is clicked in month view */
+    onDayClick?: (data: {
+        date: DateStringValue;
+        nativeEvent: React.MouseEvent<HTMLButtonElement>;
+        resourceId?: string | number;
+    }) => void;
+    /** Called when event is clicked */
+    onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** If set, enables drag-to-select slot ranges @default false */
+    withDragSlotSelect?: boolean;
+    /** Called when a slot range is selected by dragging */
+    onSlotDragEnd?: (data: {
+        rangeStart: DateTimeStringValue;
+        rangeEnd: DateTimeStringValue;
+        resourceId?: string | number;
+    }) => void;
+    /** Interaction mode @default default */
+    mode?: ScheduleMode;
+    /** Called when an external item is dropped onto the schedule */
+    onExternalEventDrop?: (data: {
+        dataTransfer: DataTransfer;
+        dropDateTime: DateTimeStringValue;
+        resourceId?: string | number;
+    }) => void;
+    /** If true, events can be resized @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;
+    /** Max number of generated recurring instances @default 2000 */
+    recurrenceExpansionLimit?: number;
+    /** Props specific to ResourcesDayView */
+    dayViewProps?: ResourcesScheduleViewProps<ResourcesDayViewProps>;
+    /** Props specific to ResourcesWeekView */
+    weekViewProps?: ResourcesScheduleViewProps<ResourcesWeekViewProps>;
+    /** Props specific to ResourcesMonthView */
+    monthViewProps?: ResourcesScheduleViewProps<ResourcesMonthViewProps>;
+}
+export type ResourcesScheduleFactory = Factory<{
+    props: ResourcesScheduleProps;
+    ref: HTMLDivElement;
+    stylesNames: ResourcesScheduleStylesNames;
+}>;
+export declare const ResourcesSchedule: import("@mantine/core").MantineComponent<{
+    props: ResourcesScheduleProps;
+    ref: HTMLDivElement;
+    stylesNames: ResourcesScheduleStylesNames;
+}>;
+export declare namespace ResourcesSchedule {
+    type Props = ResourcesScheduleProps;
+    type StylesNames = ResourcesScheduleStylesNames;
+    type Factory = ResourcesScheduleFactory;
+    type ViewLevel = ResourcesScheduleViewLevel;
+}
+export {};

package/lib/components/ResourcesSchedule/index.d.ts

@@ -0,0 +1,3 @@
+import type { ResourcesScheduleFactory, ResourcesScheduleProps, ResourcesScheduleStylesNames, ResourcesScheduleViewLevel } from './ResourcesSchedule';
+export { ResourcesSchedule } from './ResourcesSchedule';
+export type { ResourcesScheduleProps, ResourcesScheduleFactory, ResourcesScheduleStylesNames, ResourcesScheduleViewLevel, };