Timeline - data list does not appear on the calendar

Question

I intend to develop a timeline that loads all data / events from a datasource. I am using a dev extreme component to develop the timeline, however the events do not appear on the calendar. What could I be doing wrong?

Can someone help me?

Thank you

Library

DEMO

html

<dx-scheduler
    timeZone="America/Los_Angeles"
    [dataSource]="myDatasource"
    [views]='["timelineDay", "timelineWeek", "timelineWorkWeek", "timelineMonth"]'
    currentView="timelineMonth"
    [firstDayOfWeek]="0"
    [startDayHour]="8"
    [endDayHour]="20"
    [cellDuration]="60"
    [groups]="['idUser']"
    [currentDate]="currentDate"
    [height]="580">
    <dxi-resource
        fieldExpr="idUser"
        [allowMultiple]="true"
        [dataSource]="myDatasource"
        label="Owner"
        [useColorAsDefault]="true"
    ></dxi-resource>
</dx-scheduler>

Answer 1

Change in your service

  date:"2021-02-03T16:00:00.000Z",
  deadline:"2021-02-04T16:00:00.000Z"

to

  startDate:"2021-02-03T16:00:00.000Z",
  endDate:"2021-02-04T16:00:00.000Z"

like

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  currentDate: Date = new Date();
  myDatasource = [
    {
      id: 1,
      idUser: 1,
      name: "name1",
      startDate: new Date("2021-02-01T16:00:00.000Z"),
      endDate: new Date("2021-02-04T16:00:00.000Z"),
      priority: 1,
      color: "#cb6bb2"
    },
  ...
  ];
}

DEMO