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

Views.range

configuration

Configures the view range settings.

views.range

Object

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

Date

If set to some date the timeline of the view will end to this date.

Overrides the range.end option of the gantt.

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

views.range.start

Date

If set to some date the timeline of the view will start from this date.

Overrides the range.start option of the gantt.

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