Focus or scroll to a specific date in Gantt at initial load.

1 min read

In a project, some tasks may sustain around few days and fewer other tasks may extend across several months. And it’s impossible to maintain a common timeline view for these varied duration tasks. And hence user will need to switch between different timeline or timescale to view the tasks in a project effectively.

In Gantt, It is possible to change the schedule timeline dynamically by using the scheduleHeaderSettings property. please refer the following code example for this.

<button id="changeView">ChangeHeaderType</button>
<script type="text/javascript">   
  $("#changeView").click(function () {
           var ganttObject = $("#GanttContainer").data("ejGantt");
            var monthHeaderSettings = {
                scheduleHeaderType: ej.Gantt.ScheduleHeaderType.Month,
                monthHeaderFormat: "MMM yyyy",
                weekHeaderFormat: "M/dd"
            }
            ganttObject.setModel({ "scheduleHeaderSettings": monthHeaderSettings });
        })
</script>