Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@devexpress/dx-react-scheduler

Package Overview
Dependencies
Maintainers
13
Versions
62
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@devexpress/dx-react-scheduler - npm Package Compare versions

Comparing version 1.11.0 to 1.11.1

1720

dist/dx-react-scheduler.d.ts

@@ -0,23 +1,420 @@

// Dependencies for this module:
// ../../../../react
// ../../../../@devexpress/dx-scheduler-core
// ../../../../moment
import * as React from 'react';
import { FormatterFn } from '@devexpress/dx-scheduler-core';
import moment from 'moment';
// -------------------------------------------------------------------------------------------------
// AllDayPanel
// -------------------------------------------------------------------------------------------------
/***
* The Scheduler is a root container component designed to process
* and display the specified data. The Scheduler’s functionality
* (data visualization and processing) is implemented in several plugins specified as child components.
* */
export const Scheduler: React.ComponentType<SchedulerProps>;
export namespace AllDayPanel {
/*** A plugin that renders Scheduler data for a day. This plugin arranges appointments from top to bottom.
* If their time intervals overlap, their width is decreased and they are placed next to each other.
* */
export const DayView: React.ComponentType<VerticalViewProps>;
/***
* A plugin that renders the Scheduler's week view. This plugin arranges appointments from top to bottom.
* If their time intervals overlap, their width is decreased and they are placed next to each other.
* */
export const WeekView: React.ComponentType<WeekViewProps>;
/***
* A plugin that renders Scheduler data for a month. This plugin arranges appointments from left to right.
* An appointment's size depends on its duration in days.
* However, it occupies the entire day cell if an appointment lasts only for several hours or minutes.
* The time scale and all-day panel are not available in this view.
* */
export const MonthView: React.ComponentType<MonthViewProps>;
/** A plugin that renders the Scheduler's toolbar. */
export const Toolbar: React.ComponentType<ToolbarProps>;
/** A plugin that renders the Scheduler’s date navigator. */
export const DateNavigator: React.ComponentType<DateNavigatorProps>;
/** A plugin that renders the Scheduler's view switcher. */
export const ViewSwitcher: React.ComponentType<ViewSwitcherProps>;
/** A plugin that renders appointments. */
export const Appointments: React.ComponentType<AppointmentsProps>;
/** A plugin that renders the All Day Panel. */
export const AllDayPanel: React.ComponentType<AllDayPanelProps>;
/** A plugin that manages the view state. It specifies the current date and the displayed view. */
export const ViewState: React.ComponentType<ViewStateProps>;
/** A plugin that manages the scheduler appointment editing state. */
export const EditingState: React.ComponentType<EditingStateProps>;
/** The AppointmentTooltip plugin allows you to display information about an appointment in a tooltip. */
export const AppointmentTooltip: React.ComponentType<AppointmentTooltipProps>;
/** The AppointmentForm plugin renders a form that visualizes appointment’s data and allows a user to modify this data. */
export const AppointmentForm: React.ComponentType<AppointmentFormProps>;
/** A plugin that enables users to edit appointments via drag-and-drop. */
export const DragDropProvider: React.ComponentType<DragDropProviderProps>;
export namespace ViewSwitcher {
/** Describes properties passed to a component that renders the scheduler root layout. */
interface SwitcherProps {
/** A React node to be placed in the root layout. */
currentViewName: string;
availableViewNames: string[];
onChange: (payload?: any) => void;
}
}
export interface ViewSwitcherProps {
switcherComponent: React.ComponentType<ViewSwitcher.SwitcherProps>;
}
export namespace Scheduler {
/** Describes properties passed to a component that renders the scheduler root layout. */
interface RootProps {
/** A React node to be placed in the root layout. */
children?: React.ReactNode;
}
}
export interface SchedulerProps {
/*** An array of appointment data objects. */
data: AppointmentModel[];
/** A component that renders the root layout. */
rootComponent: React.ComponentType<Scheduler.RootProps>;
/** The locale according to which dates should be formatted. */
locale: string | string[];
/***
* The scheduler's height. If the value is 'auto',
* the height equals that of the container component.
* **/
height: number | 'auto';
}
export interface ViewStateProps {
/** The current date. */
currentDate?: number | string | Date;
/** The initial date in the uncontrolled mode. */
defaultCurrentDate?: number | string | Date;
/** Handles changes to the current date. */
onCurrentDateChange?: (currentDate: Date) => void;
/** The displayed view’s name. */
currentViewName?: string;
/** The initially displayed view’s name in the uncontrolled mode. */
defaultCurrentViewName?: string;
/** Handles changes to the displayed view. */
onCurrentViewNameChange?: (viewName: string) => void;
}
export interface VerticalViewProps {
/** The view name. */
name?: string;
/** Multiplies the default view interval. */
intervalCount?: number;
/** Specifies the cell duration in minutes. */
cellDuration?: number;
/** Specifies the start hour of the view time scale. */
startDayHour?: number;
/** Specifies the end hour of the view time scale. */
endDayHour?: number;
/** A component that renders a view layout. */
layoutComponent: React.ComponentType<VerticalView.LayoutProps>;
/** A component that renders a time scale layout. */
timeScaleLayoutComponent: React.ComponentType<VerticalView.TimeScaleLayoutProps>;
/** A component that renders a time scale row. */
timeScaleRowComponent: React.ComponentType<VerticalView.RowProps>;
/** A component that renders a time scale cell. */
timeScaleCellComponent: React.ComponentType<VerticalView.TimeScaleCellProps>;
/** A component that renders a day scale layout. */
dayScaleLayoutComponent: React.ComponentType<VerticalView.DayScaleLayoutProps>;
/** A component that renders a day scale cell. */
dayScaleCellComponent: React.ComponentType<VerticalView.DayScaleCellProps>;
/** A component that renders a day scale row. */
dayScaleRowComponent: React.ComponentType<VerticalView.RowProps>;
/** A component that renders a day scale empty cell. */
dayScaleEmptyCellComponent: React.ComponentType<VerticalView.DayScaleEmptyCellProps>;
/** A component that renders a time table layout. */
timeTableLayoutComponent: React.ComponentType<VerticalView.TimeTableLayoutProps>;
/** A component that renders a time table cell. */
timeTableCellComponent: React.ComponentType<VerticalView.TimeTableCellProps>;
/** A component that renders a time table row. */
timeTableRowComponent: React.ComponentType<VerticalView.RowProps>;
/** A component that renders the appointment layer. */
appointmentLayerComponent: React.ComponentType<VerticalView.AppointmentLayerProps>;
}
export namespace VerticalView {
/** Describes properties passed to a component that renders a day view layout. */
interface LayoutProps {
/** The layout's height */
height: number | 'auto';
/** A component that renders a time scale layout. */
timeScaleComponent: React.ComponentType<VerticalView.TimeScaleLayoutProps>;
/** A component that renders a day scale layout. */
dayScaleComponent: React.ComponentType<VerticalView.DayScaleLayoutProps>;
/** A component that renders a time table layout. */
timeTableComponent: React.ComponentType<VerticalView.TimeTableLayoutProps>;
/** A component that renders a day scale empty cell. */
dayScaleEmptyCellComponent: React.ComponentType<VerticalView.DayScaleEmptyCellProps>;
layoutRef: React.RefObject<HTMLElement>;
layoutHeaderRef: React.RefObject<HTMLElement>;
}
/** Describes properties passed to a component that renders a time scale layout. */
interface TimeScaleLayoutProps {
/** Specifies the cells meta data. */
cellsData: VerticalView.CellData[][];
/** A component that renders a time scale cell. */
cellComponent: React.ComponentType<VerticalView.TimeScaleCellProps>;
/** A component that renders a time scale row. */
rowComponent: React.ComponentType<VerticalView.RowProps>;
/** A function that formats dates according to the locale. */
formatDate: FormatterFn;
}
/** Describes properties passed to a component that renders a time table layout. */
interface TimeTableLayoutProps {
/** Specifies the cells meta data. */
cellsData: VerticalView.CellData[][];
/** A component that renders a time table cell. */
cellComponent: React.ComponentType<VerticalView.TimeTableCellProps>;
/** A component that renders a time table row. */
rowComponent: React.ComponentType<VerticalView.RowProps>;
/** A function that formats dates according to the locale. */
formatDate: FormatterFn;
/** A function that accepts the table root React element. */
tableRef: React.RefObject<HTMLElement>;
}
/** Describes properties passed to a component that renders a time table cell. */
interface TimeTableCellProps {
/** Specifies the cell a start time. */
startDate?: Date;
/** Specifies the cell end time. */
endDate?: Date;
/** A React node used to render the time table cell content. */
children?: React.ReactNode;
}
/** Describes properties passed to a component that renders a day scale empty cell. */
interface DayScaleEmptyCellProps {
/** A React node used to render the row content. */
children?: React.ReactNode;
}
/** Describes properties passed to a component that renders a time scale cell. */
interface TimeScaleCellProps {
/** Specifies the cell end time. */
endDate: Date;
/** Specifies the cell start time. */
startDate: Date;
}
/** Describes properties passed to a component that renders a day scale layout. */
interface DayScaleLayoutProps {
/** Specifies the cells meta data. */
cellsData: VerticalView.CellData[][];
/** A component that renders a day scale cell. */
cellComponent: React.ComponentType<VerticalView.DayScaleCellProps>;
/** A component that renders a day scale row. */
rowComponent: React.ComponentType<VerticalView.RowProps>;
/** A function that formats dates according to the locale. */
formatDate: FormatterFn;
}
/** Describes properties passed to a component that renders a day scale cell. */
interface DayScaleCellProps {
/** Specifies the cell end time. */
startDate: Date;
/** Specifies the cell start time. */
endDate?: Date;
/** Indicates whether the cell’s date is today. */
today?: boolean;
}
/** Describes properties passed to a component that renders the appointment layer. */
interface AppointmentLayerProps {
/** A React node used to render the appointment layer content. */
children?: React.ReactNode;
}
/** Describes properties passed to a component that renders a day view row. */
interface RowProps {
/** A React node used to render the row content. */
children?: React.ReactNode;
}
/** Describes a cell data configuration object. */
export interface CellData {
/** The cell's start time. */
interface CellData {
/** Specifies the cell start time. */
startDate: Date;
/** The cell's end time. */
/** Specifies the cell end time. */
endDate: Date;
/** Indicates whether the cell’s date is today. */
today: boolean;
}
}
export namespace DayView {
/** Describes a cell data configuration object. */
interface CellData extends VerticalView.CellData {
}
/** Describes properties passed to a component that renders a day view layout. */
interface LayoutProps extends VerticalView.LayoutProps {
}
/** Describes properties passed to a component that renders a time scale layout. */
interface TimeScaleLayoutProps extends VerticalView.TimeScaleLayoutProps {
}
/** Describes properties passed to a component that renders a time scale cell. */
interface TimeScaleCellProps extends VerticalView.TimeScaleCellProps {
}
/** Describes properties passed to a component that renders a day scale layout. */
interface DayScaleLayoutProps extends VerticalView.DayScaleLayoutProps {
}
/** Describes properties passed to a component that renders a day scale cell. */
interface DayScaleCellProps extends VerticalView.DayScaleCellProps {
}
/** Describes properties passed to a component that renders a day scale empty cell. */
interface DayScaleEmptyCellProps extends VerticalView.DayScaleEmptyCellProps {
}
/** Describes properties passed to a component that renders a time table layout. */
interface TimeTableLayoutProps extends VerticalView.TimeTableLayoutProps {
}
/** Describes properties passed to a component that renders a time table cell. */
interface TimeTableCellProps extends VerticalView.TimeTableCellProps {
}
/** Describes properties passed to a component that renders the appointment layer. */
interface AppointmentLayerProps extends VerticalView.AppointmentLayerProps {
}
/** Describes properties passed to a component that renders a day view row. */
interface RowProps extends VerticalView.RowProps {
}
}
export namespace WeekView {
/** Describes a cell data configuration object. */
interface CellData extends VerticalView.CellData {
}
/** Describes properties passed to a component that renders a week view layout. */
interface LayoutProps extends VerticalView.LayoutProps {
}
/** Describes properties passed to a component that renders a time scale layout. */
interface TimeScaleLayoutProps extends VerticalView.TimeScaleLayoutProps {
}
/** Describes properties passed to a component that renders a time scale cell. */
interface TimeScaleCellProps extends VerticalView.TimeScaleCellProps {
}
/** Describes properties passed to a component that renders a day scale layout. */
interface DayScaleLayoutProps extends VerticalView.DayScaleLayoutProps {
}
/** Describes properties passed to a component that renders a day scale cell. */
interface DayScaleCellProps extends VerticalView.DayScaleCellProps {
}
/** Describes properties passed to a component that renders a day scale empty cell. */
interface DayScaleEmptyCellProps extends VerticalView.DayScaleEmptyCellProps {
}
/** Describes properties passed to a component that renders a time table layout. */
interface TimeTableLayoutProps extends VerticalView.TimeTableLayoutProps {
}
/** Describes properties passed to a component that renders a time table cell. */
interface TimeTableCellProps extends VerticalView.TimeTableCellProps {
}
/** Describes properties passed to a component that renders the appointment layer. */
interface AppointmentLayerProps extends VerticalView.AppointmentLayerProps {
}
/** Describes properties passed to a component that renders a week view row. */
interface RowProps extends VerticalView.RowProps {
}
}
export interface WeekViewProps extends VerticalViewProps {
/** Specifies the days of week that should not be displayed on the view. Accepts an array of zero-bazed day indexes (0 - Sunday). */
excludedDays?: number[];
/** Specifies the first day of week. */
firstDayOfWeek?: number;
}
type MonthViewPropsType = Pick<VerticalViewProps, Exclude<keyof VerticalViewProps, 'timeScaleLayoutComponent' | 'timeScaleRowComponent' | 'timeScaleCellComponent' | 'layoutComponent' | 'dayScaleEmptyCellComponent'>> & Pick<WeekViewProps, 'firstDayOfWeek'>;
export interface MonthViewProps extends MonthViewPropsType {
/** A component that renders a view layout. */
layoutComponent: React.ComponentType<MonthView.LayoutProps>;
}
export namespace MonthView {
/** Describes properties passed to a component that renders the appointment layer. */
interface AppointmentLayerProps extends VerticalView.AppointmentLayerProps {
}
/** Describes a cell data configuration object. */
interface CellData {
/** Specifies the cell start time. */
startDate: Date;
/** Specifies the cell end time. */
endDate: Date;
/** Indicates whether the cell’s date is not in the current month. */
otherMonth: boolean;
/** Indicates whether the cell’s date is today. */
today: boolean;
}
/** Describes properties passed to a component that renders a time scale cell. */
interface TimeTableCellProps {
/** Specifies the cell start time. */
startDate?: Date;
/** Specifies the cell end time. */
endDate?: Date;
/** Indicates whether the cell’s date is not in the current month. */
otherMonth?: boolean;
/** Indicates whether the cell’s date is today. */
today?: boolean;
}
/** Describes properties passed to a component that renders a day scale cell. */
interface DayScaleCellProps {
/** Specifies the cell start time. */
startDate: Date;
/** Specifies the cell end time. */
endDate?: Date;
}
/** Describes properties passed to a component that renders a row. */
interface RowProps {
/** A React node used to render the row content. */
children?: React.ReactNode;
}
/** Describes properties passed to a component that renders a day scale layout. */
interface DayScaleLayoutProps {
/** Specifies the cells meta data. */
cellsData: MonthView.CellData[][];
/** A component that renders a day scale cell. */
cellComponent: React.ComponentType<MonthView.DayScaleCellProps>;
/** A component that renders a day scale row. */
rowComponent: React.ComponentType<MonthView.RowProps>;
}
/** Describes properties passed to a component that renders a time table layout. */
interface TimeTableLayoutProps {
/** Specifies the cells meta data. */
cellsData: MonthView.CellData[][];
/** A function that accepts the table’s root React element. */
tableRef: React.RefObject<HTMLElement>;
/** A component that renders a time table cell. */
cellComponent: React.ComponentType<MonthView.TimeTableCellProps>;
/** A component that renders a time table row. */
rowComponent: React.ComponentType<MonthView.RowProps>;
}
interface LayoutProps {
/** A component that renders a day scale layout. */
dayScaleComponent: React.ComponentType<MonthView.DayScaleLayoutProps>;
/** A component that renders a time table layout. */
timeTableComponent: React.ComponentType<MonthView.TimeTableLayoutProps>;
/** A component that renders a day scale empty cell. */
layoutRef: React.RefObject<HTMLElement>;
layoutHeaderRef: React.RefObject<HTMLElement>;
/** The layout's height */
height: number | 'auto';
}
}
export namespace AllDayPanel {
/** Describes a cell data configuration object. */
interface CellData {
/** The cell’s start time. */
startDate: Date;
/** The cell’s end time. */
endDate: Date;
}
/** Describes properties passed to a component that renders an All Day panel layout. */
export interface LayoutProps {
/** Cells' meta data. */
cellsData: Array<Array<AllDayPanel.CellData>>;
/** A function that accepts the All Day panel's root React element. */
interface LayoutProps {
/** Cells’ meta data. */
cellsData: AllDayCell[];
/** A function that accepts the All Day panel’s root React element. */
allDayPanelRef: (ref: React.ReactInstance) => void;

@@ -29,53 +426,35 @@ /** A component that renders an All Day panel cell. */

}
}
export namespace AllDayPanel {
/** Describes properties passed to a component that renders an All Day panel cell. */
export interface CellProps {
/** The cell's start time. */
interface CellProps {
/** The cell’s start time. */
startDate: Date;
/** The cell's end time. */
/** The cell’s end time. */
endDate: Date;
}
}
export namespace AllDayPanel {
/** Describes properties passed to a component that renders an All Day panel row. */
export interface RowProps {
interface RowProps {
/** A React node used to render the row content. */
children?: React.ReactNode;
}
}
export namespace AllDayPanel {
/** Describes properties passed to a component that renders a title cell. */
export interface TitleCellProps {
interface TitleCellProps {
/** Returns a localization message by the message key. */
getMessage: (messageKey: string) => string;
}
}
export namespace AllDayPanel {
/** Describes properties passed to a component that renders the appointment layer. */
export interface AppointmentLayerProps {
/** A React node used to render the row content. */
interface AppointmentLayerProps {
/** A React node used to render the appointment layer content. */
children?: React.ReactNode;
}
}
export namespace AllDayPanel {
/** Describes properties passed to a component that renders an All Day panel container. */
export interface ContainerProps {
/** A React node used to render the row content. */
interface ContainerProps {
/** A React node used to render the All Day panel container content. */
children: React.ReactNode;
}
}
export namespace AllDayPanel {
export interface LocalizationMessages {
/** The All Day panel's title. */
/** Localization Messages */
interface LocalizationMessages {
/** The All Day panel’s title. */
allDay?: string;
}
}
export interface AllDayPanelProps {

@@ -98,111 +477,73 @@ /** A component that renders an All Day panel layout. */

/** A plugin that renders the All Day Panel. */
export declare const AllDayPanel: React.ComponentType<AllDayPanelProps>;
// -------------------------------------------------------------------------------------------------
// AppointmentForm
// -------------------------------------------------------------------------------------------------
export namespace AppointmentForm {
/** Properties passed to a component that renders the appointment form's popup. */
export interface PopupProps {
/** Specifies whether the popup is visible. */
visible?: boolean;
/** A React node used to render the popup content. */
children: React.ReactNode;
export namespace Toolbar {
/** Describes properties passed to a component that renders the toolbar root element. */
interface RootProps {
/** A React node to be placed in the toolbar. */
children?: React.ReactNode;
}
}
export namespace AppointmentForm {
/** Properties passed to a component that renders the appointment form's container. */
export interface ContainerProps {
/** A React node used to render the container content. */
children: React.ReactNode;
interface FlexibleSpaceProps {
/** A React node that should be placed inside the empty area. */
children?: React.ReactNode;
}
}
export namespace AppointmentForm {
/** Properties passed to a component that renders the appointment form's scrollable area. */
export interface ScrollableAreaProps {
/** A React node used to render the scrollable area content. */
children: React.ReactNode;
}
export interface ToolbarProps {
/** A component that renders the toolbar root element. */
rootComponent: React.ComponentType<Toolbar.RootProps>;
/** A component that renders the toolbar’s empty area. */
flexibleSpaceComponent: React.ComponentType<Toolbar.FlexibleSpaceProps>;
}
export namespace AppointmentForm {
/** Properties passed to a component that renders the appointment form's static area. */
export interface StaticAreaProps {
/** A React node used to render the static area content. */
children: React.ReactNode;
}
/** Describes uncommitted changes made to the scheduler data. */
export interface ChangeSet {
/** An array of rows to be created. */
added?: {
[key: string]: object;
};
/** An associative array that stores changes made to existing data. Each array item specifies changes made to a row. The item's key specifies the associated row's ID. */
changed?: {
[key: string]: object;
};
/** An array of IDs representing rows to be deleted. */
deleted?: number | string;
}
export namespace AppointmentForm {
export interface LocalizationMessages {
/** The all day editor's label text. */
allDayLabel?: string;
/** The title editor's label text. */
titleLabel?: string;
/** The start date editor's label text. */
startDateLabel?: string;
/** The end date editor's label text. */
endDateLabel?: string;
/** The commit button's text. */
commitCommand?: string;
/** The cancel button's text. */
cancelCommand?: string;
}
export interface EditingStateProps {
/** The identifier of an appointment being edited. */
editingAppointmentId?: number | string;
/** The initial value of the editingAppointmentId property in uncontrolled mode. */
defaultEditingAppointmentId?: number | string;
/** Handles changes to the editingAppointmentId property value. */
onEditingAppointmentIdChange?: (editingAppointmentId: number | string) => void;
/** A created but not committed appointment. */
addedAppointment?: object;
/** The initial value of the addedAppointment property in uncontrolled mode. */
defaultAddedAppointment?: object;
/** Handles changes to the addedAppointment property value. */
onAddedAppointmentChange?: (addedAppointment: object) => void;
/** Uncommitted appointment changes. */
appointmentChanges?: {
[key: string]: object;
};
/** The initial value of the appointmentChanges property in uncontrolled mode. */
defaultAppointmentChanges?: {
[key: string]: object;
};
/** Handles changes to the appointmentChanges property value. */
onAppointmentChangesChange?: (appointmentChanges: {
[key: string]: any;
}) => void;
/** Handles commiting appointment changes. */
onCommitChanges: (changes: ChangeSet) => void;
}
export interface AppointmentFormProps {
/** Specifies the appointment form's visibility. */
visible?: boolean;
/** Handles changes to the appointment form's visibility. */
onVisibilityChange?: (visible: boolean) => void;
/** Specifies the appointment's data that the form displays. */
appointmentData?: AppointmentModel;
/** Handles changes to the appointment's data. */
onAppointmentDataChange?: (appointmentData: AppointmentModel) => void;
/** Specifies the appointment form is read-only. */
readOnly?: boolean;
/** A component that renders the appointment form's popup. */
popupComponent: React.ComponentType<AppointmentForm.PopupProps>;
/** A component that renders the appointment form's container. */
containerComponent: React.ComponentType<AppointmentForm.ContainerProps>;
/** A component that renders the appointment form's scrollable area. */
scrollableAreaComponent: React.ComponentType<AppointmentForm.ScrollableAreaProps>;
/** A component that renders the appointment form's static area. */
staticAreaComponent: React.ComponentType<AppointmentForm.StaticAreaProps>;
/** An object that specifies localization messages. */
messages?: AppointmentForm.LocalizationMessages;
}
/** The AppointmentForm plugin renders a form that visualizes appointment's data and allows a user to modify this data. */
export declare const AppointmentForm: React.ComponentType<AppointmentFormProps>;
// -------------------------------------------------------------------------------------------------
// AppointmentTooltip
// -------------------------------------------------------------------------------------------------
/** An appointment's meta data object. */
export interface AppointmentMeta {
/** A React component instance or a DOM element that is used to position the tooltip. */
target: React.ReactInstance;
/** The appointment's displayed metadata. */
data: AppointmentModel;
}
export namespace AppointmentTooltip {
/** Describes properties passed to a component that renders a tooltip layout. */
export interface LayoutProps {
/** Specifies the Open button's visibility. */
interface LayoutProps {
/** Specifies the Open button’s visibility. */
showOpenButton: boolean;
/** Specifies the Close button's visibility. */
/** Specifies the Close button’s visibility. */
showCloseButton: boolean;
/** Specifies the Delete button's visibility. */
/** Specifies the Delete button’s visibility. */
showDeleteButton: boolean;
/** A command button's identifier list. */
/** A command button’s identifier list. */
commandButtonIds: Array<string>;
/** A function that formats dates according to the locale. */
formatDate: (date: Date, options: any) => string;
/** An event raised when the Open button is clicked. The event handler should open the appointment form. */

@@ -212,5 +553,5 @@ onOpenButtonClick?: () => void;

onDeleteButtonClick?: () => void;
/** The appointment's displayed metadata. */
/** The appointment’s displayed metadata. */
appointmentMeta?: AppointmentMeta;
/** Specifies the tooltip's visibility. */
/** Specifies the tooltip’s visibility. */
visible?: boolean;

@@ -226,8 +567,5 @@ /** An event that hides the tooltip. */

}
}
export namespace AppointmentTooltip {
/** Describes properties passed to a component that renders the tooltip header. */
export interface HeaderProps {
/** The appointment's displayed metadata. */
interface HeaderProps {
/** The appointment’s displayed metadata. */
appointmentData?: AppointmentModel;

@@ -237,8 +575,5 @@ /** A React node used to render the tooltip header. */

}
}
export namespace AppointmentTooltip {
/** Describes properties passed to a component that renders the tooltip content. */
export interface ContentProps {
/** The appointment's displayed metadata. */
interface ContentProps {
/** The appointment’s displayed metadata. */
appointmentData?: AppointmentModel;

@@ -248,9 +583,6 @@ /** A React node used to render the tooltip content. */

}
}
export namespace AppointmentTooltip {
/** Describes properties passed to a component that renders a command button. */
export interface CommandButtonProps {
interface CommandButtonProps {
/** The command identifier. */
id?: `open` | `delete` | `close`;
id?: 'open' | 'delete' | 'close';
/** An event that executes the command. */

@@ -260,15 +592,14 @@ onExecute?: () => void;

}
export interface AppointmentTooltipProps {
/** Specifies the Open button's visibility. */
/** Specifies the Open button’s visibility. */
showOpenButton?: boolean;
/** Specifies the Close button's visibility. */
/** Specifies the Close button’s visibility. */
showCloseButton?: boolean;
/** Specifies the Delete button's visibility. */
/** Specifies the Delete button’s visibility. */
showDeleteButton?: boolean;
/** Specifies the tooltip's visibility. */
/** Specifies the tooltip’s visibility. */
visible?: boolean;
/** The appointment's displayed metadata. */
/** The appointment’s displayed metadata. */
appointmentMeta?: AppointmentMeta;
/** Handles the tooltip's visibility chages. */
/** Handles the tooltip’s visibility chages. */
onVisibilityChange?: (visible: boolean) => void;

@@ -287,565 +618,237 @@ /** Handles the meta data changes. */

/** The `AppointmentTooltip` plugin allows you to display information about an appointment in a tooltip. */
export declare const AppointmentTooltip: React.ComponentType<AppointmentTooltipProps>;
// -------------------------------------------------------------------------------------------------
// Appointments
// -------------------------------------------------------------------------------------------------
export namespace Appointments {
/** Properties passed to a component that renders an appointment. */
export interface AppointmentProps {
/** A React node used to render the appointment content. */
export namespace AppointmentForm {
/** Properties passed to a component that renders the appointment form’s popup. */
interface PopupProps {
/** Specifies whether the popup is visible. */
visible?: boolean;
/** A React node used to render the popup content. */
children: React.ReactNode;
/** An object that specifies the appointment data. */
data: object;
/** Specifies whether the appointment is draggable. */
draggable: boolean;
/** A function that handles a click on the appointment. */
onClick?: (e: object) => void;
/** A function that handles a double click on the appointment. */
onDoubleClick?: (e: object) => void;
}
}
export namespace Appointments {
/** Properties passed to a component that renders the appointment content. */
export interface AppointmentContentProps {
/** A React node used to render the appointment content. */
/** Properties passed to a component that renders the appointment form’s container. */
interface ContainerProps {
/** A React node used to render the container content. */
children: React.ReactNode;
/** An object that represents appointment data. */
data: object;
/** A function that formats dates according to the locale. */
formatDate: (date: Date, options: any) => string;
/** A component that renders an icon for recurring appointments. */
recurringIconComponent: React.ComponentType<object>;
}
}
export namespace Appointments {
/** Properties passed to a component that renders an element which indicates the appointment is divided. */
export interface SplitIndicatorProps {
/** Specifies whether the element is rendered at the start or end of the divided appointment. */
position: 'start' | 'end';
/** Specifies whether the appointment is vertical or horizontal. */
appointmentType: 'vertical' | 'horizontal';
/** Properties passed to a component that renders the appointment form’s scrollable area. */
interface ScrollableAreaProps {
children: React.ReactNode;
}
}
export namespace Appointments {
/** Properties passed to a component that renders a container for the appointment. */
export interface ContainerProps {
/** An object that configures the appointment's geometry and position. */
style: object;
}
}
export interface AppointmentsProps {
/** A component that renders an appointment. */
appointmentComponent: React.ComponentType<Appointments.AppointmentProps>;
/** A component that renders the appointment content. */
appointmentContentComponent: React.ComponentType<Appointments.AppointmentContentProps>;
/** A component that renders an element which indicates the appointment is divided. */
splitIndicatorComponent: React.ComponentType<Appointments.SplitIndicatorProps>;
/** A component that renders an icon for recurring appointments. */
recurringIconComponent: React.ComponentType<object>;
/** A component that renders a container for the appointment. */
containerComponent: React.ComponentType<Appointments.ContainerProps>;
}
/** A plugin that renders appointments. */
export declare const Appointments: React.ComponentType<AppointmentsProps>;
// -------------------------------------------------------------------------------------------------
// DateNavigator
// -------------------------------------------------------------------------------------------------
export namespace DateNavigator {
/** Properties passed to a component that renders the date navigator's root element. */
export interface RootProps {
/** A component that renders the date navigator's navigation buttons. */
navigationButtonComponent: React.ComponentType<DateNavigator.NavigationButtonProps>;
/** A component that renders a button that invokes the date navigator. */
openButtonComponent: React.ComponentType<DateNavigator.OpenButtonProps>;
/** Text displayed in the date navigator. */
navigatorText?: string;
/** A function that accepts the date navigator's root element. */
rootRef: (ref: React.ReactInstance) => void;
/** An event raised when the date navigator should be shown or hidden. */
onVisibilityToggle: () => void;
/** An event raised when a navigation button is clicked. The event handler should switch the date navigator to the next or previous date. */
onNavigate: (direction: 'forward' | 'back') => void;
}
}
export namespace DateNavigator {
/** Properties passed to a component that renders the date navigator's overlay element. */
export interface OverlayProps {
/** Specifies whether the overlay is visible. */
visible?: boolean;
/** A React component instance or a DOM element that is used to position the overlay element. */
target?: React.ReactInstance;
/** An event raised when the date navigator should be hidden. */
onHide: () => void;
/** A React node used to render the overlay content. */
/** Properties passed to a component that renders the appointment form’s static area. */
interface StaticAreaProps {
/** A React node used to render the static area content. */
children: React.ReactNode;
}
}
export namespace DateNavigator {
/** Properties passed to a component that renders the date navigator's open button. */
export interface OpenButtonProps {
/** An event raised when the date navigator should be shown or hidden. */
onVisibilityToggle: () => void;
/** The button text. */
text?: string;
/** Localization Messages */
interface LocalizationMessages {
/** The all day editor’s label text. */
allDayLabel?: string;
/** The title editor’s label text. */
titleLabel?: string;
/** The start date editor’s label text. */
startDateLabel?: string;
/** The end date editor’s label text. */
endDateLabel?: string;
/** The commit button’s text. */
commitCommand?: string;
/** The cancel button’s text. */
cancelCommand?: string;
}
}
export namespace DateNavigator {
/** Properties passed to a component that renders the date navigator's navigation button. */
export interface NavigationButtonProps {
/** The button type. */
type: 'forward' | 'back';
/** An event raised when the button is clicked. */
onClick?: (e: object) => void;
}
export interface AppointmentFormProps {
/** Specifies the appointment form’s visibility. */
visible?: boolean;
/** Handles changes to the appointment form’s visibility. */
onVisibilityChange?: (visible: boolean) => void;
/** Specifies the appointment’s data that the form displays. */
appointmentData?: AppointmentModel;
/** Handles changes to the appointment’s data. */
onAppointmentDataChange?: (appointmentData: AppointmentModel) => void;
/** Specifies the appointment form is read-only. */
readOnly?: boolean;
/** A component that renders the appointment form’s popup. */
popupComponent: React.ComponentType<AppointmentForm.PopupProps>;
/** A component that renders the appointment form’s container. */
containerComponent: React.ComponentType<AppointmentForm.ContainerProps>;
/** A component that renders the appointment form’s scrollable area. */
scrollableAreaComponent: React.ComponentType<AppointmentForm.ScrollableAreaProps>;
/** A component that renders the appointment form’s static area. */
staticAreaComponent: React.ComponentType<AppointmentForm.StaticAreaProps>;
/** An object that specifies localization messages. */
messages?: AppointmentForm.LocalizationMessages;
}
export interface DateNavigatorProps {
/** A component that renders the date navigator's root element. */
rootComponent: React.ComponentType<DateNavigator.RootProps>;
/** A component that renders the date navigator's overlay element. */
overlayComponent: React.ComponentType<DateNavigator.OverlayProps>;
/** A component that renders a button that invokes the date navigator. */
openButtonComponent: React.ComponentType<DateNavigator.OpenButtonProps>;
/** A component that renders the date navigator's navigation buttons. */
navigationButtonComponent: React.ComponentType<DateNavigator.NavigationButtonProps>;
}
/** A plugin that renders the Scheduler's date navigator. */
export declare const DateNavigator: React.ComponentType<DateNavigatorProps>;
// -------------------------------------------------------------------------------------------------
// DayView
// -------------------------------------------------------------------------------------------------
export namespace DayView {
/** Describes a cell data configuration object. */
export interface CellData {
/** Specifies the cell start time. */
startDate: Date;
/** Specifies the cell end time. */
endDate: Date;
/** Indicates whether the cell's date is today. */
today: boolean;
}
}
export namespace DayView {
/** Describes properties passed to a component that renders a day view layout. */
export interface LayoutProps {
/** A component that renders a time scale layout. */
timeScaleComponent: React.ComponentType<DayView.TimeScaleLayoutProps>;
/** A component that renders a day scale layout. */
dayScaleComponent: React.ComponentType<DayView.DayScaleLayoutProps>;
/** A component that renders a time table layout. */
timeTableComponent: React.ComponentType<DayView.TimeTableLayoutProps>;
/** A component that renders a day scale empty cell. */
dayScaleEmptyCellComponent: React.ComponentType<DayView.DayScaleEmptyCellProps>;
}
}
export namespace DayView {
/** Describes properties passed to a component that renders a time scale layout. */
export interface TimeScaleLayoutProps {
/** Specifies the cells meta data. */
cellsData: Array<Array<DayView.CellData>>;
/** A component that renders a time scale cell. */
cellComponent: React.ComponentType<DayView.TimeScaleCellProps>;
/** A component that renders a time scale row. */
rowComponent: React.ComponentType<DayView.RowProps>;
/** A function that formats dates according to the locale. */
formatDate: (date: Date, options: any) => string;
}
}
export namespace DayView {
/** Describes properties passed to a component that renders a time scale cell. */
export interface TimeScaleCellProps {
/** Specifies the cell end time. */
endDate: Date;
/** Specifies the cell start time. */
startDate?: Date;
/** A function that formats dates according to the locale. */
formatDate: (date: Date, options: any) => string;
}
}
export namespace DayView {
/** Describes properties passed to a component that renders a day scale layout. */
export interface DayScaleLayoutProps {
/** Specifies the cells meta data. */
cellsData: Array<Array<DayView.CellData>>;
/** A component that renders a day scale cell. */
cellComponent: React.ComponentType<DayView.DayScaleCellProps>;
/** A component that renders a day scale row. */
rowComponent: React.ComponentType<DayView.RowProps>;
/** A function that format a date by locale. */
formatDate: (date: Date, options: any) => string;
}
}
export namespace DayView {
/** Describes properties passed to a component that renders a day scale cell. */
export interface DayScaleCellProps {
/** Specifies the cell end time. */
startDate: Date;
/** Specifies the cell start time. */
endDate?: Date;
/** Indicates whether the cell's date is today. */
today?: boolean;
/** A function that format a date by locale. */
formatDate: (date: Date, options: any) => string;
}
}
export namespace DayView {
/** Describes properties passed to a component that renders a day scale empty cell. */
export interface DayScaleEmptyCellProps {
/** A React node used to render the row content. */
children?: React.ReactNode;
}
}
export namespace DayView {
/** Describes properties passed to a component that renders a time table layout. */
export interface TimeTableLayoutProps {
/** Specifies the cells meta data. */
cellsData: Array<Array<DayView.CellData>>;
/** A function that accepts the table root React element. */
tableRef: (ref: React.ReactInstance) => void;
/** A component that renders a time table cell. */
cellComponent: React.ComponentType<DayView.TimeTableCellProps>;
/** A component that renders a time table row. */
rowComponent: React.ComponentType<DayView.RowProps>;
/** A function that format a date by locale. */
formatDate: (date: Date, options: any) => string;
}
}
export namespace DayView {
/** Describes properties passed to a component that renders a time table cell. */
export interface TimeTableCellProps {
/** Specifies the cell a start time. */
startDate?: Date;
/** Specifies the cell end time. */
endDate?: Date;
/** A React node used to render the time table cell content. */
children?: React.ReactNode;
}
}
export namespace DayView {
/** Describes properties passed to a component that renders the appointment layer. */
export interface AppointmentLayerProps {
/** A React node used to render the appointment layer content. */
children?: React.ReactNode;
}
}
export namespace DayView {
/** Describes properties passed to a component that renders a day view row. */
export interface RowProps {
/** A React node used to render the row content. */
children?: React.ReactNode;
}
}
export interface DayViewProps {
/** The view name. Required if you use several `DayView` plugins. */
name?: string;
/** Multiplies the default view interval. */
intervalCount?: number;
/** Specifies the cell duration in minutes. */
cellDuration?: number;
/** Specifies the start hour of the view time scale. */
startDayHour?: number;
/** Specifies the end hour of the view time scale. */
endDayHour?: number;
/** A component that renders a day view layout. */
layoutComponent: React.ComponentType<DayView.LayoutProps>;
/** A component that renders a time scale layout. */
timeScaleLayoutComponent: React.ComponentType<DayView.TimeScaleLayoutProps>;
/** A component that renders a time scale row. */
timeScaleRowComponent: React.ComponentType<DayView.RowProps>;
/** A component that renders a time scale cell. */
timeScaleCellComponent: React.ComponentType<DayView.TimeScaleCellProps>;
/** A component that renders a day scale layout. */
dayScaleLayoutComponent: React.ComponentType<DayView.DayScaleLayoutProps>;
/** A component that renders a day scale cell. */
dayScaleCellComponent: React.ComponentType<DayView.DayScaleCellProps>;
/** A component that renders a day scale row. */
dayScaleRowComponent: React.ComponentType<DayView.RowProps>;
/** A component that renders a day scale empty cell. */
dayScaleEmptyCellComponent: React.ComponentType<DayView.DayScaleEmptyCellProps>;
/** A component that renders a time table layout. */
timeTableLayoutComponent: React.ComponentType<DayView.TimeTableLayoutProps>;
/** A component that renders a time table cell. */
timeTableCellComponent: React.ComponentType<DayView.TimeTableCellProps>;
/** A component that renders a time table row. */
timeTableRowComponent: React.ComponentType<DayView.RowProps>;
/** A component that renders the appointment layer. */
appointmentLayerComponent: React.ComponentType<DayView.AppointmentLayerProps>;
}
/** A plugin that renders Scheduler data for a day. This plugin arranges appointments from top to bottom. If their time intervals overlap, their width is decreased and they are placed next to each other. */
export declare const DayView: React.ComponentType<DayViewProps>;
// -------------------------------------------------------------------------------------------------
// DragDropProvider
// -------------------------------------------------------------------------------------------------
export namespace DragDropProvider {
/** Describes properties of the component that renders the appointment being dragged. */
export interface DraftAppointmentProps {
/** Specifies the appointment's data. */
data: AppointmentModel;
/** Configures the appointment's geometry and position. */
style: object;
/** Specifies the appointment's type. */
type: string;
/** **true** if the appointment is continued from the previous day/week/month/year. */
fromPrev: boolean;
/** **true** if the appointment continues on the next day/week/month/year. */
toNext: boolean;
}
/** Describes properties of the component that renders a container for the appointment being dragged. */
interface ContainerProps {
/** Represents the appointment being dragged. */
children: React.ReactNode;
}
/** Describes properties of the component that renders the appointment being dragged. */
interface DraftAppointmentProps {
/** Specifies the appointment’s data. */
data: AppointmentModel;
/** Configures the appointment’s geometry and position. */
style: React.CSSProperties;
/** Specifies the appointment’s type. */
type: string;
/***
* true if the appointment is continued from
* the previous day/week/month/year.
* */
fromPrev: boolean;
/** true if the appointment continues on the next day/week/month/year. */
toNext: boolean;
}
/** Describes properties of the component that renders a copy of the appointment being dragged in its previous location. */
interface SourceAppointmentProps {
/** Specifies the appointment’s data. */
data: AppointmentModel;
/** Specifies the appointment’s type. */
type: string;
}
/** Describes properties of the component that renders a handle used to resize the appointment. */
interface ResizeProps {
/** Specifies the handle’s position in the appointment. */
position: 'start' | 'end';
/** Specifies whether the appointment is vertical or horizontal. */
appointmentType: 'vertical' | 'horizontal';
}
}
export namespace DragDropProvider {
/** Describes properties of the component that renders a copy of the appointment being dragged in its previous location. */
export interface SourceAppointmentProps {
/** Specifies the appointment's data. */
data: AppointmentModel;
/** Specifies the appointment's type. */
type: string;
}
}
export namespace DragDropProvider {
/** Describes properties of the component that renders a handle used to resize the appointment. */
export interface ResizeProps {
/** Specifies the handle's position in the appointment. */
position: 'start' | 'end';
/** Specifies whether the appointment is vertical or horizontal. */
appointmentType: 'vertical' | 'horizontal';
}
}
export namespace DragDropProvider {
/** Describes properties of the component that renders a container for the appointment being dragged. */
export interface ContainerProps {
/** Represents the appointment being dragged. */
children: React.ReactNode;
}
}
export interface DragDropProviderProps {
/** A function that specifies draggable appointments. */
allowDrag?: (appointmentData: AppointmentModel) => boolean;
/** A function that specifies resizable appointments. */
allowResize?: (appointmentData: AppointmentModel) => boolean;
/** A component that renders the appointment being dragged. */
draftAppointmentComponent: React.ComponentType<DragDropProvider.DraftAppointmentProps>;
/** A component that renders a copy of the appointment being dragged in its previous location. */
sourceAppointmentComponent: React.ComponentType<DragDropProvider.SourceAppointmentProps>;
/** A component that renders a handle used to resize the appointment. */
resizeComponent: React.ComponentType<DragDropProvider.ResizeProps>;
/** A component that renders a container for the appointment being dragged. */
containerComponent: React.ComponentType<DragDropProvider.ContainerProps>;
/** A function that specifies draggable appointments. */
allowDrag?: (appointmentData: AppointmentModel) => boolean;
/** A function that specifies resizable appointments. */
allowResize?: (appointmentData: AppointmentModel) => boolean;
/** A component that renders the appointment being dragged. */
draftAppointmentComponent: React.ComponentType<DragDropProvider.DraftAppointmentProps>;
/** A component that renders a copy of the appointment being dragged in its previous location. */
sourceAppointmentComponent: React.ComponentType<DragDropProvider.SourceAppointmentProps>;
/** A component that renders a handle used to resize the appointment. */
resizeComponent: React.ComponentType<DragDropProvider.ResizeProps>;
/***
* A component that renders a container for the appointment being dragged.
* */
containerComponent: React.ComponentType<DragDropProvider.ContainerProps>;
}
/** A plugin that enables users to edit appointments via drag-and-drop. */
export declare const DragDropProvider: React.ComponentType<DragDropProviderProps>;
// -------------------------------------------------------------------------------------------------
// EditingState
// -------------------------------------------------------------------------------------------------
/** Describes uncommitted changes made to the scheduler data. */
export interface ChangeSet {
/** An appointment to be created. */
added?: AppointmentModel;
/** Changes made to an appointment. The item's key specifies the associated appointment's ID. */
changed?: { [key: string]: object };
/** The identifier of an appointment to be deleted. */
deleted?: number | string;
export namespace DateNavigator {
/** Describes properties passed to a component that renders the scheduler root layout. */
interface RootProps {
/** A component that renders the date navigator’s navigation buttons. */
navigationButtonComponent: React.ComponentType<DateNavigator.NavigationButtonProps>;
/** A component that renders a button that invokes the date navigator. */
openButtonComponent: React.ComponentType<DateNavigator.OpenButtonProps>;
/** Text displayed in the date navigator. */
navigatorText?: string;
/** A function that accepts the date navigator’s root element. */
rootRef: (ref: React.ReactInstance) => void;
/** An event raised when the date navigator should be shown or hidden. */
onVisibilityToggle: () => void;
/***
* An event raised when a navigation button is clicked.
* The event handler should switch the date navigator to the next or previous date.
* */
onNavigate: (direction: 'forward' | 'back' | undefined, nextDate: string | Date | number) => any;
}
/** Properties passed to a component that renders the date navigator’s overlay element. */
interface OverlayProps {
/** Specifies whether the overlay is visible. */
visible?: boolean;
/** A React component instance or a DOM element that is used to position the overlay element. */
target?: React.ReactInstance;
/** An event raised when the date navigator should be hidden. */
onHide: () => void;
/** A React node used to render the overlay content. */
children: React.ReactNode;
}
/** Properties passed to a component that renders the date navigator’s open button. */
interface OpenButtonProps {
/** An event raised when the date navigator should be shown or hidden. */
onVisibilityToggle: () => void;
/** The button text. */
text?: string;
}
/** Properties passed to a component that renders the date navigator’s navigation button. */
interface NavigationButtonProps {
/** The button type. */
type: 'forward' | 'back';
/** An event raised when the button is clicked. */
onClick?: (e: any) => void;
}
}
export interface EditingStateProps {
/** The identifier of an appointment being edited. */
editingAppointmentId?: number | string;
/** The initial value of the `editingAppointmentId` property in uncontrolled mode. */
defaultEditingAppointmentId?: number | string;
/** Handles changes to the `editingAppointmentId` property value. */
onEditingAppointmentIdChange?: (editingAppointmentId: number | string) => void;
/** A created but not committed appointment. */
addedAppointment?: object;
/** The initial value of the `addedAppointment` property in uncontrolled mode. */
defaultAddedAppointment?: object;
/** Handles changes to the `addedAppointment` property value. */
onAddedAppointmentChange?: (addedAppointment: object) => void;
/** Uncommitted appointment changes. */
appointmentChanges?: { [key: string]: object };
/** The initial value of the `appointmentChanges` property in uncontrolled mode. */
defaultAppointmentChanges?: { [key: string]: object };
/** Handles changes to the `appointmentChanges` property value. */
onAppointmentChangesChange?: (appointmentChanges: { [key: string]: any }) => void;
/** Handles commiting appointment changes. */
onCommitChanges: (changes: ChangeSet) => void;
export interface DateNavigatorProps {
/** A component that renders the date navigator’s root element. */
rootComponent: React.ComponentType<DateNavigator.RootProps>;
/** A component that renders the date navigator’s overlay element. */
overlayComponent: React.ComponentType<DateNavigator.OverlayProps>;
/** A component that renders a button that invokes the date navigator. */
openButtonComponent: React.ComponentType<DateNavigator.OpenButtonProps>;
/** A component that renders the date navigator’s navigation buttons. */
navigationButtonComponent: React.ComponentType<DateNavigator.NavigationButtonProps>;
}
/** A plugin that manages the scheduler appointment editing state. */
export declare const EditingState: React.ComponentType<EditingStateProps>;
// -------------------------------------------------------------------------------------------------
// MonthView
// -------------------------------------------------------------------------------------------------
export namespace MonthView {
/** Describes a cell data configuration object. */
export interface CellData {
/** Specifies the cell start time. */
startDate: Date;
/** Specifies the cell end time. */
endDate: Date;
/** Indicates whether the cell's date is not in the current month. */
otherMonth: boolean;
/** Indicates whether the cell's date is today. */
today: boolean;
}
export namespace Appointments {
/** Properties passed to a component that renders an appointment. */
interface AppointmentProps {
/** A React node used to render the appointment content. */
children: React.ReactNode;
/** An object that specifies the appointment data. */
data: AppointmentModel;
/** Specifies whether the appointment is draggable. */
draggable: boolean;
/** A function that handles a click on the appointment. */
onClick?: (e: any) => void;
/** A function that handles a double click on the appointment. */
onDoubleClick?: (e: any) => void;
}
/** Properties passed to a component that renders the appointment content. */
interface AppointmentContentProps {
/** A React node used to render the appointment content. */
children?: React.ReactNode;
/** An object that represents appointment data. */
data: AppointmentModel;
/** A component that renders an icon for recurring appointments. */
recurringIconComponent: React.ComponentType<object>;
/** Specifies whether the appointment is vertical or horizontal. */
type: 'vertical' | 'horizontal';
/** A function that formats dates according to the locale. */
formatDate: FormatterFn;
}
/***
* Properties passed to a component that renders an element
* which indicates the appointment is divided.
* */
interface SplitIndicatorProps {
/** Specifies whether the element is rendered at the start or end of the divided appointment. */
position: 'start' | 'end';
/** Specifies whether the appointment is vertical or horizontal. */
appointmentType: 'vertical' | 'horizontal';
}
/** Properties passed to a component that renders a container for the appointment. */
interface ContainerProps {
/** An object that configures the appointment’s geometry and position. */
style: any;
}
}
export namespace MonthView {
/** Describes properties passed to a component that renders a month view layout. */
export interface LayoutProps {
/** A component that renders a day scale layout. */
dayScaleComponent: React.ComponentType<MonthView.DayScaleLayoutProps>;
/** A component that renders a time table layout. */
timeTableComponent: React.ComponentType<MonthView.TimeTableLayoutProps>;
}
export interface AppointmentsProps {
/** A component that renders an appointment. */
appointmentComponent: React.ComponentType<Appointments.AppointmentProps>;
/** A component that renders the appointment content. */
appointmentContentComponent: React.ComponentType<Appointments.AppointmentContentProps>;
/** A component that renders an element which indicates the appointment is divided. */
splitIndicatorComponent: React.ComponentType<Appointments.SplitIndicatorProps>;
/** A component that renders an icon for recurring appointments. */
recurringIconComponent: React.ComponentType<object>;
/** A component that renders a container for the appointment. */
containerComponent: React.ComponentType<Appointments.ContainerProps>;
}
export namespace MonthView {
/** Describes properties passed to a component that renders a day scale layout. */
export interface DayScaleLayoutProps {
/** Specifies the cells meta data. */
cellsData: Array<Array<MonthView.CellData>>;
/** A component that renders a day scale cell. */
cellComponent: React.ComponentType<MonthView.DayScaleCellProps>;
/** A component that renders a day scale row. */
rowComponent: React.ComponentType<MonthView.RowProps>;
/** A function that format a date by locale. */
formatDate: (date: Date, options: any) => string;
}
}
export namespace MonthView {
/** Describes properties passed to a component that renders a day scale cell. */
export interface DayScaleCellProps {
/** Specifies the cell start time. */
startDate: Date;
/** Specifies the cell end time. */
endDate?: Date;
/** A function that format a date by locale. */
formatDate: (date: Date, options: any) => string;
}
}
export namespace MonthView {
/** Describes properties passed to a component that renders a time table layout. */
export interface TimeTableLayoutProps {
/** Specifies the cells meta data. */
cellsData: Array<Array<MonthView.CellData>>;
/** A function that accepts the table's root React element. */
tableRef: (ref: React.ReactInstance) => void;
/** A component that renders a time table cell. */
cellComponent: React.ComponentType<MonthView.TimeTableCellProps>;
/** A component that renders a time table row. */
rowComponent: React.ComponentType<MonthView.RowProps>;
/** A function that format a date by locale. */
formatDate: (date: Date, options: any) => string;
}
}
export namespace MonthView {
/** Describes properties passed to a component that renders a time scale cell. */
export interface TimeTableCellProps {
/** Specifies the cell start time. */
startDate: Date;
/** Specifies the cell end time. */
endDate?: Date;
/** Indicates whether the cell's date is not in the current month. */
otherMonth?: boolean;
/** Indicates whether the cell's date is today. */
today?: boolean;
/** A function that format a date by locale. */
formatDate: (date: Date, options: any) => string;
}
}
export namespace MonthView {
/** Describes properties passed to a component that renders the appointment layer. */
export interface AppointmentLayerProps {
/** A React node used to render the appointment layer content. */
children?: React.ReactNode;
}
}
export namespace MonthView {
/** Describes properties passed to a component that renders a row. */
export interface RowProps {
/** A React node used to render the row content. */
children?: React.ReactNode;
}
}
export interface MonthViewProps {
/** The view name. Required if you use several `MonthView` plugins. */
name?: string;
/** Specifies first day of week. */
firstDayOfWeek?: number;
/** Multiplies the default view interval. */
intervalCount?: number;
/** A component that renders a month view layout. */
layoutComponent: React.ComponentType<MonthView.LayoutProps>;
/** A component that renders a day scale layout. */
dayScaleLayoutComponent: React.ComponentType<MonthView.DayScaleLayoutProps>;
/** A component that renders a day scale cell. */
dayScaleCellComponent: React.ComponentType<MonthView.DayScaleCellProps>;
/** A component that renders a day scale row. */
dayScaleRowComponent: React.ComponentType<MonthView.RowProps>;
/** A component that renders a time table layout. */
timeTableLayoutComponent: React.ComponentType<MonthView.TimeTableLayoutProps>;
/** A component that renders a time table cell. */
timeTableCellComponent: React.ComponentType<MonthView.TimeTableCellProps>;
/** A component that renders a time table row. */
timeTableRowComponent: React.ComponentType<MonthView.RowProps>;
/** A component that renders the appointment layer. */
appointmentLayerComponent: React.ComponentType<MonthView.AppointmentLayerProps>;
}
/** A plugin that renders Scheduler data for a month. This plugin arranges appointments from left to right. An appointment's size depends on its duration in days. However, it occupies the entire day cell if an appointment lasts only for several hours or minutes. The time scale and all-day panel are not available in this view. */
export declare const MonthView: React.ComponentType<MonthViewProps>;
// -------------------------------------------------------------------------------------------------
// Scheduler
// -------------------------------------------------------------------------------------------------
/** Describes an appointment data object. If you use another data structure, map it to this structure as shown in this(https://devexpress.github.io/devextreme-reactive/react/scheduler/demos/featured/remote-data/) demo. */
export declare type SchedulerDateTime = Date | number | string;
export declare type AppointmentId = number | string;
/** Describes an appointment data object. */
export interface AppointmentModel {
/** The start date. */
startDate: Date | string | number;
startDate: SchedulerDateTime;
/** The end date. */
endDate: Date | string | number;
endDate: SchedulerDateTime;
/** The title. */

@@ -857,284 +860,95 @@ title?: string;

id?: number | string;
/** Specifies the appointment recurrence rule. Follows the iCalendar RRULE(https://tools.ietf.org/html/rfc5545#section-3.8.5.3) format. */
rRule?: string;
/** Specifies dates excluded from recurrence. Follows the iCalendar EXDATE(https://tools.ietf.org/html/rfc5545#section-3.8.5.1) format. */
exDate?: string;
/** Any other properties. */
[propertyName: string]: any;
}
export namespace Scheduler {
/** Describes properties passed to a component that renders the root layout. */
export interface RootProps {
/** A React node used to render the root layout. */
children?: React.ReactNode;
}
export interface Appointment {
/** The start date. */
start: SchedulerDateTime;
/** The end date. */
end: SchedulerDateTime;
/** The all day flag. */
allDay?: boolean;
/** The recurrence rule. */
rRule?: string;
/** The exception date-times. */
exDate?: string;
/** The all appointment data */
dataItem: AppointmentModel;
}
export interface SchedulerProps {
/** An array of appointment data objects. */
data: Array<AppointmentModel>;
/** A component that renders the root layout. */
rootComponent: React.ComponentType<Scheduler.RootProps>;
/** The locale according to which dates should be formatted. */
locale: string;
export interface TimeScale {
start: Date;
end: Date;
}
export declare type AllDayCell = {
startDate: SchedulerDateTime;
endDate: SchedulerDateTime;
};
export declare type FormatterFn = (nextDate: SchedulerDateTime | undefined, nextOptions: Intl.DateTimeFormatOptions) => string;
/** The Scheduler is a root container component designed to process and display the specified data. The Scheduler's functionality is implemented in several plugins specified as child components. */
export declare const Scheduler: React.ComponentType<SchedulerProps>;
// -------------------------------------------------------------------------------------------------
// Toolbar
// -------------------------------------------------------------------------------------------------
export namespace Toolbar {
/** Describes properties passed to a component that renders the toolbar's root element. */
export interface RootProps {
/** A React node that should be placed in the toolbar. */
children?: React.ReactNode;
}
export declare type ViewCellData = {
startDate: Date;
endDate: Date;
};
export interface AppointmentMoment {
start: moment.Moment;
end: moment.Moment;
title?: string;
allDay?: boolean;
id?: number | string;
[propertyName: string]: any;
}
export namespace Toolbar {
/** Describes properties passed to a component that renders the the toolbar's empty area. */
export interface FlexibleSpaceProps {
/** A React node that should be placed inside the empty area. */
children?: React.ReactNode;
}
}
export interface ToolbarProps {
/** A component that renders the toolbar's root element. */
rootComponent: React.ComponentType<Toolbar.RootProps>;
/** A component that renders the toolbar's empty area. */
flexibleSpaceComponent: React.ComponentType<Toolbar.FlexibleSpaceProps>;
}
/** A plugin that renders the Scheduler's toolbar. */
export declare const Toolbar: React.ComponentType<ToolbarProps>;
// -------------------------------------------------------------------------------------------------
// ViewState
// -------------------------------------------------------------------------------------------------
export interface ViewStateProps {
/** The current date. */
currentDate?: number | string | Date;
/** The initial date in the uncontrolled mode. */
defaultCurrentDate?: number | string | Date;
/** Handles changes to the current date. */
onCurrentDateChange?: (currentDate: Date) => void;
/** The displayed view's name. */
currentViewName?: string;
/** The initially displayed view's name in the uncontrolled mode. */
defaultCurrentViewName?: string;
/** Handles changes to the displayed view. */
onCurrentViewNameChange?: (viewName: string) => void;
/** An appointment's meta data object. */
export interface AppointmentMeta {
/** A React component instance or a DOM element that is used to position the tooltip. */
target: React.ReactInstance;
/** The appointment's displayed metadata. */
data: AppointmentModel;
}
/** A plugin that manages the view state. It specifies the current date and the displayed view. */
export declare const ViewState: React.ComponentType<ViewStateProps>;
// -------------------------------------------------------------------------------------------------
// ViewSwitcher
// -------------------------------------------------------------------------------------------------
export namespace ViewSwitcher {
/** Properties passed to a component that renders the view switcher. */
export interface SwitcherProps {
/** A displayed view's name. */
currentViewName: string;
/** An array of available view's names. */
availableViewNames: Array<string>;
/** A function that handles changes to the displayed view. */
onChange: (nextViewName: string) => void;
}
}
export declare type AppointmentChanges = {
[key: string]: object;
};
export declare type Changes = {
change: AppointmentModel | {};
};
export declare type EditAppointmentPayload = {
appointmentId: AppointmentId;
};
export interface ViewSwitcherProps {
/** A component that renders the view switcher. */
switcherComponent: React.ComponentType<ViewSwitcher.SwitcherProps>;
}
/** A plugin that renders the Scheduler's view switcher. */
export declare const ViewSwitcher: React.ComponentType<ViewSwitcherProps>;
// -------------------------------------------------------------------------------------------------
// WeekView
// -------------------------------------------------------------------------------------------------
export namespace WeekView {
/** Describes a cell data configuration object. */
export interface CellData {
/** Specifies the cell start time. */
startDate: Date;
/** Specifies the cell end time. */
endDate: Date;
/** Indicates whether the cell's date is today. */
today: boolean;
}
/** Describes a cell data configuration object. */
export interface MonthCellData {
/** Specifies the cell start time. */
startDate: Date;
/** Specifies the cell end time. */
endDate: Date;
/** Indicates whether the cell's date is not in the current month. */
otherMonth: boolean;
/** Indicates whether the cell's date is today. */
today: boolean;
}
export namespace WeekView {
/** Describes properties passed to a component that renders a week view layout. */
export interface LayoutProps {
/** A component that renders a time scale layout. */
timeScaleComponent: React.ComponentType<WeekView.TimeScaleLayoutProps>;
/** A component that renders a day scale layout. */
dayScaleComponent: React.ComponentType<WeekView.DayScaleLayoutProps>;
/** A component that renders a time table layout. */
timeTableComponent: React.ComponentType<WeekView.TimeTableLayoutProps>;
/** A component that renders a day scale empty cell. */
dayScaleEmptyCellComponent: React.ComponentType<WeekView.DayScaleEmptyCellProps>;
}
}
export namespace WeekView {
/** Describes properties passed to a component that renders a time scale layout. */
export interface TimeScaleLayoutProps {
/** Specifies the cells meta data. */
cellsData: Array<Array<WeekView.CellData>>;
/** A component that renders a time scale cell. */
cellComponent: React.ComponentType<WeekView.TimeScaleCellProps>;
/** A component that renders a time scale row. */
rowComponent: React.ComponentType<WeekView.RowProps>;
/** A function that format a date by locale. */
formatDate: (date: Date, options: any) => string;
}
}
export namespace WeekView {
/** Describes properties passed to a component that renders a time scale cell. */
export interface TimeScaleCellProps {
/** Specifies the cell end time. */
endDate: Date;
/** Specifies the cell start time. */
startDate?: Date;
/** A function that format a date by locale. */
formatDate: (date: Date, options: any) => string;
}
export interface ChangeCurrentDatePayload {
nextDate: Date;
step: 'day' | 'week' | 'month';
amount: number;
direction: string;
}
export namespace WeekView {
/** Describes properties passed to a component that renders a day scale layout. */
export interface DayScaleLayoutProps {
/** Specifies the cells meta data. */
cellsData: Array<Array<WeekView.CellData>>;
/** A component that renders a day scale cell. */
cellComponent: React.ComponentType<WeekView.DayScaleCellProps>;
/** A component that renders a day scale row. */
rowComponent: React.ComponentType<WeekView.RowProps>;
/** A function that format a date by locale. */
formatDate: (date: Date, options: any) => string;
}
}
export namespace WeekView {
/** Describes properties passed to a component that renders a day scale cell. */
export interface DayScaleCellProps {
/** Specifies the cell start time. */
startDate: Date;
/** Specifies the cell end time. */
endDate?: Date;
/** Indicates whether the cell's date is today. */
today?: boolean;
/** A function that format a date by locale. */
formatDate: (date: Date, options: any) => string;
}
}
export namespace WeekView {
/** Describes properties passed to a component that renders a day scale empty cell. */
export interface DayScaleEmptyCellProps {
/** A React node used to render the row content. */
children?: React.ReactNode;
}
}
export namespace WeekView {
/** Describes properties passed to a component that renders a time table layout. */
export interface TimeTableLayoutProps {
/** Specifies the cells meta data. */
cellsData: Array<Array<WeekView.CellData>>;
/** A function that accepts the table root React element. */
tableRef: (ref: React.ReactInstance) => void;
/** A component that renders a time table cell. */
cellComponent: React.ComponentType<WeekView.TimeTableCellProps>;
/** A component that renders a time table row. */
rowComponent: React.ComponentType<WeekView.RowProps>;
/** A function that format a date by locale. */
formatDate: (date: Date, options: any) => string;
}
}
export namespace WeekView {
/** Describes properties passed to a component that renders a time table cell. */
export interface TimeTableCellProps {
/** Specifies the cell a start time. */
startDate?: Date;
/** Specifies the cell end time. */
endDate?: Date;
/** A React node used to render the time table cell content. */
children?: React.ReactNode;
}
}
export declare type ClientOffset = {
x: number;
y: number;
};
export namespace WeekView {
/** Describes properties passed to a component that renders the appointment layer. */
export interface AppointmentLayerProps {
/** A React node used to render the appointment layer content. */
children?: React.ReactNode;
}
}
export namespace WeekView {
/** Describes properties passed to a component that renders a week view row. */
export interface RowProps {
/** A React node used to render the row content. */
children?: React.ReactNode;
}
}
export interface WeekViewProps {
/** The view name. Required if you use several `WeekView` plugins. */
name?: string;
/** Specifies the days of week that should not be displayed on the view. Accepts an array of zero-bazed day indexes . */
excludedDays?: Array<number>;
/** Specifies the first day of week. */
firstDayOfWeek?: number;
/** Multiplies the default view interval. */
intervalCount?: number;
/** Specifies the cell duration in minutes. */
cellDuration?: number;
/** Specifies the start hour of the view time scale. */
startDayHour?: number;
/** Specifies the end hour of the view time scale. */
endDayHour?: number;
/** A component that renders a week view layout. */
layoutComponent: React.ComponentType<WeekView.LayoutProps>;
/** A component that renders a time scale layout. */
timeScaleLayoutComponent: React.ComponentType<WeekView.TimeScaleLayoutProps>;
/** A component that renders a time scale row. */
timeScaleRowComponent: React.ComponentType<WeekView.RowProps>;
/** A component that renders a time scale cell. */
timeScaleCellComponent: React.ComponentType<WeekView.TimeScaleCellProps>;
/** A component that renders a day scale layout. */
dayScaleLayoutComponent: React.ComponentType<WeekView.DayScaleLayoutProps>;
/** A component that renders a day scale cell. */
dayScaleCellComponent: React.ComponentType<WeekView.DayScaleCellProps>;
/** A component that renders a day scale row. */
dayScaleRowComponent: React.ComponentType<WeekView.RowProps>;
/** A component that renders a day scale empty cell. */
dayScaleEmptyCellComponent: React.ComponentType<WeekView.DayScaleEmptyCellProps>;
/** A component that renders a time table layout. */
timeTableLayoutComponent: React.ComponentType<WeekView.TimeTableLayoutProps>;
/** A component that renders a time table cell. */
timeTableCellComponent: React.ComponentType<WeekView.TimeTableCellProps>;
/** A component that renders a time table row. */
timeTableRowComponent: React.ComponentType<WeekView.RowProps>;
/** A component that renders an appointment layer. */
appointmentLayerComponent: React.ComponentType<WeekView.AppointmentLayerProps>;
}
/** A plugin that renders the Scheduler's week view. This plugin arranges appointments from top to bottom. If their time intervals overlap, their width is decreased and they are placed next to each other. */
export declare const WeekView: React.ComponentType<WeekViewProps>;

57

package.json
{
"name": "@devexpress/dx-react-scheduler",
"version": "1.11.0",
"version": "1.11.1",
"description": "Composable plugin-based scheduler component for React",

@@ -32,3 +32,7 @@ "author": {

],
"tsdoc": {
"tsdocFlavor": "AEDoc"
},
"types": "dist/dx-react-scheduler.d.ts",
"typings": "dist/dx-react-scheduler.d.ts",
"scripts": {

@@ -41,28 +45,20 @@ "test": "jest",

"update-api": "api-extractor run",
"lint": "eslint \"src/**\"",
"dts": "tsc -p tsconfig.dts.json && node ./merge-dts.js",
"lint": "tslint -p tsconfig.lint.json",
"lint:fix": "yarn lint -- --fix"
},
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/core": "^7.4.5",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"@devexpress/dx-core": "1.11.0",
"@devexpress/dx-react-core": "1.11.0",
"@devexpress/dx-testing": "1.11.0",
"@devexpress/dx-core": "1.11.1",
"@devexpress/dx-react-core": "1.11.1",
"@devexpress/dx-testing": "1.11.1",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^24.8.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"core-js": "^3.0.1",
"enzyme": "3.9.0",
"enzyme-adapter-react-16": "^1.13.0",
"core-js": "^3.1.3",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.3.5",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-airbnb-base": "^13.1.0",
"eslint-plugin-filenames": "^1.3.2",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jest": "^22.5.1",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.13.0",
"jest": "^24.8.0",

@@ -72,19 +68,20 @@ "react": "^16.8.3",

"react-test-renderer": "^16.8.6",
"rollup": "^1.11.3",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-license": "^0.8.1",
"rollup-plugin-node-resolve": "^4.2.4"
"rollup": "^1.15.2",
"rollup-plugin-license": "^0.9.0",
"ts-jest": "^24.0.2",
"tslint": "^5.17.0",
"tslint-config-airbnb": "^5.11.1",
"typescript": "^3.5.1"
},
"dependencies": {
"@devexpress/dx-scheduler-core": "1.11.0",
"prop-types": "^15.7.2"
"@devexpress/dx-scheduler-core": "1.11.1"
},
"peerDependencies": {
"@devexpress/dx-core": "1.11.0",
"@devexpress/dx-react-core": "1.11.0",
"@devexpress/dx-core": "1.11.1",
"@devexpress/dx-react-core": "1.11.1",
"moment": "^2.24.0",
"react": ">=16.8.3",
"react-dom": ">=16.8.3"
"react": ">=16.8.6",
"react-dom": ">=16.8.6"
},
"gitHead": "2ee3c94fa5fd5fddf386d4561206715d784e64bc"
"gitHead": "1e024a4be45e7b7141404f5a2fbf7b2f9c1d7afa"
}

4

README.md
# DevExtreme React Scheduler
Project status: **CTP**
DevExtreme React Scheduler is a component that displays appointments from a local or remote source.
[Website](https://devexpress.github.io/devextreme-reactive/react/scheduler/) | [Demos](https://devexpress.github.io/devextreme-reactive/react/scheduler/demos/) | [Docs](https://devexpress.github.io/devextreme-reactive/react/scheduler/docs/)
## License
[DevExtreme licensing](https://js.devexpress.com/licensing/).
dist/dx-react-scheduler.es.js

Sorry, the diff of this file is too big to display

dist/dx-react-scheduler.es.js.map

Sorry, the diff of this file is not supported yet

dist/dx-react-scheduler.umd.js

Sorry, the diff of this file is too big to display

dist/dx-react-scheduler.umd.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc