What causes scheduler items to be pushed over and then overlap?

2 Answers 246 Views
Scheduler
Randy
Top achievements
Rank 1
Iron
Randy asked on 04 Oct 2021, 08:35 PM

We have been noticing an issue with the scheduler where items are getting pushed to the right (open space to the left) and they can overlap other items which causes visual issues.

Here is the JSON data to reproduce the issue. At first glace it appears like it may be related to times near the business hours. Screenshots show both views, full day and business hours only. There is also a screenshot that shows you can see it overlapped on week view as well.

{
  "AppointmentRecurrence": [],
  "TotalCount": 10,
  "FilteredCount": 10,
  "Data": [
    {
      "ScheduledStartDateMsec": 1636084800000,
      "ScheduledEndDateMsec": 1636119000000,
      "AppointmentId": 11249,
      "AppointmentRecurrenceId": null,
      "AppointmentStatus": 1,
      "DisplayName": "Alice (David) Kohler",
      "PatientId": 452,
      "ProviderId": 8,
      "GroupId": null,
      "AccountLocationId": 0,
      "LobAppointmentTypeId": 4
    },
    {
      "ScheduledStartDateMsec": 1636084800000,
      "ScheduledEndDateMsec": 1636119000000,
      "AppointmentId": 11251,
      "AppointmentRecurrenceId": null,
      "AppointmentStatus": 1,
      "DisplayName": "Alice (Gertrude) Zendering",
      "PatientId": 559,
      "ProviderId": 16,
      "GroupId": null,
      "AccountLocationId": 0,
      "LobAppointmentTypeId": 5
    },
    {
      "ScheduledStartDateMsec": 1636084800000,
      "ScheduledEndDateMsec": 1636122600000,
      "AppointmentId": 11252,
      "AppointmentRecurrenceId": null,
      "AppointmentStatus": 1,
      "DisplayName": "Alice (Ophelia-Jackson-Thompson) Zendering",
      "PatientId": 690,
      "ProviderId": 4,
      "GroupId": null,
      "AccountLocationId": 0,
      "LobAppointmentTypeId": 5
    },
    {
      "ScheduledStartDateMsec": 1636112700000,
      "ScheduledEndDateMsec": 1636114500000,
      "AppointmentId": 11250,
      "AppointmentRecurrenceId": null,
      "AppointmentStatus": 1,
      "DisplayName": "Alice (Francis) Inderling",
      "PatientId": 508,
      "ProviderId": 1,
      "GroupId": null,
      "AccountLocationId": 0,
      "LobAppointmentTypeId": 5
    },
    {
      "ScheduledStartDateMsec": 1636113600000,
      "ScheduledEndDateMsec": 1636115400000,
      "AppointmentId": 11254,
      "AppointmentRecurrenceId": null,
      "AppointmentStatus": 1,
      "DisplayName": "Alice Emerich",
      "PatientId": 400,
      "ProviderId": 17,
      "GroupId": null,
      "AccountLocationId": 0,
      "LobAppointmentTypeId": 5
    },
    {
      "ScheduledStartDateMsec": 1636113600000,
      "ScheduledEndDateMsec": 1636115400000,
      "AppointmentId": 11255,
      "AppointmentRecurrenceId": null,
      "AppointmentStatus": 1,
      "DisplayName": "Alice Fulsom",
      "PatientId": 493,
      "ProviderId": 17,
      "GroupId": null,
      "AccountLocationId": 0,
      "LobAppointmentTypeId": 5
    },
    {
      "ScheduledStartDateMsec": 1636113600000,
      "ScheduledEndDateMsec": 1636115400000,
      "AppointmentId": 11256,
      "AppointmentRecurrenceId": null,
      "AppointmentStatus": 1,
      "DisplayName": "Alice Holdman",
      "PatientId": 272,
      "ProviderId": 6,
      "GroupId": null,
      "AccountLocationId": 0,
      "LobAppointmentTypeId": 5
    },
    {
      "ScheduledStartDateMsec": 1636114500000,
      "ScheduledEndDateMsec": 1636116300000,
      "AppointmentId": 11248,
      "AppointmentRecurrenceId": null,
      "AppointmentStatus": 1,
      "DisplayName": "Alice (Alice) Zendering",
      "PatientId": 743,
      "ProviderId": 20,
      "GroupId": null,
      "AccountLocationId": 0,
      "LobAppointmentTypeId": 4
    },
    {
      "ScheduledStartDateMsec": 1636114500000,
      "ScheduledEndDateMsec": 1636116300000,
      "AppointmentId": 11253,
      "AppointmentRecurrenceId": null,
      "AppointmentStatus": 1,
      "DisplayName": "Alice (Xena) Fulsom",
      "PatientId": 133,
      "ProviderId": 17,
      "GroupId": null,
      "AccountLocationId": 0,
      "LobAppointmentTypeId": 5
    },
    {
      "ScheduledStartDateMsec": 1636114800000,
      "ScheduledEndDateMsec": 1636116600000,
      "AppointmentId": 11258,
      "AppointmentRecurrenceId": null,
      "AppointmentStatus": 1,
      "DisplayName": "Andrew (Rachel) Davidson",
      "PatientId": 789,
      "ProviderId": 17,
      "GroupId": null,
      "AccountLocationId": 0,
      "LobAppointmentTypeId": 4
    }
  ]
}

2 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 05 Oct 2021, 06:28 AM

Hello, Randy,

Thank you for all of the details.

I made an example using the same data, but the events were not overlapping:

https://stackblitz.com/edit/react-pytuji?file=app%2Fmain.jsx

As I'm probably missing all of the details, could you please update the example to replicate the issue and I will be happy to take a look at it?

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Randy
Top achievements
Rank 1
Iron
commented on 05 Oct 2021, 01:04 PM

If you change the slot duration in your example to 15 you will see the issue.

https://stackblitz.com/edit/react-pytuji-vtbziv?file=app%2Fmain.jsx

0
Stefan
Telerik team
answered on 06 Oct 2021, 05:19 AM

Hello, Randy,

Thank you for the clarification.

I can confirm that this is an issue with the current version of the KendoReact Scheduler.

I have logged this for fixing, and the status can be monitored here:

https://github.com/telerik/kendo-react/issues/1100

Currently, there is no workaround available, if one is found it will be added to the issue.

Additionally, I have added some Telerik points to your account for bringing this to our attention.

Apologies for the inconvenience this may have caused you.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Scheduler
Asked by
Randy
Top achievements
Rank 1
Iron
Answers by
Stefan
Telerik team
Share this question
or