Reduce the cell size of each cell

4 posts, 0 answers
  1. Nithin
    Nithin avatar
    67 posts
    Member since:
    Mar 2018

    Posted 16 May 2018 Link to this post

    Hi,

    I'm trying to reduce the cell width in the scheduler and also change the weekend highlight which is by default from Saturday to Sunday and change it to Friday to Saturday .
    Is there any CSS hack for this requirement?

    Thanks 

  2.
  3. Dimitar
    Admin
    Dimitar avatar
    806 posts

    Posted 18 May 2018 Link to this post

    Hello Nithin,

    The Kendo UI Scheduler provides the views.columnWidth options that can be used to modify the width of the columns in "timeline", "timelineWeek", "timelineWorkWeek" or "timelineMonth" views. For additional suggestions on how to apply a custom approach to achieve similar result with the week views, please refer to the following forum thread.

    Concerning the weekend highlight, you could utilize the workWeekEnd configuration option to specify the end of the work week. This is applicable for the "day" and "week" views and can be observed on the following Dojo example.

    In case you also need to modify the background color, modify the following selector:
    <style>
      .k-nonwork-hour {
        background-color: orange;
      }
    </style>

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Nithin
    Nithin avatar
    67 posts
    Member since:
    Mar 2018

    Posted 22 May 2018 Link to this post

    Hi,
    I'm expecting weekends to be something like this in the image

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2105 posts

    Posted 25 May 2018 Link to this post

    Hi Nitin,

    You can highlight Friday and Saturday as non-working days by setting both workWeekStart and workWeekEnd options:
    workWeekStart: 7,
    workWeekEnd: 4,

    As for the size of the cells, by default the Scheduler occupies 100% of the container's width and this way when the container is resized the Schedule (and its cells) resizes accordingly. Therefore reducing the width of the cells would require setting a fixed width of the Scheduler.
    See this dojo example in which both Friday and Saturday highlighting is shown and the Scheduler has fixed width (800) set.

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top