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.
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';none
| Name | Type | Default | Description |
|---|---|---|---|
| name? | string | Day |
The view's unique identifier. Required if you use several DayView plugins. |
| displayName? | string | The view's name used in UI plugins. The default value is name. |
|
| intervalCount? | number | 1 | Multiplies the default view interval. |
| cellDuration? | number | 30 | Specifies the cell's duration in minutes. |
| startDayHour? | number | 0 | Specifies the start hour of the view time scale. Accepts floating-point numbers from 0 to 24. |
| endDayHour? | number | 24 | Specifies the end hour of the view time scale. Accepts floating-point numbers from 0 to 24. |
| layoutComponent | ComponentType<DayView.LayoutProps> | A component that renders a day view layout. | |
| timeScaleLayoutComponent | ComponentType<DayView.TimeScaleLayoutProps> | A component that renders a time scale layout. | |
| timeScaleLabelComponent | ComponentType<DayView.TimeScaleLabelProps> | A component that renders a time scale label. | |
| 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 timetable layout. | |
| timeTableCellComponent | ComponentType<DayView.TimeTableCellProps> | A component that renders a timetable cell. | |
| timeTableRowComponent | ComponentType<DayView.RowProps> | A component that renders a timetable row. | |
| appointmentLayerComponent | ComponentType<DayView.AppointmentLayerProps> | A component that renders the appointment layer. |
Describes a cell data configuration object.
| Field | Type | Description |
|---|---|---|
| startDate | Date | Specifies the cell's start time. |
| endDate | Date | Specifies the cell's end time. |
| today | boolean | Indicates whether the cell's date is today. |
| groupingInfo? | Array<Group> | Information about the cell's grouping. |
| endOfGroup? | boolean | true if this cell is last in its group. |
Describes properties passed to a component that renders a day view layout.
| Field | Type | Description |
|---|---|---|
| setScrollingStrategy | (scrollingStrategy: ScrollingStrategy) => void | A scrollingStrategy callback. |
| 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 timetable layout. |
| dayScaleEmptyCellComponent | ComponentType<DayView.DayScaleEmptyCellProps> | A component that renders a day scale empty cell. |
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. |
| groups? | Array<Array<Group>> | Groups in the order in which they should be rendered. |
| groupOrientation? | GroupOrientation | Specifies the orientation of groups: Vertical or Horizontal. |
| height? | number | Specifies the height of the time scale in pixels. |
| showAllDayTitle? | boolean | Specifies whether to display the "All Day" title. |
| labelComponent | ComponentType<DayView.TimeScaleLabelProps> | A component that renders a time scale label. |
| allDayTitleComponent? | ComponentType<AllDay.TitleCellProps> | A component that renders a cell displaying the "All Day" text. |
| formatDate | FormatterFn | A function that formats dates according to the locale. |
Describes properties passed to a component that renders a time scale label.
| Field | Type | Description |
|---|---|---|
| time? | Date | Specifies the cell's time. |
| formatDate | FormatterFn | A function that formats dates according to the locale. |
| groupingInfo? | Array<Group> | Information about the cell's grouping. |
| endOfGroup? | boolean | true if this cell is last in its group. |
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. |
| groupingPanelComponent? | ComponentType<GroupingPanel.HorizontalLayoutProps> | A component that renders the grouping panel. |
| groupedByDate? | boolean | Indicates whether grouping by date is enabled. Takes its value from the groupByDate property of the GroupingState plugin. |
| formatDate | FormatterFn | A function that formats dates according to the set locale. |
Describes properties passed to a component that renders a day scale cell.
| Field | Type | Description |
|---|---|---|
| startDate | Date | Specifies the cell's end time. |
| endDate? | Date | Specifies the cell's start time. |
| today? | boolean | Indicates whether the cell's date is today. |
| formatDate | FormatterFn | A function that formats dates according to the set locale. |
| groupingInfo? | Array<Group> | Information about the cell's grouping. |
| endOfGroup? | boolean | true if this cell is last in its group. |
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. |
Describes properties passed to a component that renders a timetable layout.
| Field | Type | Description |
|---|---|---|
| cellsData | Array<Array<DayView.CellData>> | Specifies the cells meta data. |
| allDayCellsData? | Array<Array<AllDayPanel.CellData>> | Information about cells on the All Day Panel. |
| cellComponent | ComponentType<DayView.TimeTableCellProps> | A component that renders a timetable cell. |
| rowComponent | ComponentType<DayView.RowProps> | A component that renders a timetable row. |
| allDayCellComponent? | ComponentType<AllDay.CellProps> | A component that renders a cell on the All Day Panel. |
| allDayRowComponent? | ComponentType<AllDay.RowProps> | A component that renders a row on the All Day Panel. |
| formatDate | FormatterFn | A function that formats dates according to the set locale. |
Describes properties passed to a component that renders a timetable cell.
| Field | Type | Description |
|---|---|---|
| startDate? | Date | Specifies the cell's start time. |
| endDate? | Date | Specifies the cell's end time. |
| groupOrientation? | GroupOrientation | The orientation of groups: Vertical or Horizontal. |
| groupingInfo? | Array<Group> | Information about the cell's grouping. |
| endOfGroup? | boolean | true if this cell is last in its group. |
| isShaded? | boolean | Indicates whether the cell is shaded. |
| currentTimeIndicatorPosition? | string | Indicates the distance from the top edge of the containing element (usually, a timetable cell). The distance is a percentage of the element's height. |
| onDoubleClick? | (e: object) => void | A function that handles a double click on the cell. |
| currentTimeIndicatorComponent? | ComponentType<CurrentTimeIndicator.IndicatorProps> | A component that renders the current time indicator. |
| children? | ReactNode | A React node used to render the timetable cell content. |
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. |
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. |
| Name | Properties | Description |
|---|---|---|
| DayView.Layout | DayView.LayoutProps | A component that renders a day view layout. |
| DayView.TimeScaleLayout | DayView.TimeScaleLayoutProps | A component that renders a time scale layout. |
| DayView.TimeScaleLabel | DayView.TimeScaleLabelProps | A component that renders a time scale label. |
| DayView.DayScaleLayout | DayView.DayScaleLayoutProps | A component that renders a day scale layout. |
| DayView.DayScaleCell | DayView.DayScaleCellProps | A component that renders a day scale cell. |
| DayView.DayScaleRow | DayView.RowProps | A component that renders a day scale row. |
| DayView.DayScaleEmptyCell | DayView.DayScaleEmptyCellProps | A component that renders a day scale empty cell. |
| DayView.TimeTableLayout | DayView.TimeTableLayoutProps | A component that renders a timetable layout. |
| DayView.TimeTableCell | DayView.TimeTableCellProps | A component that renders a timetable cell. |
| DayView.TimeTableRow | DayView.RowProps | A component that renders a timetable row. |
| DayView.AppointmentLayer | DayView.AppointmentLayerProps | A component that renders the appointment layer. |
Additional properties are added to the component's root element.