This is a migrated thread and some comments may be shown as answers.
Change row height in week and day view
11 Answers 267 Views
This is a migrated thread and some comments may be shown as answers.
Kenny
Top achievements
Rank 1
Kenny asked on 12 Feb 2015, 03:17 PM
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

11 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 16 Feb 2015, 08:10 AM
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!
 
0
Kenny
Top achievements
Rank 1
answered on 20 Feb 2015, 10:42 AM
Cheers!

That does the trick indeed :)

Thanks a lot.
0
James
Top achievements
Rank 1
answered on 26 Feb 2016, 12:53 PM

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

0
Iliana Nikolova
Telerik team
answered on 01 Mar 2016, 09:42 AM
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!
 
0
James
Top achievements
Rank 1
answered on 04 Mar 2016, 09:54 AM

You are right!

 

Thanks for this

 

cheers

0
AdminEBS
Top achievements
Rank 1
answered on 20 Dec 2017, 03:35 PM

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.

 

0
Dimitar
Telerik team
answered on 22 Dec 2017, 09:23 AM
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.
0
Chon
Top achievements
Rank 1
answered on 20 Jun 2019, 01:50 PM

[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,
0
Chon
Top achievements
Rank 1
answered on 20 Jun 2019, 02:03 PM

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%;
}  
0
yolo
Top achievements
Rank 1
answered on 12 Jan 2021, 12:45 AM
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.
0
Dimitar
Telerik team
answered on 13 Jan 2021, 07:30 AM

Hello,

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

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

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Asked by
Kenny
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Kenny
Top achievements
Rank 1
James
Top achievements
Rank 1
AdminEBS
Top achievements
Rank 1
Dimitar
Telerik team
Chon
Top achievements
Rank 1
yolo
Top achievements
Rank 1
Share this question
or