Event Cards overlap in my Calendar

Scheduler Javascript
#1

Hello,

This has been my problem for a while now.
The events in my calendar are overlapping (they don’t have equal start and end date)
This is my config:

   scheduler.config.xml_date = "%Y-%m-%d %H:%i";
   scheduler.config.drag_move = false;

   var format = scheduler.date.date_to_str("%H:%i");
   scheduler.config.hour_size_px = 88;
   scheduler.templates.day_scale_date = function (date) { return scheduler.date.date_to_str("%l")(date); };
   scheduler.templates.hour_scale = function (date) {
     var step = 15;
     var html = "";
     for (var i = 0; i < 60 / step; i++) {
       html += "<div style='height:22px;line-height:22px;'>" + format(date) + "</div>";
       date = scheduler.date.add(date, step, "minute");
     }
     return html;
   }
scheduler.config.scroll_hour = new Date().getHours();
scheduler.init(this.container.current, new Date(), "day");

Here is a screenshot of what’s happening to mine (i have different colors depending on data available).

06%20PM

#2

Hello @Asyong,

I tried to reproduce the issue with the provided config, but in my case, events displayed correctly:

Here is the live demo:
http://snippet.dhtmlx.com/5/b6e314485

Currently, I can’t say what is going wrong. Could you please reproduce the issue in the demo above(reproduce => click the “Share” button => send me the new link?

#3

Hello @Siarhei

Here is the sample as requested.
http://snippet.dhtmlx.com/5/378fdc05e

I initially thought it was because the time interval between data was less than 15 minutes.
But I tried changing the end time of ID 2 and 3 as follows, and the issues did not appear.

    { "id":1, "start_date": "2020-06-29 09:31", "end_date": "2020-06-29 09:33", "text":"Front-end meeting"},
	{ "id":2,"start_date": "2020-06-29 09:21", "end_date": "2020-06-29 09:35", "text":"Feed ducks and city walking"},
  	{ "id":3,"start_date": "2020-06-29 09:25", "end_date": "2020-06-29 09:35", "text":"Feed ducks and city walking"}

Hope to hear from you soon.
Thank you!

#4

Hello @Asyong,

Thank you for the clarification. It’s a known scenario:
https://docs.dhtmlx.com/scheduler/faq.html#eventsthatlastlessthen1hourlookintheschedulerthesameasthe1houreventsdo

The most modern way to fix it is to define the custom rendering for the event, you can find the detailed description on it by the following link:
https://docs.dhtmlx.com/scheduler/custom_events_display.html

Also, you can find a few different ways to fix it by the following link:
https://docs.dhtmlx.com/scheduler/sizing.html

1 Like
#5

Thank you! I’ll be trying this