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