Showing events side by side

New to the dhtmlxscheduler control. Using javascript to add events with the function scheduler.addEvent. If there are more than two events within the same time slot (or overlapping somewhat) I would like to show them side by side in the Day view - the behavior when we create appointments by using drag to select the time.

I do not want to cascade them. Is this possible? Is there a way in which I can control the width of an event?

The config settings are as follows:
scheduler.config.drag_resize = true;
scheduler.config.drag_create = true;
scheduler.config.edit_on_create = false;
scheduler.config.details_on_create = false;
scheduler.config.details_on_dblclick = false;
scheduler.config.dblclick_create = true;
scheduler.xy.min_event_height = 1;
scheduler.config.hour_size_px = 84;

Hello and welcome to our forums :slight_smile:

By default if events overlap based on time then they are displayed side by side. Note that time overlapping is not the same thing as visual one. If you create two events: 13:00 - 13:05 and 13:05 and 13:10 then visually they would overlap but as their time don’t - they won’t be displayed side by side.

For now the only solution is to increase hour_size_px. The default value (42) makes events with duration ~60 minutes match their height - duration ratio, so it’s 1:1 mapping. You’ve changed config to 84 - now the same applies for events 30 minutes long.

In the upcoming version there would be 2 ways to deal with this issue.

  1. We introduce new config value which would display events side by side based on their visual representation (so in my example above they would be displayed in different columns).
  2. You could define you own div container for event (that means draw event yourself). For example:
    scheduler.xy.min_event_height = 1;
    doesn’t really make much sense. Do you want your event have 1 pixel height, really?


Kind regards,


Hi! The new 3.5 version came out. Any update for this feature (see above)?
Could someone to share a custom render for events that displays events side by side in case they are visually overlapped?

scheduler.config.separate_short_events = true;

Best regards,

Thanks, it works!

I have short_events = true; , but it doesn’t seem to work for me.
Is there another setting that may void it?

Please be sure that you are using latest version
If issue still occurs - please provide any kind of sample or demo link where issue can be checked.