WeekView Plugin Reference

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.

Import

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

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

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

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

User Reference

Dependencies

none

Properties

Name Type Default Description
name? string Week The view name. Required if you use several WeekView plugins.
excludedDays? Array<number> [] Specifies the days of week that should not be displayed on the view. Accepts an array of zero-bazed day indexes (0 - Sunday).
firstDayOfWeek? number 0 Specifies the first day of week.
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<WeekView.LayoutProps>   A component that renders a week view layout.
timeScaleLayoutComponent ComponentType<WeekView.TimeScaleLayoutProps>   A component that renders a time scale layout.
timeScaleRowComponent ComponentType<WeekView.RowProps>   A component that renders a time scale row.
timeScaleCellComponent ComponentType<WeekView.TimeScaleCellProps>   A component that renders a time scale cell.
dayScaleLayoutComponent ComponentType<WeekView.DayScaleLayoutProps>   A component that renders a day scale layout.
dayScaleCellComponent ComponentType<WeekView.DayScaleCellProps>   A component that renders a day scale cell.
dayScaleRowComponent ComponentType<WeekView.RowProps>   A component that renders a day scale row.
dayScaleEmptyCellComponent ComponentType<WeekView.DayScaleEmptyCellProps>   A component that renders a day scale empty cell.
timeTableLayoutComponent ComponentType<WeekView.TimeTableLayoutProps>   A component that renders a time table layout.
timeTableCellComponent ComponentType<WeekView.TimeTableCellProps>   A component that renders a time table cell.
timeTableRowComponent ComponentType<WeekView.RowProps>   A component that renders a time table row.
appointmentLayerComponent ComponentType<WeekView.AppointmentLayerProps>   A component that renders an appointment layer.

Interfaces

WeekView.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.

WeekView.LayoutProps

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

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

WeekView.TimeScaleLayoutProps

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

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

WeekView.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.

WeekView.DayScaleLayoutProps

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

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

WeekView.DayScaleCellProps

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

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.

WeekView.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.

WeekView.TimeTableLayoutProps

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

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

WeekView.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.

WeekView.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.

WeekView.RowProps

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

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

Plugin Components

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

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