Schedule - the information list is not visible on the calendar

Question

Schedule - the information list is not visible on the calendar

I am trying to create a timeline that loads all data and events from a datasource. I have been using a dev extreme component for this purpose, but unfortunately, the events are not displaying on the calendar. Can anyone offer any insights into what I might be doing wrong?

If anyone could provide assistance, it would be greatly appreciated.

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>

javascript angular typescript devextreme

Answer 1

Answer №1

Modification in your service

  startingDate:"2021-02-03T16:00:00.000Z",
  endingDate:"2021-02-04T16:00:00.000Z"

change it to

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

similarly

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

Answer 2

Modification in your service

  startingDate:"2021-02-03T16:00:00.000Z",
  endingDate:"2021-02-04T16:00:00.000Z"

change it to

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

similarly

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

Schedule - the information list is not visible on the calendar

Answer №1

Similar questions

What are some strategies for managing multiple versions of NPM and Node? Is there a way to install Angular for a single project without affecting other projects?

Utilizing the LinkedIn API: Posting a network update using a variable value

Angular TypeScript state management system

Using CSS or JavaScript to trigger events while scrolling with touch

How can I duplicate an array of objects in javascript?

Guide on filtering FlatList Data in react native by selecting multiple categories from an array

The error message states that the property 'registerUser' is not found on the class 'UserController'

Steps for creating a node.js and ejs file to deploy on 000webhost

step-by-step guide on implementing autocomplete using google.maps.places.autocomplete in ExtJS

Applying styled text to a Node.js chat application

The user interface does not get refreshed right away; it only shows the changes after the

Verify and send form without reloading the page

Express.js error: Unexpected closing parenthesis after argument list

While attempting to reinstall the admob-free plugin via npm, I encountered an error stating that it was missing a package.json file

Using Google Maps to trace a line showing the distance traveled

Tips for ensuring only one property is present in a Typescript interface

Configuring Tailwind CSS with PostCSS in a Nuxt project

Saving JSON data as a file on server

guide to importing svg file with absolute path

Why won't applying a binding style affect the appearance of my Vue component?