ResourceItem gets streched untill re-rendered

[M3Gam3R]

Forked the solution and did some local testing, did not adjust any settings. For some reason some ResourceItems are getting stretched into the future (starting from their startDate). This results in following being displayed:

When going to the startDate of the "broken" ResourceItem the rending is fixed. This main issue here is know what ResourceItem is causing this. Result when going to the startDate of ResourceItem and back to "Today":

Had to go to following ResourceItem (using the "prev" navigation button) to fix the rendering:

{
          id: "4",
          startDate: new Date("2023-07-12T12:00:00.000Z"),
          endDate: new Date("2023-07-12T15:00:00.000Z"),
          bgColor: "#107c10",
          title: "Test",
          occupancy: 0,
},

Browser being used:

Microsoft Edge
Version 121.0.2277.112 (Official build) (64-bit)

Data being used:

const filteredData: any[] = [
    {
      id: "001",
      label: {
          title: "Test"
      },
      data: [
        {
          id: "1",
          startDate: new Date("2023-06-09T06:00:00.000Z"),
          endDate: new Date("2023-06-09T09:00:00.000Z"),
          bgColor: "#107c10",
          title: "Test",
          occupancy: 0,
      },
      {
          id: "2",
          startDate: new Date("2023-06-15T10:30:00.000Z"),
          endDate: new Date("2023-06-16T07:00:00.000Z"),
          bgColor: "#107c10",
          title: "Test",
          occupancy: 0,
      },
      {
          id: "3",
          startDate: new Date("2023-06-21T14:00:00.000Z"),
          endDate: new Date("2023-06-22T07:00:00.000Z"),
          bgColor: "#107c10",
          title: "Test",
          occupancy: 0,
      },
      {
          id: "4",
          startDate: new Date("2023-07-12T12:00:00.000Z"),
          endDate: new Date("2023-07-12T15:00:00.000Z"),
          bgColor: "#107c10",
          title: "Test",
          occupancy: 0,
      },
      {
          id: "5",
          startDate: new Date("2023-08-10T10:00:00.000Z"),
          endDate: new Date("2023-08-16T12:00:00.000Z"),
          bgColor: "#107c10",
          title: "Test",
          occupancy: 0,
      },
      {
          id: "6",
          startDate: new Date("2023-09-15T05:00:00.000Z"),
          endDate: new Date("2023-09-15T16:00:00.000Z"),
          bgColor: "#107c10",
          title: "Test",
          occupany: 0,
      },
      {
          id: "7",
          startDate: new Date("2023-10-11T15:00:00.000Z"),
          endDate: new Date("2023-10-13T07:00:00.000Z"),
          bgColor: "#107c10",
          title: "Test",
          occupancy: 0,
      },
      ]
  }
];

[M3Gam3R]

The solution mentioned by @davidluan in issue #106 works great. Tested it with bigger sets of data also (up to 5k items) and not a single overlapping happens and the data gets shown when needed.

[semeniukv]

I have exactly the same issue

[M3Gam3R]

I have exactly the same issue

@semeniukv using the solution mentioned by davidluan in issue #106 fixed it for me, give it it a try, hope it has the same results for you 😄 !

[ichsanseanaldi]

@M3Gam3R i am also facing this problem, according to #106 i have to make adjustment in Tile.tsx file but then how would i change it in my project?

[M3Gam3R]

@M3Gam3R i am also facing this problem, according to #106 i have to make adjustment in Tile.tsx file but then how would i change it in my project?

I wanted to use the project with a different React version so (with approval of the creator(s)) I added the whole project to my own project, so I didn't use it as a package. This allows you to edit the Tile.tsx file and use it in your own project. Worked like a charm then 😄

[mGasiorek998]

Hi,

thanks for the feedback! We've released a new scheduler version with a fix for incorrect date reading and overlapping events. Let us know if it works for you :D

[semeniuv]

Updated to the 0.3.2 version and the issue is still there