How to increase the display size for appointments

[shad]

Hi,

I'm using an "AppointmentTemplate" to display my appointments. However in Timeline view (also in Month/Week view) only part of my templates is visible and the rest is cut off. This is due to the fact that the height of the "appointment" cells is fix.

Is there anyway I can modify the size of the "appointment" cells.

Also, I'm grouping by a resource. How can I specify the height of the groups in Timeline view so that all my cells are of the same height.

Any help will be greatly appreciated for the above.

Thanks ... 

[Dimitar Milushev]

Hi,

You can use the following CSS to set the Appointment height to 40px and set the resource headers to match their height (this is for the Timeline View):

    <style type="text/css">
        .RadScheduler .rsAllDayCell div.rsWrap
        {
            height:40px;
        }

        .RadScheduler .rsHoursTable th.rsSubHeaderHidden
        {
            height:40px;
        }

        .RadScheduler .rsHoursTable tr th.rsSubHeaderLast
        {
            height:41px;
        }

    </style>

Note that the last height should be 1 pixel higher than the appointments' height to compensate for borders.

Regards,
Dimitar Milushev
the Telerik team

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

[shad]

Thanks for the tips, they were very helpful. In my case I had to increase the last height by 2 pixels instead of 1px. I can now display the appointments template correctly and the cells are correctly aligned.

[Paul]

I have the same problem, but when I apply css nothing happened in my case.

In my code Eval("Subject")  generated dynamically and contains hyperlink.  
<AppointmentTemplate>
    <%# Eval("Subject") %>
</AppointmentTemplate>

Each appointment should have 3 lines which I have to display. But this css doesn't work. I have MonthlyView scheduler.

.RadScheduler .rsAllDayCell div.rsWrap

{

height:40px;

}

.RadScheduler .rsHoursTable th.rsSubHeaderHidden

{

height:40px;

}

.RadScheduler .rsHoursTable tr th.rsSubHeaderLast

{

height:41px;

I always found another code:

.rsMonthView .rsWrap   

     {   

        height: 50px !important;       

     }   

     .rsMonthView .rsDateWrap   

     {   

        height: 24px !important;   

     }   

     .rsMonthView .rsLastWrap    

     {   

        height: 24px !important;   

     }   

     .rsMonthView .rsApt   

     {   

        height: 48px !important;   

     }   

    .RadScheduler_Default

    {   

      height:150px !important;   

    }  

This code only increase space between appointments, but not increase height of the the appointment in IE8.
In FireFox second css looks good. 
We need some resolution for IE.
 
Thanks for help,
Paul 

[Peter]

Hello Paul,

Instead of using the css workaround from this kb article, I recommend you simply set the RowHeight property of RadScheduler to some larger value and test if this helps you get the desired appearance.

Regards, Peter
the Telerik team

[Paul]

Thanks, I successfully increase appointment height.

Another issue I have: I use TimelineView for scheduler and I always display only one day. Sometimes scheduler has only vertical, sometimes both vertical and horizontal scrollbars. How can I remove both scrollbars from TimelineView scheduler?

Thanks,
Paul

[Peter]

Hello Paul,

Normally, there shouldn't be any scrollbars as evidenced by the online demo.

Can you send us a sample code with which we can replicate the problem locally?

Kind regards,
Peter
the Telerik team

[Paul]

I found my problem. To decrease height I uses next code:
.rsTimelineView .rsAllDayTable .rsAllDayRow
        {
            height: 28px!important;   
        }

When I increase height to 28 scrollbars are disapear.

Thanks,
Paul

[Kate]

Hi Paul,

We are glad you could locate the issue. Let me know if you need any further assistance.

Kind regards,
Kate
the Telerik team