How to make Appointment width equal to RadScheduler ColumnWidth

10 posts, 0 answers
  1. Paulo
    Paulo avatar
    31 posts
    Member since:
    Oct 2010

    Posted 30 Aug 2011 Link to this post

    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

  2.
  3. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 31 Aug 2011 Link to this post

    Hello Paulo,

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

    Thanks,
    Shinu.
  5. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 31 Aug 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  7. Paulo
    Paulo avatar
    31 posts
    Member since:
    Oct 2010

    Posted 01 Sep 2011 Link to this post

    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

  8.
  9. Paulo
    Paulo avatar
    31 posts
    Member since:
    Oct 2010

    Posted 01 Sep 2011 Link to this post

    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
  11. Felipe
    Felipe avatar
    13 posts
    Member since:
    Jun 2011

    Posted 18 Nov 2011 Link to this post

    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!
  13. Felipe
    Felipe avatar
    13 posts
    Member since:
    Jun 2011

    Posted 21 Nov 2011 Link to this post

    Anyone?? :D
  14.
  15. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 22 Nov 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  17. Felipe
    Felipe avatar
    13 posts
    Member since:
    Jun 2011

    Posted 22 Nov 2011 Link to this post

    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?
  19. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 23 Nov 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top