Calendare dates are not shown as per the start dates and durations passed about gantt-elastic

[neuronetio]

0.7.6 contain patch for this bug
thanks for report guys!

[sandeepkumarmunige]

Thank you for the fix. its working :)

[neuronetio]

Duration should be seconds where 24(days) * 60(minutes) * 60(seconds) = 86400 will be one day.
start should be string with ISO 8601 date, milisecond timestamp or Date object.

Maybe reason why calendar dates are missing is located elsewhere.
Try to investigate dom tree (click on empty calendar) and take screenshot what is going on there.

[neuronetio]

Also paste all gantt-elastic options here.

[felipefreitasffs]

Same here, I think that's because you're add new tasks and the component is not updating the header

[neuronetio]

@felipefreitasffs Could you provide some more info?
Which version are you using?
Paste task and options object here.
Investigate problematic element in dom tree and take screenshot.
Thank!

[felipefreitasffs]

Version 0.7.5
If I get the tasks from a ajax request, when I add the task to the array the component do not update the header of the calendar.

I'm developing a vue application to get the issues from the gitlab and plot the gantt chart.

const options = {
  title: {
    label: 'Your project title as html (link or whatever...)',
    html: false
  },
  taskList: {
    columns: [
      {
        id: 1,
        label: 'ID',
        value: 'id',
        width: 40
      }, {
        id: 2,
        label: 'Description',
        value: 'label',
        width: 200,
        expander: true
      }, {
        id: 3,
        label: 'Assigned to',
        value: 'user',
        width: 130,
        html: true
      }, {
        id: 3,
        label: 'Start',
        value: (task) => task.startDate.format('DD/MM/YYYY'),
        width: 78
      }, {
        id: 4,
        label: 'Type',
        value: 'type',
        width: 68
      }, {
        id: 5,
        label: '%',
        value: 'progress',
        width: 35,
        style: {
          'task-list-header-label': {
            'text-align': 'center',
            'width': '100%'
          },
          'task-list-item-value-container': {
            'text-align': 'center'
          }
        }
      }
    ]
  },
  locale: {
    code: 'en',
    'Now': 'Now',
    'X-Scale': 'Zoom-X',
    'Y-Scale': 'Zoom-Y',
    'Task list width': 'Task list',
    'Before/After': 'Expand',
    'Display task list': 'Task list'
  }
}

Vue componente:

data () {
    return {
      options: options,
      tasks: []
    }
  },
  mounted: function () {
    this.GitLabAPI.get('issues', {}, (issues) => {
      var tks = issues.data.map(issue => {
        return {
          id: issue.id,
          label: `${issue.title}`,
          user: `<a href="${issue.assignee.web_url}" target="_blank" style="color:#0077c0;">${issue.assignee.name}</a>`,
          start: new Date(issue.created_at),
          duration: Math.floor(Math.floor(new Date(issue.due_date).getTime() / (3600 * 24 * 1000)) - Math.floor(new Date(issue.created_at).getTime() / (3600 * 24 * 1000))) * 24 * 60 * 60,
          progress: 50,
          type: 'task'
        }
      })
      this.tasks = tks
    })
  }

[neuronetio]

@felipefreitasffs Do you have any errors in the console?
Copy also state property from Vue Devtools.

[felipefreitasffs]

@neuronetio There's no errors in cosole.

Follow the state property:

(edited - no needed anymore)