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

1 Answer 26 Views
Top achievements
Rank 1
Vahid asked on 09 Jun 2022, 08:48 AM

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?

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 14 Jun 2022, 06:48 AM

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. 

        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.


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.

Top achievements
Rank 1
commented on 20 Jun 2022, 07:28 AM

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')
Telerik team
commented on 23 Jun 2022, 06:00 AM

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

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

Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question