Tasks

Task

Tasks are array of simple objects with some properties.

Every task object should contain this properties:

• id {string|number} - gantt-elastic will track changes in task array by this value
• label {string} - label which will be displayed inside chart or task list
• start {number} - millisecond timestamp
• end {humber} or duration {number} - end = millisecond time stamp, or duration - how long will take to finish task in milliseconds - for one day = 24x60x60x1000
• progress {number} - value from 0 to 100 (percent)
• type {string} - project, milestone or task
• style {object} - optional, you can look at CSS page of this wiki and grab some styles
• collapsed {boolean} - optional, for task that have children, task will be collapsed after initialization

Change detection

You can modify task just by changing your input tasks object - gantt-elastic will watch this object and update accordingly. But be careful what you are doing with tasks in other parts of your application because you might accidentally make a mess.

If you need add task after initialization - just use tasks.push({/* your task data */}) - gantt-elastic will watch this array and update everything for you.

If you need remove task during execution use tasks = tasks.filter(...) method.

For full array change detection documentation go to change detection

Example

working example of the code below can be found in examples folder right here

// create instance
    const app = new Vue({
      components: {
        'gantt-elastic': GanttElastic
      },
      data: {
        tasks,
        options
      }
    });
   
    // mount gantt to DOM
    app.$mount('#app');

    function update() {
      const row = document.getElementById('row').value;
      const name = document.getElementById('name').value;
      const value = document.getElementById('value').value;
      app.tasks[row][name] = value;
    }

    function deleteRow() {
      const row = Number(document.getElementById('delrow').value);
      app.tasks = ganttState.tasks.filter((task, index) => {
        if (index === row) {
          console.log('removing task', task, index)
        }
        return index !== row;
      });
    }