Set width to 100% for each event in day view

[COLIN]

Hello

Currently, the width of an event rectangle seems to be set to about 90% of the width of the containing column. For example in this example

http://demos.telerik.com/kendo-ui/scheduler/index

in the day view, the red event rectangle doesn't occupy the full width of a day column. How to set it to the full 100% width?

Regards,

Pawel

[Vladimir Iliev]

Hi Pawel,

The desired behavior of decreasing the gap between the event and end of the column is not supported out of the box as this space is left in order to allow users add new events easier. Currently I could only suggest to share your idea at Kendo UI UserVoice to allow other users vote for it. Most voted ideas are included in next Kendo UI release.

Regards,
Vladimir Iliev
Telerik

 

 

[COLIN]

Thanks Vladimir, as suggested by you I added this to UserVoice - http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/8364375-set-width-to-100-for-each-event-in-day-view-dec

[COLIN]

In the meantime- how to customize the function used by Scheduler to calculate the width?

[Vladimir Iliev]

Hi Pawel,

To achieve the desired behavior you should extend the desired view ("day", "week" or "workWeek") and override it's "_arrangeColumns" method where the gap between the events and right side of the column is calculated:

_arrangeColumns: function(element, top, height, slotRange) {
  var startSlot = slotRange.start;

  element = { element: element, slotIndex: startSlot.index, start: top, end: top + height };

  var columns,
      slotWidth = startSlot.clientWidth,
      eventRightOffset = slotWidth * 0.005, //original value is 0.10

For example of extending build-in views you can check the following demo in our CodeLibrary:

• Scheduler: Custom view

Regards,
Vladimir Iliev
Telerik

 

 

[Augusto]

Hi. Is this possible to achieve in the Angular version of the Scheduler? Thanks

[Yanmario]

Hi Augusto,

Regarding Kendo UI for Angular Scheduler events, there isn't a specific mechanism that allows the developer to set the events at 100% of the width. The event rendering involves internal calculations of the width depending on multiple variables, including resizing of the browser window. Changing the width of the events using CSS isn't recommended, as it might break the UI or provide incorrect visual information to the user.

Feel free to check and cast a vote on the following feature request if this is the desired behavior you are looking for:

https://feedback.telerik.com/kendo-angular-ui/1386987-scheduler-slotfill-property-for-all-views

If you have any further questions regarding the Kendo UI for Angular Scheduler component, please submit a ticket by selecting Technical Support for the Kendo UI for Angular product.

Regards,
Yanmario
Progress Telerik

[Augusto]

Thanks. I didn't know about the slotFill property. It actually did what I needed by setting it to 1.