The timeline of the Kendo UI for Angular Gantt enables you to display its tasks in different views.
The Gantt supports the following views:
day—The timeline is divided into separate days and hours.
week—The timeline is divided into weeks and days.
month—The timeline is divided into months and weeks.
To select from the available view types and set their configuration options, place the respective view component within the
- The order of views in the toolbar is determined by the order of the child view components.
- You have to provide at least one view. Otherwise the Gantt will throw an error.
<kendo-gantt> <kendo-gantt-timeline-day-view> </kendo-gantt-timeline-day-view> <kendo-gantt-timeline-week-view> </kendo-gantt-timeline-week-view> <kendo-gantt-timeline-month-view> </kendo-gantt-timeline-month-view> </kendo-gantt>
The following example demonstrates the Day, Week, and Month Gantt views.
To control the currently selected view, use the
By default, the Gantt renders the
weekview as active. If the
weekview is not included in the current Gantt instance, the first view that is provided will be set as active.
To customize the slot width of the timeline views, set the
slotWidth property of the targeted view to the desired width value in pixels.
The Gantt provides the following settings for customizing the start and end of the work day:
HH:mmformat)—The start time of the work day.
HH:mmformat)—The end time of the work day.
The Gantt provides the following settings for customizing the start and end of the work week:
Day)—The start time of the work week.
Day)—The end time of the work week.