This is a migrated thread and some comments may be shown as answers.

Set width to 100% for each event in day view

4 Answers 147 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Pawel
Top achievements
Rank 1
Pawel asked on 09 Jun 2015, 02:23 PM

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

4 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 11 Jun 2015, 07:27 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Pawel
Top achievements
Rank 1
answered on 11 Jun 2015, 09:04 AM
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
0
Pawel
Top achievements
Rank 1
answered on 11 Jun 2015, 09:09 AM
In the meantime- how to customize the function used by Scheduler to calculate the width?
0
Vladimir Iliev
Telerik team
answered on 15 Jun 2015, 07:55 AM
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:

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Scheduler
Asked by
Pawel
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Pawel
Top achievements
Rank 1
Share this question
or