How to resize the events width in time slots

Scheduler Javascript
#1

I need to book 6 events per time slots(In 1 Hours period), When I book the first event it’s fit in the full size of the slot , Is there any solution, so i can limit the width according no. of events in 1 timeslot ?

#2

Hello @Rijwan_Mohammed,

The default solution of styling events is the event_class(start,end,ev) template:
https://docs.dhtmlx.com/scheduler/api__scheduler_event_class_template.html
which allows you to assign classes to events based on some conditions.

So you can check events count in the date range of the specific event, and return different classes, based on it.

The code may look like follows:

// CSS part
  .width-1-6, 
  .width-1-6 .dhx_body,
  .width-1-6 .dhx_event_move.dhx_title{
    width: 80px !important;
    background: red;
  }

  .width-2-6, 
  .width-2-6 .dhx_body,
  .width-2-6 .dhx_event_move.dhx_title{
    width: 40px !important;
    background: green;
  }

// JS part
scheduler.templates.event_class = function(start,end,ev){  
  var count = scheduler.getEvents(start, end).length
  if(count == 1)
    return "width-1-6"
  if(count == 2)
    return "width-2-6";
};

Here is an example:
http://snippet.dhtmlx.com/5/ab713e925

btw, you can check the cascade functionality, which makes events to be displayed as a cascade, here is a sample:
https://docs.dhtmlx.com/scheduler/samples/02_customization/24_cascade_event_display.html
maybe it would be helpful in your case.

API cascade_event_display:
https://docs.dhtmlx.com/scheduler/api__scheduler_cascade_event_display_config.html
API getEvents:
https://docs.dhtmlx.com/scheduler/api__scheduler_getevents.html