All day row formatting

2 posts, 0 answers
  1. Jaesoon
    Jaesoon avatar
    60 posts
    Member since:
    Oct 2012

    Posted 31 Oct 2018 Link to this post

    Hi,

     

    I'm trying to figure out how to get the "All Day" section in the Days and Week view to have a max height.

    I've narrowed it down to the following CSS selector but i'm wondering if there's an easier way to achieve this.

     

    .k-scheduler-dayview > tbody > tr:nth-child(1) > td > .k-scheduler-times > .k-scheduler-table > tbody > tr:nth-child(2),
    .k-scheduler-weekview > tbody > tr:nth-child(1) > td > .k-scheduler-times > .k-scheduler-table > tbody > tr:nth-child(2) {
        height: 100px !important;
        overflow-y: auto !important;
    }
     
    .k-scheduler-header > .k-scheduler-header-wrap > div {
        height: 100px !important;
        overflow-y: auto !important;
    }

     

    One issue i've found going with this method is that on pages where there are no all day events, the height of the row does not correspond to the active area of the row inside it - which means the active area is just 1 row height - i.e. you can't click on the whole all day row to create a new item.

     

    I've tried using the max-height property too but this doesn't seem to work.

     

    Is the correct way to be setting row heights or is there an easier option?

     

     

    Thanks

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1721 posts

    Posted 02 Nov 2018 Link to this post

    Hi,

    Unfortunately, the max-height and min-height properties do not work for table elements, so a possible approach you could consider is setting the row or td element's height (e.g., 7em or 100px):
    .k-scheduler-dayview > tbody > tr:nth-child(1) > td > .k-scheduler-times > .k-scheduler-table > tbody > tr:nth-child(2),
    .k-scheduler-weekview > tbody > tr:nth-child(1) > td > .k-scheduler-times > .k-scheduler-table > tbody > tr:nth-child(2) {
        height: 100px !important;
        overflow-y: auto !important;
    }
      
    .k-scheduler-header > .k-scheduler-header-wrap > div {
        height: 100px !important;
        overflow-y: auto !important;
    }
     
    .k-scheduler-header > .k-scheduler-header-wrap > div > .k-scheduler-table > tbody > tr:nth-child(1) {
      height: 7em !important;
    }

    However, this will make the cell elements higher, which will cause the rendered events to be shown separated by large empty space. So you might need further custom CSS to make the events in the All Day slot bigger and reduce that distance between them:
    .k-scheduler-header .k-event {
      padding-bottom: 40px !important;
      margin-bottom: 40px !important;
    }


    Regards,
    Ivan Danchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top