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:

• 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.
• year—The timeline is divided into years and months.

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.

Copy Code<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-timeline-year-view>
    </kendo-gantt-timeline-year-view>
</kendo-gantt>

The following example demonstrates the Day, Week, Month and Year Gantt views.

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.

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.

Formatting the Timeline Headers Date

To customize the date format of the timeline group headers and/or column headers, set the timelineHeadersDateFormat property of a desired view to the TimelineHeaderDateFormat object.

Copy Code<kendo-gantt-timeline-day-view
    [timelineHeadersDateFormat]="{ groupHeaderDateFormat: 'd/MM', columnHeaderDateFormat: 'HH:mm' }">
</kendo-gantt-timeline-day-view>

The following example demonstrates how to customize the the timeline headers date format in all Gantt views.

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.

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:

• workWeekStart (Day)—The start time of the work week.
• workWeekEnd (Day)—The end time of the work week.

Current Time Marker

By default, the current time marker is enabled if the current date and time are visible in the view-range.

The Gantt can receive a currentTimeMarker input. These settings are applied to all of its views. However, if currentTimeMarker settings are passed to a given view individually (for example, week), that takes precedence.

Suggested Links

• API Reference of the GanttComponent
• API Reference of the Gantt ViewSelectorComponent
• API Index of the Gantt