DayView Plugin Reference

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.

Import

Use the following statement to import a plugin with embedded theme components:

import { DayView } from '@devexpress/dx-react-scheduler-material-ui';

You can import the themeless plugin if you want to use custom components:

import { DayView } from '@devexpress/dx-react-scheduler';

User Reference

Dependencies

none

Properties

Name Type Default Description
name? string Day The view name. Required if you use several DayView plugins.
intervalCount? number 1 Multiplies the default view interval.
cellDuration? number 30 Specifies the cell duration in minutes.
startDayHour? number 0 Specifies the start hour of the view time scale.
endDayHour? number 24 Specifies the end hour of the view time scale.
layoutComponent ComponentType<DayView.LayoutProps>   A component that renders a day view layout.
timeScaleLayoutComponent ComponentType<DayView.TimeScaleLayoutProps>   A component that renders a time scale layout.
timeScaleRowComponent ComponentType<DayView.RowProps>   A component that renders a time scale row.
timeScaleCellComponent ComponentType<DayView.TimeScaleCellProps>   A component that renders a time scale cell.
dayScaleLayoutComponent ComponentType<DayView.DayScaleLayoutProps>   A component that renders a day scale layout.
dayScaleCellComponent ComponentType<DayView.DayScaleCellProps>   A component that renders a day scale cell.
dayScaleRowComponent ComponentType<DayView.RowProps>   A component that renders a day scale row.
dayScaleEmptyCellComponent ComponentType<DayView.DayScaleEmptyCellProps>   A component that renders a day scale empty cell.
timeTableLayoutComponent ComponentType<DayView.TimeTableLayoutProps>   A component that renders a time table layout.
timeTableCellComponent ComponentType<DayView.TimeTableCellProps>   A component that renders a time table cell.
timeTableRowComponent ComponentType<DayView.RowProps>   A component that renders a time table row.
appointmentLayerComponent ComponentType<DayView.AppointmentLayerProps>   A component that renders the appointment layer.

Interfaces

DayView.CellData

Describes a cell data configuration object.

Field Type Description
startDate Date Specifies the cell start time.
endDate Date Specifies the cell end time.
today boolean Indicates whether the cell’s date is today.

DayView.LayoutProps

Describes properties passed to a component that renders a day view layout.

Field Type Description
timeScaleComponent ComponentType<DayView.TimeScaleLayoutProps> A component that renders a time scale layout.
dayScaleComponent ComponentType<DayView.DayScaleLayoutProps> A component that renders a day scale layout.
timeTableComponent ComponentType<DayView.TimeTableLayoutProps> A component that renders a time table layout.
dayScaleEmptyCellComponent ComponentType<DayView.DayScaleEmptyCellProps> A component that renders a day scale empty cell.

DayView.TimeScaleLayoutProps

Describes properties passed to a component that renders a time scale layout.

Field Type Description
cellsData Array<Array<DayView.CellData>> Specifies the cells meta data.
cellComponent ComponentType<DayView.TimeScaleCellProps> A component that renders a time scale cell.
rowComponent ComponentType<DayView.RowProps> A component that renders a time scale row.

DayView.TimeScaleCellProps

Describes properties passed to a component that renders a time scale cell.

Field Type Description
endDate Date Specifies the cell end time.
startDate? Date Specifies the cell start time.

DayView.DayScaleLayoutProps

Describes properties passed to a component that renders a day scale layout.

Field Type Description
cellsData Array<Array<DayView.CellData>> Specifies the cells meta data.
cellComponent ComponentType<DayView.DayScaleCellProps> A component that renders a day scale cell.
rowComponent ComponentType<DayView.RowProps> A component that renders a day scale row.

DayView.DayScaleCellProps

Describes properties passed to a component that renders a day scale cell.

Field Type Description
startDate Date Specifies the cell end time.
endDate? Date Specifies the cell start time.
today? boolean Indicates whether the cell’s date is today.

DayView.DayScaleEmptyCellProps

Describes properties passed to a component that renders a day scale empty cell.

Field Type Description
children? ReactNode A React node used to render the row content.

DayView.TimeTableLayoutProps

Describes properties passed to a component that renders a time table layout.

Field Type Description
cellsData Array<Array<DayView.CellData>> Specifies the cells meta data.
tableRef (ref: ReactInstance) => void A function that accepts the table root React element.
cellComponent ComponentType<DayView.TimeTableCellProps> A component that renders a time table cell.
rowComponent ComponentType<DayView.RowProps> A component that renders a time table row.

DayView.TimeTableCellProps

Describes properties passed to a component that renders a time table cell.

Field Type Description
startDate? Date Specifies the cell a start time.
endDate? Date Specifies the cell end time.
children? ReactNode A React node used to render the time table cell content.

DayView.AppointmentLayerProps

Describes properties passed to a component that renders the appointment layer.

Field Type Description
children? ReactNode A React node used to render the appointment layer content.

DayView.RowProps

Describes properties passed to a component that renders a day view row.

Field Type Description
children? ReactNode A React node used to render the row content.

Plugin Components

Name Properties Description
DayView.Layout ComponentType<DayView.LayoutProps> A component that renders a day view layout.
DayView.TimeScaleLayout ComponentType<DayView.TimeScaleLayoutProps> A component that renders a time scale layout.
DayView.TimeScaleCell ComponentType<DayView.TimeScaleCellProps> A component that renders a time scale cell.
DayView.DayScaleLayout ComponentType<DayView.DayScaleLayoutProps> A component that renders a day scale layout.
DayView.DayScaleCell ComponentType<DayView.DayScaleCellProps> A component that renders a day scale cell.
DayView.DayScaleEmptyCell ComponentType<DayView.DayScaleEmptyCellProps> A component that renders a day scale empty cell.
DayView.TimeTableLayout ComponentType<DayView.TimeTableLayoutProps> A component that renders a time table layout.
DayView.TimeTableCell ComponentType<DayView.TimeTableCellProps> A component that renders a time table cell.
DayView.Row ComponentType<DayView.RowProps> A component that renders a day view’s generic row.
DayView.AppointmentLayer ComponentType<DayView.AppointmentLayerProps> A component that renders the appointment layer.

Additional properties are added to the component’s root element.