Row height in weekly view

[Joseph]

Is there a way to control the row height in the weekly view of the scheduler?  I know you can control the number of minutes per row, and the time label row span, but if I am going to use this control in my application, I need to be able to shrink the size of the rows.

Is this possible?  I havent seen it in any of the examples.

Thank you.

[Peter]

Hello Joseph,

Yes, there is a way to control the height of the rows. Please, try the following selectors:

<style type="text/css">
    .RadScheduler .rsContent .rsHoursTable th
    {
        font-size:10px;
        height:15px;
    }
   .rsContent .rsContentTable .rsCell
    {
       height:15px;
    }
    </style>

Feel free to contact us if you have any questions.

All the best,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Peter]

Hello Joseph,

Actually, this solution will not work quite well under IE browser. Here is a better fix:

<style type="text/css">
    .RadScheduler .rsContent .rsHoursTable th
    {
        font-size:10px;
        line-height: 15px;
        height:15px;
    }
   .rsContent .rsContentTable .rsCell
    {
        font-size:10px;
        line-height: 15px;
        height:15px;
    }
    </style>

Greetings,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Prasanna]

Hello Peter,

The above solution doesn't work for me. I just tried the below code

   $(".rsContentTable").height(document.documentElement.clientHeight - 200 + "px");
                                $(".rsContentWrapper").height(document.documentElement.clientHeight - 200 + "px");
                                $(".rsContentScrollArea").height(document.documentElement.clientHeight - 200 + "px");
                                var slotPerDay = $find("ctl00_ContentPlaceHolder1_rsBusinessHours").get_activeModel().get_slotsPerDay();
                                var rowHeight = (document.documentElement.clientHeight - 200) / slotPerDay;

                                for (id = 0; id < $(".rsAlt").length; id++) {
                                    $(".rsAlt")[id].style.height = rowHeight + "px";
                                }
                                for (trID = 0; trID < $(".rsVerticalHeaderTable tr").length; trID++) {
                                    $(".rsVerticalHeaderTable tr")[trID].style.height = rowHeight + "px";
                                }
                                for (trConID = 0; trConID < $(".rsContentTable tr").length; trConID++) {
                                    $(".rsContentTable tr")[trConID].style.height = rowHeight + "px";
                                }
                 $find("ctl00_ContentPlaceHolder1_rsBusinessHours").repaint();

the row height of the scheduler changed but the appointment height doesn't changed.

Let me know the solution

Thanks in advance,
Prasanna

[Shinu]

Hi Prasanna,

Try setting the RowHeight property of RadScheduler to increase the height of the row. 

ASPX:

<telerik:RadScheduler ID="RadScheduler1" runat="server" RowHeight="40px" ..... >
</telerik:RadScheduler>

Try overriding the default CSS as follows to increase the height of the appointment.

CSS:

<style type="text/css">
    .RadScheduler .rsAptOut > .rsAptMid, .RadScheduler .rsAptMid > .rsAptIn, .RadScheduler .rsAptIn > .rsAptContent
    {
        height: 30px !important;
    }
</style>

Hope this helps.

Regards,
Shinu.

[Prasanna]

Thanks for your quick replay. Its works fine for a single appointment but i have many appointments in different time.
 what to do? Let me know

[Boyan Dimitrov]

Hello,

Since the appointment position and dimensions are calculated based on the timeslot, any change to the appointment height might cause unusual behavior. Therefore we recommend modifying the scheduler row height and this will change accordingly the appointment height property. This way you can avoid any appearance issues.   

Regards,
Boyan Dimitrov
the Telerik team