Timeline View

Saturday, 1
Sunday, 2
0:00
2:00
4:00
6:00
8:00
10:00
12:00
14:00
16:00
18:00
20:00
22:00
0:00
2:00
4:00
6:00
8:00
10:00
12:00
14:00
16:00
18:00
20:00
22:00

The Scheduler component displays appointments as horizontal bars along timescales in the Timeline View.

To show the Timeline View, add the DxSchedulerTimelineView component to the markup. This component includes the following settings that allows you to customize the view:

  • CellMinWidth - Specifies the minimum width of a single timescale division, in pixels.
  • Duration - Specifies the time interval displayed in the view.
  • Scales - Specifies a collection of timescales displayed in the view.
  • SnapToCellsMode - Specifies how appointments snap to time cells.

In this demo, the Duration property specifies that view displays 48-hours period, the CellMinWidth property specifies the minimum division width equal to 80 pixels, and the Scales property declares two scales for days and hours.