show all day events side by side instead below each other in kendo JQuery scheduler

[Vahid]

I want to display all-day events side-by-side instead of one below the other just like events shown in the example in 8 am o'clock. Here I have created an example and in the all-day row I want to position two events next to each other.

the second question is, how can I adjust the margin between the text in all day events and the box, that shows the event?

https://dojo.telerik.com/uXuHuvak

[Neli]

Hello Vahid,

By default horizontal alignment of the events is not supported in the allDaySlot in Scheduler. To achieve such an appearance you will need to add a complex calculation for the width and position of each event. Below you will find such small example. 

 setTimeout(function(){
        var topStyle = $('.k-scheduler-header-wrap .k-event').css("top");
        var events = $('.k-scheduler-header-wrap .k-event');      

        $('.k-scheduler-header-wrap .k-event').width('200px')

        for(let event of events){         
          var index = $(event).index()
          $(event).css("top", topStyle.toString());
          $(event).css("left", (index-1) * 220);          
        }
      })

Here is a Dojo example where this is demonstrated. 

However, in the example above the Scheduler is non-editable. In the case of an editable Scheduler, the calculation will be more complex as the total number of the events rendered in the allDaySlot should be taken into account. 

As I mentioned above, such an appearance is not part of the build-in options in the Scheduler. Thus I would suggest you log a feature request in our official Feedback Portal. We constantly monitor the requests in the portal and based on their popularity each request could be added for implementation.

- https://feedback.telerik.com/kendo-jquery-ui

Regards,
Neli
Progress Telerik

[Vahid]

thanks, but could you tell me how to get the width for each <td> tag?

The width for each event should be calculated automatically, so I also need the width for each td tag.

$('.k-scheduler-header-wrap .k-event').width('set hier as dynamic number')

[Martin]

You can try a similar selector to get all the cells and set their width:

$(".k-scheduler-table tr td")