rangeObject

Configures the Kendo UI Gantt range settings.

Example

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

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

Example

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

range.endDate

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

Example

 <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>
In this article
rangerange.startrange.end
Not finding the help you need?
Contact Support