Change row height in week and day view

[Kenny]

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

[Iliana Dyankova]

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

 

 

[Kenny]

Cheers!

That does the trick indeed :)

Thanks a lot.

[James]

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

[Iliana Dyankova]

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

 

 

[James]

You are right!

 

Thanks for this

 

cheers

[AdminEBS]

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.

 

[Dimitar]

Hello Thomas ,

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

Regards,
Dimitar
Progress Telerik

[Chon]

[quote]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.

 

[/quote]

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,

[Chon]

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%;
}

[yolo]

is there a method to make the height of each row adaptive to the number of events? from what i read, it only supports for monthly view, however, i tried to apply the adaptiveHeight attribute to my view , it doesnt work. the workDays attribute doesnt work on my case as well.

[Dimitar]

Hello,

The adaptiveSlotHeight option is currently only available for the month view as documented in the API:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/views.adaptiveslotheight

In terms of the workDays option I would suggest referring to the example in the documentation to verify that the option is configured correctly:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/views.workdays

If the issue with setting the workDays option continues to persist, you can open a separate support thread regarding the issue.

Regards,
Dimitar
Progress Telerik