Change row height in week and day view

10 posts, 1 answers
  1. Kenny
    Kenny avatar
    11 posts
    Member since:
    Apr 2014

    Posted 12 Feb 2015 Link to this post

    Dear,

    Would it be possible to change the row height of the scheduler when in week and day view?

    We've already changed some CSS for the month view because we wanted to see more items per day:

     .k-scheduler-monthview td[role='gridcell'] { /* Makes the cells larger of the month view. */
            height: 150px !important;
        }

    However we can't seem to find a similar solution for the day & week views. We're showing all 24 hours and we want to prevent our users from having to scroll down.

    Does anyone have a solution for this?

    Thanks in advance.

    Regards,
    Kenny
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 16 Feb 2015 Link to this post

    Hi Kenny,

    The following CSS rule should help to change the td-s heights for day, week and month view in Kendo UI Scheduler: 

    .k-scheduler-dayview .k-scheduler-table td,
    .k-scheduler-weekview tr:nth-child(2) .k-scheduler-table td,
    .k-scheduler-monthview .k-scheduler-table td {
        height: 150px !important;
    }

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kenny
    Kenny avatar
    11 posts
    Member since:
    Apr 2014

    Posted 20 Feb 2015 in reply to Iliana Nikolova Link to this post

    Cheers!

    That does the trick indeed :)

    Thanks a lot.
  4. James
    James avatar
    9 posts
    Member since:
    Feb 2016

    Posted 26 Feb 2016 Link to this post

    Hi this does a partial job as it expands session cells to 100px (in my case) but it doesn't expand time cells.

    Do you have suggestion how to set size of both time and session cells (but to not expand the first 2 rows with header data - in my case Stream 1 and Fri 25/7

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 01 Mar 2016 Link to this post

    Hi James,

    The suggested rule should change the time cells height, too (dojo). Could you please modify my dojo and demonstrate your exact setup - this way I would be able to provide concrete recommendations and advise you further?

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. James
    James avatar
    9 posts
    Member since:
    Feb 2016

    Posted 04 Mar 2016 in reply to Iliana Nikolova Link to this post

    You are right!

     

    Thanks for this

     

    cheers

  7. AdminEBS
    AdminEBS avatar
    1 posts
    Member since:
    Jun 2017

    Posted 20 Dec 2017 Link to this post

    I wanted to do the same, but I had to add for (th), otherwise there was a gap between the left columns, and the lines of the content.

    .k-scheduler-dayview tr:nth-child(2) .k-scheduler-table td,
    .k-scheduler-dayview tr:nth-child(2) .k-scheduler-table th,
    .k-scheduler-weekview tr:nth-child(2) .k-scheduler-table td,
    .k-scheduler-weekview tr:nth-child(2) .k-scheduler-table th,
    .k-scheduler-WeekCustomView tr:nth-child(2) .k-scheduler-table td,
    .k-scheduler-WeekCustomView tr:nth-child(2) .k-scheduler-table th,
    .k-scheduler-WeekCustomViewview tr:nth-child(2) .k-scheduler-table td,
    .k-scheduler-WeekCustomViewview tr:nth-child(2) .k-scheduler-table th
    {
        height: 30px !important;
    }

     

    Best regards

    Thomas C.

     

  8. Dimitar
    Admin
    Dimitar avatar
    801 posts

    Posted 22 Dec 2017 Link to this post

    Hello Thomas ,

    Thank you for sharing your solution with the rest of the community.

    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.
  9. Chon
    Chon avatar
    7 posts
    Member since:
    Nov 2008

    Posted 20 Jun 2019 in reply to AdminEBS Link to this post

    AdminEBS said:

    I wanted to do the same, but I had to add for (th), otherwise there was a gap between the left columns, and the lines of the content.

    .k-scheduler-dayview tr:nth-child(2) .k-scheduler-table td,
    .k-scheduler-dayview tr:nth-child(2) .k-scheduler-table th,
    .k-scheduler-weekview tr:nth-child(2) .k-scheduler-table td,
    .k-scheduler-weekview tr:nth-child(2) .k-scheduler-table th,
    .k-scheduler-WeekCustomView tr:nth-child(2) .k-scheduler-table td,
    .k-scheduler-WeekCustomView tr:nth-child(2) .k-scheduler-table th,
    .k-scheduler-WeekCustomViewview tr:nth-child(2) .k-scheduler-table td,
    .k-scheduler-WeekCustomViewview tr:nth-child(2) .k-scheduler-table th
    {
        height: 30px !important;
    }

     

    Best regards

    Thomas C.

     

    but modified to include 'work week'

    .k-scheduler-workWeekview tr:nth-child(2) .k-scheduler-table td,
    .k-scheduler-workWeekview tr:nth-child(2) .k-scheduler-table th,
  10. Chon
    Chon avatar
    7 posts
    Member since:
    Nov 2008

    Posted 20 Jun 2019 Link to this post

    I also found this works well for full height calendars regardless of selected view

    .k-scheduler-content .k-scheduler-table,
    .k-scheduler-times .k-scheduler-table {
        height: 100%;
    }  
Back to Top