Change schedule dates in Vue Gantt component

11 Jun 20244 minutes to read

In the Gantt component, you can change the schedule start and end dates by clicking the custom button programmatically using the updateProjectDates method. You can pass the start and end dates as method arguments to the updateProjectDates method. You can also pass the Boolean value as an additional parameter, which is used to round-off the schedule start and end dates displayed in Gantt timeline.

<template>
     <div>
        <ejs-button id="changedate" cssClass="e-info" v-on:click.native="change">Change Date</ejs-button>
         <br><br><br>
        <ejs-gantt id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height"></ejs-gantt>
    </div>
</template>
<script setup>
import { GanttComponent as EjsGantt } from "@syncfusion/ej2-vue-gantt";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { editingData  } from './data-source.js';
import { ref } from "vue";
const gantt = ref(null);

const data = editingData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
const change = function(e){
    var ganttObj = gantt.value.ej2Instances;
    ganttObj.updateProjectDates(new Date('03/10/2019'),new Date('06/20/2019'),true);
}
</script>
<template>
     <div>
        <ejs-button id="changedate" cssClass="e-info" v-on:click.native="change">Change Date</ejs-button>
         <br><br><br>
        <ejs-gantt id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent } from "@syncfusion/ej2-vue-gantt";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { editingData  } from './data-source.js';

export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
            data: editingData,
            height: '450px',
            taskFields: {
                id: 'TaskID',
                name: 'TaskName',
                startDate: 'StartDate',
                duration: 'Duration',
                progress: 'Progress',
                child: 'subtasks'
            },
        };
    },
    methods: {
      change: function(e){
            var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];
            ganttObj.updateProjectDates(new Date('03/10/2019'),new Date('06/20/2019'),true);
        }
    },
};
</script>