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

1 Answer 26 Views
Scheduler
Vahid
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?

https://dojo.telerik.com/uXuHuvak

1 Answer, 1 is accepted

Sort by
0
Neli
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. 

 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

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.

Vahid
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')
Martin
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")

Tags
Scheduler
Asked by
Vahid
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or