How to make Appointment width equal to RadScheduler ColumnWidth

[Paulo]

Hello.

In my web application, a page is displayed with the RadScheduler component, whose ColumnWidth property has been set to a certain number of pixels.

When an appointment is displayed, it does not fill the entire cell; a certain space is left on the right side, just like in the following demo: http://demos.telerik.com/aspnet-ajax/scheduler/examples/customization/defaultcs.aspx.

What should I do to set the width of the appointment equal to RadScheduler ColumnWidth?

Thank you.

Paulo

[Shinu]

Hello Paulo,

Try setting the folowing CSS.
CSS:

<style type="text/css">
.RadScheduler .rsAptOut
 {
   width:1200px !important;
 }
</style>

Thanks,
Shinu.

[Ivana]

Hello Paulo,

The empty space on the right side of the appointment is left to give the users the possibility to create a new appointment which will intersect with the time from the previous appointment. If all the space is filled with one appointment  then the users will be able only to modify it and not to create a new one.

Greetings,

Ivana

the Telerik team

[Paulo]

Hello, Shinu and Ivana.

Thank you for your replies.

I forgot to mention in my original post that the RadScheduler component has resources associated with it, which are displayed on top of the component. My apologies.

So, after applying the change suggested by Shinu, the width of an appointment increased beyond the boundary of its cell and "invaded" the cells to the right.

Is there is a way to increase the width of an appointment and still keep it confined to its cell?

>If all the space is filled with one appointment then the users will be able only to modify it and not to create a new one.
That's exactly what I am trying to accomplish, Ivana.

Thank you again.
Paulo

[Paulo]

Hello, again.

Using Shinu's approach, I have set the rsAptOut width with the same value set for the RadScheduler property ColumnWidth.
It worked.

Thank you.
Paulo

[Felipe]

Hello:

I'm trying to make exactly the same thing as Paulo but my CSS is not working. How can I make it work if my Scheduler ColumnWidth property is Empty? it means it has the full size of the container.

Thanks for any help you can give me!

[Felipe]

Anyone?? :D

[Ivana]

Hi Felipe,

Try the following CSS:

.RadScheduler .rsApt
{
    width:100% !important;
}

This way there is no need to have the ColumnWidth property set.

Best wishes,
Ivana
the Telerik team

[Felipe]

Thanks! It worked fine!

Wich is the difference between rsApt and rsAptOut?

Where can I see all the behavior of the CSS for the RadScheduler?

[Peter]

Hi Felipe,

There isn't a special help topic describing what each CSS class achieves.

I recommend you use FireBug or IE dev tools to examine the rendered RadScheduler output. You will notice that appointments render in multiple nested divs with special classes such as rsApt, rsAptOut, rsAptMid, rsAptIn, etc. This is done to achieve the sleek appointments' appearance with rounded corners and gradients.


Regards,
Peter
the Telerik team