devextreme-react/cjs/scheduler.d.ts

DevExtreme React UI and Visualization Components

/*!
 * devextreme-react
 * Version: 24.2.6
 * Build date: Mon Mar 17 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 *
 * This software may be modified and distributed under the terms
 * of the MIT license. See the LICENSE file in the root of the project for details.
 *
 * https://github.com/DevExpress/devextreme-react
 */

import * as React from "react";
import { Ref, ReactElement } from "react";
import dxScheduler, { Properties } from "devextreme/ui/scheduler";
import { IHtmlOptions, NestedComponentMeta } from "./core/component";
import type { ViewType, AppointmentAddedEvent, AppointmentAddingEvent, AppointmentClickEvent, AppointmentContextMenuEvent, AppointmentDblClickEvent, AppointmentDeletedEvent, AppointmentDeletingEvent, AppointmentFormOpeningEvent, AppointmentRenderedEvent, AppointmentTooltipShowingEvent, AppointmentUpdatedEvent, AppointmentUpdatingEvent, CellClickEvent, CellContextMenuEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, AllDayPanelMode, AppointmentTemplateData, AppointmentTooltipTemplateData, CellAppointmentsLimit, dxSchedulerScrolling } from "devextreme/ui/scheduler";
import type { event } from "devextreme/events/events.types";
import type { DataSourceOptions } from "devextreme/data/data_source";
import type { Store } from "devextreme/data/store";
import type { ScrollMode, template, FirstDayOfWeek, Orientation } from "devextreme/common";
import type dxSortable from "devextreme/ui/sortable";
import type dxDraggable from "devextreme/ui/draggable";
import type DataSource from "devextreme/data/data_source";
type ReplaceFieldTypes<TSource, TReplacement> = {
    [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
};
type ISchedulerOptionsNarrowedEvents = {
    onAppointmentAdded?: ((e: AppointmentAddedEvent) => void);
    onAppointmentAdding?: ((e: AppointmentAddingEvent) => void);
    onAppointmentClick?: ((e: AppointmentClickEvent) => void);
    onAppointmentContextMenu?: ((e: AppointmentContextMenuEvent) => void);
    onAppointmentDblClick?: ((e: AppointmentDblClickEvent) => void);
    onAppointmentDeleted?: ((e: AppointmentDeletedEvent) => void);
    onAppointmentDeleting?: ((e: AppointmentDeletingEvent) => void);
    onAppointmentFormOpening?: ((e: AppointmentFormOpeningEvent) => void);
    onAppointmentRendered?: ((e: AppointmentRenderedEvent) => void);
    onAppointmentTooltipShowing?: ((e: AppointmentTooltipShowingEvent) => void);
    onAppointmentUpdated?: ((e: AppointmentUpdatedEvent) => void);
    onAppointmentUpdating?: ((e: AppointmentUpdatingEvent) => void);
    onCellClick?: ((e: CellClickEvent) => void);
    onCellContextMenu?: ((e: CellContextMenuEvent) => void);
    onContentReady?: ((e: ContentReadyEvent) => void);
    onDisposing?: ((e: DisposingEvent) => void);
    onInitialized?: ((e: InitializedEvent) => void);
};
type ISchedulerOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, ISchedulerOptionsNarrowedEvents> & IHtmlOptions & {
    appointmentCollectorRender?: (...params: any) => React.ReactNode;
    appointmentCollectorComponent?: React.ComponentType<any>;
    appointmentRender?: (...params: any) => React.ReactNode;
    appointmentComponent?: React.ComponentType<any>;
    appointmentTooltipRender?: (...params: any) => React.ReactNode;
    appointmentTooltipComponent?: React.ComponentType<any>;
    dataCellRender?: (...params: any) => React.ReactNode;
    dataCellComponent?: React.ComponentType<any>;
    dateCellRender?: (...params: any) => React.ReactNode;
    dateCellComponent?: React.ComponentType<any>;
    dropDownAppointmentRender?: (...params: any) => React.ReactNode;
    dropDownAppointmentComponent?: React.ComponentType<any>;
    resourceCellRender?: (...params: any) => React.ReactNode;
    resourceCellComponent?: React.ComponentType<any>;
    timeCellRender?: (...params: any) => React.ReactNode;
    timeCellComponent?: React.ComponentType<any>;
    defaultCurrentDate?: Date | number | string;
    defaultCurrentView?: string | ViewType;
    onCurrentDateChange?: (value: Date | number | string) => void;
    onCurrentViewChange?: (value: string | ViewType) => void;
}>;
interface SchedulerRef {
    instance: () => dxScheduler;
}
declare const Scheduler: (props: React.PropsWithChildren<ISchedulerOptions> & {
    ref?: Ref<SchedulerRef>;
}) => ReactElement | null;
type IAppointmentDraggingProps = React.PropsWithChildren<{
    autoScroll?: boolean;
    data?: any | undefined;
    group?: string | undefined;
    onAdd?: ((e: {
        component: dxScheduler;
        event: event;
        fromComponent: dxSortable | dxDraggable;
        fromData: any;
        itemData: any;
        itemElement: any;
        toComponent: dxSortable | dxDraggable;
        toData: any;
    }) => void);
    onDragEnd?: ((e: {
        cancel: boolean;
        component: dxScheduler;
        event: event;
        fromComponent: dxSortable | dxDraggable;
        fromData: any;
        itemData: any;
        itemElement: any;
        toComponent: dxSortable | dxDraggable;
        toData: any;
        toItemData: any;
    }) => void);
    onDragMove?: ((e: {
        cancel: boolean;
        component: dxScheduler;
        event: event;
        fromComponent: dxSortable | dxDraggable;
        fromData: any;
        itemData: any;
        itemElement: any;
        toComponent: dxSortable | dxDraggable;
        toData: any;
    }) => void);
    onDragStart?: ((e: {
        cancel: boolean;
        component: dxScheduler;
        event: event;
        fromData: any;
        itemData: any;
        itemElement: any;
    }) => void);
    onRemove?: ((e: {
        component: dxScheduler;
        event: event;
        fromComponent: dxSortable | dxDraggable;
        fromData: any;
        itemData: any;
        itemElement: any;
        toComponent: dxSortable | dxDraggable;
    }) => void);
    scrollSensitivity?: number;
    scrollSpeed?: number;
}>;
declare const AppointmentDragging: ((props: IAppointmentDraggingProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    autoScroll?: boolean | undefined;
    data?: any | undefined;
    group?: string | undefined;
    onAdd?: ((e: {
        component: dxScheduler;
        event: event;
        fromComponent: dxSortable | dxDraggable;
        fromData: any;
        itemData: any;
        itemElement: any;
        toComponent: dxSortable | dxDraggable;
        toData: any;
    }) => void) | undefined;
    onDragEnd?: ((e: {
        cancel: boolean;
        component: dxScheduler;
        event: event;
        fromComponent: dxSortable | dxDraggable;
        fromData: any;
        itemData: any;
        itemElement: any;
        toComponent: dxSortable | dxDraggable;
        toData: any;
        toItemData: any;
    }) => void) | undefined;
    onDragMove?: ((e: {
        cancel: boolean;
        component: dxScheduler;
        event: event;
        fromComponent: dxSortable | dxDraggable;
        fromData: any;
        itemData: any;
        itemElement: any;
        toComponent: dxSortable | dxDraggable;
        toData: any;
    }) => void) | undefined;
    onDragStart?: ((e: {
        cancel: boolean;
        component: dxScheduler;
        event: event;
        fromData: any;
        itemData: any;
        itemElement: any;
    }) => void) | undefined;
    onRemove?: ((e: {
        component: dxScheduler;
        event: event;
        fromComponent: dxSortable | dxDraggable;
        fromData: any;
        itemData: any;
        itemElement: any;
        toComponent: dxSortable | dxDraggable;
    }) => void) | undefined;
    scrollSensitivity?: number | undefined;
    scrollSpeed?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IEditingProps = React.PropsWithChildren<{
    allowAdding?: boolean;
    allowDeleting?: boolean;
    allowDragging?: boolean;
    allowResizing?: boolean;
    allowTimeZoneEditing?: boolean;
    allowUpdating?: boolean;
}>;
declare const Editing: ((props: IEditingProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    allowAdding?: boolean | undefined;
    allowDeleting?: boolean | undefined;
    allowDragging?: boolean | undefined;
    allowResizing?: boolean | undefined;
    allowTimeZoneEditing?: boolean | undefined;
    allowUpdating?: boolean | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IResourceProps = React.PropsWithChildren<{
    allowMultiple?: boolean;
    colorExpr?: string;
    dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string;
    displayExpr?: ((resource: any) => string) | string;
    fieldExpr?: string;
    label?: string;
    useColorAsDefault?: boolean;
    valueExpr?: (() => void) | string;
}>;
declare const Resource: ((props: IResourceProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    allowMultiple?: boolean | undefined;
    colorExpr?: string | undefined;
    dataSource?: string | any[] | DataSource<any, any> | DataSourceOptions<any, any, any, any> | Store<any, any> | null | undefined;
    displayExpr?: string | ((resource: any) => string) | undefined;
    fieldExpr?: string | undefined;
    label?: string | undefined;
    useColorAsDefault?: boolean | undefined;
    valueExpr?: string | (() => void) | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IScrollingProps = React.PropsWithChildren<{
    mode?: ScrollMode;
}>;
declare const Scrolling: ((props: IScrollingProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    mode?: ScrollMode | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IViewProps = React.PropsWithChildren<{
    agendaDuration?: number;
    allDayPanelMode?: AllDayPanelMode;
    appointmentCollectorTemplate?: ((data: {
        appointmentCount: number;
        isCompact: boolean;
    }, collectorElement: any) => string | any) | template;
    appointmentTemplate?: ((model: AppointmentTemplateData | {
        appointmentData: Record<string, any>;
        targetedAppointmentData: Record<string, any>;
    }, itemIndex: number, contentElement: any) => string | any) | template;
    appointmentTooltipTemplate?: ((model: AppointmentTooltipTemplateData | {
        appointmentData: Record<string, any>;
        targetedAppointmentData: Record<string, any>;
    }, itemIndex: number, contentElement: any) => string | any) | template;
    cellDuration?: number;
    dataCellTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
    dateCellTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
    dropDownAppointmentTemplate?: ((itemData: any, itemIndex: number, contentElement: any) => string | any) | template;
    endDayHour?: number;
    firstDayOfWeek?: FirstDayOfWeek | undefined;
    groupByDate?: boolean;
    groupOrientation?: Orientation;
    groups?: Array<string>;
    intervalCount?: number;
    maxAppointmentsPerCell?: CellAppointmentsLimit | number;
    name?: string | undefined;
    offset?: number;
    resourceCellTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
    scrolling?: dxSchedulerScrolling;
    startDate?: Date | number | string | undefined;
    startDayHour?: number;
    timeCellTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
    type?: undefined | ViewType;
    appointmentCollectorRender?: (...params: any) => React.ReactNode;
    appointmentCollectorComponent?: React.ComponentType<any>;
    appointmentRender?: (...params: any) => React.ReactNode;
    appointmentComponent?: React.ComponentType<any>;
    appointmentTooltipRender?: (...params: any) => React.ReactNode;
    appointmentTooltipComponent?: React.ComponentType<any>;
    dataCellRender?: (...params: any) => React.ReactNode;
    dataCellComponent?: React.ComponentType<any>;
    dateCellRender?: (...params: any) => React.ReactNode;
    dateCellComponent?: React.ComponentType<any>;
    dropDownAppointmentRender?: (...params: any) => React.ReactNode;
    dropDownAppointmentComponent?: React.ComponentType<any>;
    resourceCellRender?: (...params: any) => React.ReactNode;
    resourceCellComponent?: React.ComponentType<any>;
    timeCellRender?: (...params: any) => React.ReactNode;
    timeCellComponent?: React.ComponentType<any>;
}>;
declare const View: ((props: IViewProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    agendaDuration?: number | undefined;
    allDayPanelMode?: AllDayPanelMode | undefined;
    appointmentCollectorTemplate?: template | ((data: {
        appointmentCount: number;
        isCompact: boolean;
    }, collectorElement: any) => string | any) | undefined;
    appointmentTemplate?: template | ((model: AppointmentTemplateData | {
        appointmentData: Record<string, any>;
        targetedAppointmentData: Record<string, any>;
    }, itemIndex: number, contentElement: any) => string | any) | undefined;
    appointmentTooltipTemplate?: template | ((model: AppointmentTooltipTemplateData | {
        appointmentData: Record<string, any>;
        targetedAppointmentData: Record<string, any>;
    }, itemIndex: number, contentElement: any) => string | any) | undefined;
    cellDuration?: number | undefined;
    dataCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: any) => string | any) | undefined;
    dateCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: any) => string | any) | undefined;
    dropDownAppointmentTemplate?: template | ((itemData: any, itemIndex: number, contentElement: any) => string | any) | undefined;
    endDayHour?: number | undefined;
    firstDayOfWeek?: FirstDayOfWeek | undefined;
    groupByDate?: boolean | undefined;
    groupOrientation?: Orientation | undefined;
    groups?: string[] | undefined;
    intervalCount?: number | undefined;
    maxAppointmentsPerCell?: number | CellAppointmentsLimit | undefined;
    name?: string | undefined;
    offset?: number | undefined;
    resourceCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: any) => string | any) | undefined;
    scrolling?: dxSchedulerScrolling | undefined;
    startDate?: Date | number | string | undefined;
    startDayHour?: number | undefined;
    timeCellTemplate?: template | ((itemData: any, itemIndex: number, itemElement: any) => string | any) | undefined;
    type?: undefined | ViewType;
    appointmentCollectorRender?: ((...params: any) => React.ReactNode) | undefined;
    appointmentCollectorComponent?: React.ComponentType<any> | undefined;
    appointmentRender?: ((...params: any) => React.ReactNode) | undefined;
    appointmentComponent?: React.ComponentType<any> | undefined;
    appointmentTooltipRender?: ((...params: any) => React.ReactNode) | undefined;
    appointmentTooltipComponent?: React.ComponentType<any> | undefined;
    dataCellRender?: ((...params: any) => React.ReactNode) | undefined;
    dataCellComponent?: React.ComponentType<any> | undefined;
    dateCellRender?: ((...params: any) => React.ReactNode) | undefined;
    dateCellComponent?: React.ComponentType<any> | undefined;
    dropDownAppointmentRender?: ((...params: any) => React.ReactNode) | undefined;
    dropDownAppointmentComponent?: React.ComponentType<any> | undefined;
    resourceCellRender?: ((...params: any) => React.ReactNode) | undefined;
    resourceCellComponent?: React.ComponentType<any> | undefined;
    timeCellRender?: ((...params: any) => React.ReactNode) | undefined;
    timeCellComponent?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
export default Scheduler;
export { Scheduler, ISchedulerOptions, SchedulerRef, AppointmentDragging, IAppointmentDraggingProps, Editing, IEditingProps, Resource, IResourceProps, Scrolling, IScrollingProps, View, IViewProps };
import type * as SchedulerTypes from 'devextreme/ui/scheduler_types';
export { SchedulerTypes };