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:

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.

html

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

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

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.

html

<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 timeline headers date format in all Gantt views.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...