All day row formatting

[Jaesoon]

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

[Ivan Danchev]

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