DevExtremeReactive
Version 4.0.8DemosDocsBlogGitHubBuy

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's unique identifier. Required if you use several WeekView plugins.
displayName? string The view's name used in UI plugins. The default value is equal to name.
excludedDays? Array<number> [] Specifies the days of week that should not be displayed in the view. Accepts an array of zero-based day indexes (0 - Sunday).
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<WeekView.LayoutProps> A component that renders a week view layout.
timeScaleLayoutComponent ComponentType<WeekView.TimeScaleLayoutProps> A component that renders a time scale layout.
timeScaleLabelComponent ComponentType<WeekView.TimeScaleLabelProps> A component that renders a time scale label.
timeScaleTickCellComponent ComponentType<WeekView.TimeScaleTickCellProps> A component that renders a time scale tick.
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 timetable layout.
timeTableCellComponent ComponentType<WeekView.TimeTableCellProps> A component that renders a timetable cell.
timeTableRowComponent ComponentType<WeekView.RowProps> A component that renders a timetable 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'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.

WeekView.LayoutProps

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

Field Type Description
setScrollingStrategy (scrollingStrategy: ScrollingStrategy) => void A scrollingStrategy callback.
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 timetable 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.
groups? Array<Array<Group>> Groups in the order in which they should be rendered.
groupOrientation? GroupOrientation 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<WeekView.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 set locale.

WeekView.TimeScaleLabelProps

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 set locale.
groupingInfo? Array<Group> Information about the cell's grouping.
endOfGroup? boolean true if this cell is last in its group.

WeekView.TimeScaleTickCellProps

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

Field Type Description
startDate? Date Specifies the cell's start time.
endDate? Date Specifies the cell's end time.
groupingInfo? Array<Group> Information about the cell's grouping.
endOfGroup? boolean true if this cell is last in its group.

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

WeekView.DayScaleCellProps

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

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

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 timetable layout.

Field Type Description
cellsData Array<Array<WeekView.CellData>> Specifies the cells meta data.
allDayCellsData? Array<Array<AllDayPanel.CellData>> Information about cells on the All Day Panel.
cellComponent ComponentType<WeekView.TimeTableCellProps> A component that renders a timetable cell.
rowComponent ComponentType<WeekView.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.

WeekView.TimeTableCellProps

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 measured as 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.

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 WeekView.LayoutProps A component that renders a week view layout.
WeekView.TimeScaleLayout WeekView.TimeScaleLayoutProps A component that renders a time scale layout.
WeekView.TimeScaleLabel WeekView.TimeScaleLabelProps A component that renders a time scale label.
WeekView.TimeScaleTickCell WeekView.TimeScaleTickCellProps A component that renders a time scale tick.
WeekView.DayScaleLayout WeekView.DayScaleLayoutProps A component that renders a day scale layout.
WeekView.DayScaleCell WeekView.DayScaleCellProps A component that renders a day scale cell.
WeekView.DayScaleRow WeekView.RowProps A component that renders a day scale row.
WeekView.DayScaleEmptyCell WeekView.DayScaleEmptyCellProps A component that renders a day scale empty cell.
WeekView.TimeTableLayout WeekView.TimeTableLayoutProps A component that renders a timetable layout.
WeekView.TimeTableCell WeekView.TimeTableCellProps A component that renders a timetable cell.
WeekView.TimeTableRow WeekView.RowProps A component that renders a timetable row.
WeekView.AppointmentLayer WeekView.AppointmentLayerProps A component that renders the appointment layer.

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

Grid

Chart

Scheduler

Common Concepts

Core