Last Updated: 10 Nov 2020 09:05 by Georgi
Created on: 08 Feb 2019 00:37
Category: Scheduler
Type: Feature Request
Only allow 1 event per slot

Our particular app does not allow overlapping or concurrent events.  If I have an event on the calendar it leaves extra open space at the end of the event for the user to click on and schedule another event.  How do I remove the whitespace and make the event fill the entire slot container?


If you look at the 12pm "Dance Practice" event you can see the space on the end, I want the entire slot filled.  I tried CSS forcing the .k-event to 100% width which works with the daily view but this breaks the weekly view.

I know I can add logic to the click event to check if an event already exists and just ignore the click, but that is not very efficient and it still leaves that space on the end which serves no purpose and kind of ugly.  Any ideas?  

Posted on: 10 Nov 2020 09:05

The same feature was required for timeline view, where the unwanted extra space is added to the bottom of the events.

In this case, the user would sometimes add more than one event in a single slot (overlapping events), and would be okay with existing events increasing the slot height as needed, but would not like for the extra space at the end.

Image attached.

Attached Files:
Posted on: 11 Feb 2019 14:01
Hi James,

Unfortunately, at the moment, there is no such built in functionality, that would allow to achieve the desired behavior.

This is why, I changed this ticket to be a feature request in our Feedback portal. This will help us to keep track of the demand for the specific feature and provide it eventually as a built in option in one of our future releases.

Indeed, the suggested workaround approaches from your side are valid and can be applied. What else could be done is to check the view of the Scheduler (when the app loads initially and on each subsequent (navigate) event) and apply the custom style width: 100% to the events only when the Scheduler is in day view.

We could also use the following custom CSS in order to override the default Kendo styles, but have in mind, that this approach is not fully tested and may required some further modifications:

I hope it points you in the right direction of achieving the desired appearance.

Let us know in case any further assistance is required for Kendo Ui for Angular.

Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.