Set width to 100% for each event in day view

5 posts, 0 answers
  1. Pawel
    Pawel avatar
    22 posts
    Member since:
    Oct 2014

    Posted 09 Jun 2015 Link to this post

    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

  2.
  3. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 11 Jun 2015 Link to this post

    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!
     
  5. Pawel
    Pawel avatar
    22 posts
    Member since:
    Oct 2014

    Posted 11 Jun 2015 in reply to Vladimir Iliev Link to this post

    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
  7. Pawel
    Pawel avatar
    22 posts
    Member since:
    Oct 2014

    Posted 11 Jun 2015 Link to this post

    In the meantime- how to customize the function used by Scheduler to calculate the width?
  8.
  9. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 15 Jun 2015 Link to this post

    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!
     
Back to Top