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

Range

configuration

Configures the Kendo UI Gantt range settings.

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") }
    ],
    range: {
        start: new Date("2023/1/1"),
        end: new Date("2023/12/31")
    }
});
</script>

range.end

Date

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

 <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")
   }],
   range: {
      end: new Date("2016/06/29")
   },
   views: [
     { type: "day" },
     { type: "week", selected: true },
     { type: "month" }
   ]
 });
 </script>

range.start

Date

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

 <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")
   }],
   range: {
      start: new Date("2016/06/2")
   },
   views: [
     { type: "day" },
     { type: "week", selected: true },
     { type: "month" }
   ]
 });
 </script>