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

Switch Between Day, Week, Month, and Year Views in the Gantt

Updated on Jun 17, 2026

Environment

Product

Progress® Kendo UI® Gantt for jQuery

Description

How can I configure the Kendo UI for jQuery Gantt to support Day, Week, Month, and Year views and allow users to switch between them with custom buttons?

Solution

The Gantt component supports multiple built-in views (day, week, month, year) via its views configuration. To switch views programmatically, use the view method.

The following approach demonstrates how to:

Configure the Gantt with all four view types and set Month as the default using selected: true.
Create custom view selector buttons outside the Gantt.
Handle the navigate event to keep the custom buttons synchronized when the user switches views from the built-in view tabs.

Initialize the Gantt with Views

The following snippet initializes the Gantt with all four view types, sets Month as the default view, and wires the navigate event to keep the custom buttons in sync when the user switches views from the built-in toolbar.

javascript

var tasksData = [
    { id: 1, title: "Project Plan", parentId: null, orderId: 0, start: new Date("2024-07-14"), end: new Date("2024-08-31"), percentComplete: 0.52, summary: true, expanded: true },
    { id: 2, title: "Research Phase", parentId: 1, orderId: 0, start: new Date("2024-07-14"), end: new Date("2024-07-20"), percentComplete: 1, summary: false, expanded: true },
    { id: 3, title: "Design Phase", parentId: 1, orderId: 1, start: new Date("2024-07-08"), end: new Date("2024-07-19"), percentComplete: 1, summary: false, expanded: true },
    { id: 4, title: "Development", parentId: 1, orderId: 2, start: new Date("2024-07-18"), end: new Date("2024-08-16"), percentComplete: 0.6, summary: true, expanded: true },
    { id: 5, title: "Backend Development", parentId: 4, orderId: 0, start: new Date("2024-07-18"), end: new Date("2024-08-02"), percentComplete: 0.75, summary: false, expanded: true },
    { id: 6, title: "Frontend Development", parentId: 4, orderId: 1, start: new Date("2024-07-29"), end: new Date("2024-08-16"), percentComplete: 0.45, summary: false, expanded: true },
    { id: 7, title: "Testing & QA", parentId: 1, orderId: 3, start: new Date("2024-08-07"), end: new Date("2024-08-17"), percentComplete: 0.2, summary: false, expanded: true },
    { id: 8, title: "Deployment & Launch", parentId: 1, orderId: 4, start: new Date("2024-08-16"), end: new Date("2024-08-24"), percentComplete: 0, summary: false, expanded: true }
];

var dependenciesData = [
    { id: 1, predecessorId: 2, successorId: 3, type: 1 },
    { id: 2, predecessorId: 3, successorId: 4, type: 1 },
    { id: 3, predecessorId: 5, successorId: 6, type: 3 },
    { id: 4, predecessorId: 6, successorId: 7, type: 1 },
    { id: 5, predecessorId: 7, successorId: 8, type: 1 }
];

$("#gantt").kendoGantt({
    dataSource: {
        data: tasksData,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { from: "id", type: "number" },
                    parentId: { from: "parentId", type: "number", defaultValue: null },
                    orderId: { from: "orderId", type: "number" },
                    title: { from: "title", type: "string" },
                    start: { from: "start", type: "date" },
                    end: { from: "end", type: "date" },
                    percentComplete: { from: "percentComplete", type: "number" },
                    summary: { from: "summary", type: "boolean" },
                    expanded: { from: "expanded", type: "boolean", defaultValue: true }
                }
            }
        }
    },
    dependencies: {
        data: dependenciesData,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { from: "id", type: "number" },
                    predecessorId: { from: "predecessorId", type: "number" },
                    successorId: { from: "successorId", type: "number" },
                    type: { from: "type", type: "number" }
                }
            }
        }
    },
    views: [
        "day",
        "week",
        { type: "month", selected: true },
        "year"
    ],
    columns: [
        { field: "id", title: "ID", width: 50 },
        { field: "title", title: "Title", editable: true, sortable: true },
        { field: "start", title: "Start Time", format: "{0:MM/dd/yyyy}", width: 100 }
    ],
    height: 430,
    showWorkHours: false,
    showWorkDays: false,
    snap: false,
    editable: false,
    navigate: function (e) {
        var viewName = e.view;
        $(".gantt-view-btn").removeClass("active");
        $(".gantt-view-btn[data-view='" + viewName + "']").addClass("active");
    }
});

Add Custom View Selector Buttons

Place the following buttons outside the Gantt element. Each button carries a data-view attribute that maps to the corresponding Gantt view name.

html

<div class="gantt-view-buttons">
    <button type="button" class="gantt-view-btn" data-view="day">Day</button>
    <button type="button" class="gantt-view-btn" data-view="week">Week</button>
    <button type="button" class="gantt-view-btn active" data-view="month">Month</button>
    <button type="button" class="gantt-view-btn" data-view="year">Year</button>
</div>

Handle View Switching

The following snippet attaches a click handler to all view buttons. When a button is clicked, it activates the corresponding Gantt view and updates the active class.

javascript

$(".gantt-view-btn").on("click", function () {
    var gantt = $("#gantt").data("kendoGantt");
    var selectedView = $(this).data("view");

    $(".gantt-view-btn").removeClass("active");
    $(this).addClass("active");

    gantt.view(selectedView);
});

For a runnable example, refer to this Gantt Views dojo sample.