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

Views

configuration

The views displayed by the Gantt and their configuration. The array items can be either objects specifying the view configuration or strings representing the view types (assuming default configuration). By default the Kendo UI Gantt widget displays "day", "week", and "month" views.

views

Array

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
    dataSource: [
        { id: 1, title: "Task 1", start: new Date("2023/1/1"), end: new Date("2023/1/5") }
    ],
    views: [
        "day",
        "week", 
        { type: "month", selected: true },
        "year"
    ]
});
</script>

views.date

Date

If set to some date and it is between the range start and range end of the selected view, the timeline of the currently selected view is scrolled to start from this date.

Overrides the date option of the gantt.

<div id="gantt1"></div>
<script>
    $("#gantt1").kendoGantt({
        dataSource: [{
            id: 1,
            orderId: 0,
            parentId: null,
            title: "Task1",
            start: new Date("2016/09/20 09:00"),
            end: new Date("2016/09/20 10:00")
        }],
        views: [
          {
              type: "day", selected: true,
              date: new Date("2016/09/20"),
              range: {
                  start: new Date("2016/09/1"),
                  end: new Date("2016/10/15")
              },
          }
        ]
    });
</script>

views.dayHeaderTemplate

String|Function

The template used to render the day slots in "day" and "week" views.

<div id="gantt"></div>
<script>
  $("#gantt").kendoGantt({
  dataSource: [{
    id: 1,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/6/17 11:00")
  }],
  views: [
    {
      type: "day",
      dayHeaderTemplate: kendo.template("#=kendo.toString(start, 'D')#")
    },
    { type: "week" },
    { type: "month" }
  ]
});
</script>

<div id="gantt"></div>
<script>
  $("#gantt").kendoGantt({
  dataSource: [{
    id: 1,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/6/22 11:00")
  }],
  views: [
    { type: "day"},
    { type: "week",
      dayHeaderTemplate: kendo.template("#=kendo.toString(start, 'd')#"),
      selected: true
    },
    { type: "month" }
  ]
});
</script>

views.monthHeaderTemplate

String|Function

The template used to render the month slots in "month" and "year" views.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 1,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/7/01 11:00")
  }],
  views: [
    { type: "day"},
    { type: "week"},
    {
      type: "month",
      monthHeaderTemplate: "#=kendo.toString(start, 'MMMM, yyyy')#",
      selected: true
    }
  ]
});
</script>

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 1,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/7/01 11:00")
  }],
  views: [
    { type: "day"},
    { type: "week"},
    { type: "month"},
    {
      type: "year",
      monthHeaderTemplate: "#=kendo.toString(start, 'MMMM, yyyy')#",
      selected: true
    }
  ]
});
</script>

views.range

Object

Configures the view range settings.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
    dataSource: [
        { id: 1, title: "Task 1", start: new Date("2023/1/1"), end: new Date("2023/1/5") }
    ],
    views: [
        {
            type: "month",
            range: {
                start: new Date("2023/1/1"),
                end: new Date("2023/12/31")
            }
        }
    ]
});
</script>

views.resizeTooltipFormat

String

The format used to display the start and end dates in the resize tooltip.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 1,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17"),
    end: new Date("2014/6/18")
  }],
  snap: false,
  views: [
    {
      type: "week",
      resizeTooltipFormat: "yyyy/M/dd h:mm"
    },
  ]
});
</script>

views.selected

Boolean

If set to true the view will be initially selected by the Gantt widget. The default selected view is "day".

If more than one view is selected then last of them will prevail.

Default: false

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 1,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/6/20 11:00")
  }],
  views: [
    { type: "day" },
    { type: "week", selected: true },
    { type: "month" }
  ]
});
</script>

views.slotSize

Number|String

The size of the time slot headers. Values are treated as pixels.

Default: 100

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 1,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/6/20 11:00")
  }],
  views: [
    { type: "day" },
    { type: "week", selected: true, slotSize: 130 },
    { type: "month" }
  ]
});
</script>

views.timeHeaderTemplate

String|Function

The template used to render the time slots in "day" view

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 1,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/6/17 11:00")
  }],
  views: [
    { type: "day", timeHeaderTemplate: kendo.template("#=kendo.toString(start, 'T')#") },
    { type: "week" },
    { type: "month" }
  ]
});
</script>

views.type

String

The type of the view. The built-in views are: "day", "week", "month" and "year".

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
    dataSource: [
        { id: 1, title: "Task 1", start: new Date("2023/1/1"), end: new Date("2023/1/5") }
    ],
    views: [
        { type: "day" },
        { type: "week" },
        { type: "month" },
        { type: "year" }
    ]
});
</script>

views.weekHeaderTemplate

String|Function

The template used to render the week slots in "week" and "month" views.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 1,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/6/22 11:00")
  }],
  views: [
    { type: "day"},
    { type: "week",
      weekHeaderTemplate: "#=kendo.toString(start, 'D')# - #=kendo.toString(kendo.date.addDays(end, -1), 'D')#",
      selected: true
    },
    { type: "month" }
  ]
});
</script>

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 1,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/7/01 11:00")
  }],
  views: [
    { type: "day"},
    { type: "week"},
    {
      type: "month",
      weekHeaderTemplate: "#=kendo.toString(start, 'M/dd')# - #=kendo.toString(kendo.date.addDays(end, -1), 'M/dd')#",
      selected: true
    }
  ]
});
</script>

views.yearHeaderTemplate

String|Function

The template used to render the year slots in "year" view.

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 1,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/7/01 11:00")
  }],
  views: [
    { type: "day"},
    { type: "week"},
    { type: "month"},
    {
      type: "year",
      yearHeaderTemplate: "#=kendo.toString(start, 'yyyy')#",
      selected: true
    }
  ]
});
</script>

Related Members