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

All day row formatting

1 Answer 92 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Jaesoon
Top achievements
Rank 1
Jaesoon asked on 31 Oct 2018, 11:07 PM

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

1 Answer, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 02 Nov 2018, 01:24 PM
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.
Tags
Scheduler
Asked by
Jaesoon
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or