New to Kendo UI for Angular? Start a free 30-day trial

Views

The timeline of the Kendo UI for Angular Gantt enables you to display its tasks in different views.

Types

The Gantt supports the following views:

  • dayThe timeline is divided into separate days and hours.
  • weekThe timeline is divided into weeks and days.
  • monthThe timeline is divided into months and weeks.

Views Configuration

To select from the available view types and set their configuration options, place the respective view component within the <kendo-gantt> tag.

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

Example
View Source
Change Theme:

Active View

To control the currently selected view, use the activeView property.

By default, the Gantt renders the week view as active. If the week view is not included in the current Gantt instance, the first view that is provided will be set as active.

Example
View Source
Change Theme:

Content Customization

The Gantt enables you to customize its slot width, to set the start and end of the work day and of the work week.

Customizing the Slot Width

To customize the slot width of the timeline views, set the slotWidth property of the targeted view to the desired width value in pixels.

Example
View Source
Change Theme:

Setting the Start and End of the Work Day

The Gantt provides the following settings for customizing the start and end of the work day:

  • workDayStart (string in HH:mm format)—The start time of the work day.
  • workDayEnd (string in HH:mm format)—The end time of the work day.
Example
View Source
Change Theme:

Setting the Start and End of the Work Week

The Gantt provides the following settings for customizing the start and end of the work week:

Example
View Source
Change Theme: