multiple appointments in a slot in UI for ASP.NET AJAX Scheduler

Piyush Bhatt

166 posts

Member since:
Nov 2007

Posted 20 Mar 2008 Link to this post

I am displaying multiple appointments in a timeslot. I want to show some spacing between two slots but unfortunately no way I could get that. It always displays all timeslots together.

I tried different ways and one was to set margin-left for the following:

.rsApt.PencilPage
{
    margin-left: 5px;
}
.rsApt.PencilPage .rsWrap
{
    border: 0;
    margin-left: 0px;
}
.rsApt.PencilPage .rsAptInner
{
    border: 0;
    margin-left: 0px;
}

I tried margin-left for all 3 of above one after another but none works. Finally I did following:

.rsApt.PencilPage div
{
    margin-left: 5px;
}

that affects all divs within - so it worked but still this is not ideal solution. It displays the bottom border with some margin with left border.

Please let me know how should I do this?

Thanks,
Piyush

Peter

Admin

6637 posts

Posted 24 Mar 2008 Link to this post

Hi Piyush,

Indeed, this scenario is not supported by RadScheduler. The closest that we got to is this css rule, but there is a problem when dragging the appointment:

    
             .rsRow .rsCell .rsWrap .rsApt  
        
                {         
        
                    margin-right: 100px;  
        
                    width: 200px !important;  
        
                    left: auto !important;  
        
                    position: relative !important;  
        
                    float: left !important;  
        
                }

Kind regards,
Peter
the Telerik team

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

Piyush Bhatt

166 posts

Member since:
Nov 2007

Posted 24 Mar 2008 Link to this post

The other way I could do was:

    .RadScheduler_Web20 .rsDayView div.rsAptWrap
    {
      width:260px;
    }

Not sure if my client has any different requirement - but this kind of achieves that spacing between slots too - and my other problem for having fix width for each slot.

Thanks,
Piyush

Peter

Admin

6637 posts

Posted 24 Mar 2008 Link to this post

Hi Piyush,

Thanks for the feedback. It looks that your requirement is different than what we thought you wanted to achieve. Anyway, it is good to learn that you found a workaround.

Peter
the Telerik team

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

Piyush Bhatt

166 posts

Member since:
Nov 2007

Posted 24 Mar 2008 Link to this post

Peter,

What I tried had another problem, but then I applied your solution that was great.

As you mentioned there is problem with drag and drop that it moves the appointment at the right to left and if the drag is cancelled, it won't reset it back. Is it possible that when user starts moving - even before appointment is moved - i can do some validation and set e.Cancel=true - so that appointment is not actually dragged.

Was this the same problem you were referring to? Or you saw some other problem?

Thanks,
Piyush

Piyush Bhatt

166 posts

Member since:
Nov 2007

Posted 24 Mar 2008 Link to this post

Me again,

if I want to apply your solution seperately for Day View and Week View I can do following. But if I want to apply it for Resource View how can I do it? I see that ResourceView internally uses "rsDayView" as the class. Can you suggest something.

    .RadScheduler_Outlook .rsDayView .rsRow .rsCell .rsWrap .rsApt
    {
        margin-right: 10px;
        width: 200px !important;
        left: auto !important;
        position: relative !important;
        float: left !important;
    }
    .RadScheduler_Outlook .rsWeekView .rsRow .rsCell .rsWrap .rsApt
    {
        margin-right: 3px;
        width: 50px !important;
        left: auto !important;
        position: relative !important;
        float: left !important;
    }

Peter

Admin

6637 posts

Posted 24 Mar 2008 Link to this post

Hello Piyush,

To your first question - yes, you can cancel the OnClientAppointmentMoving event. Here is how:

    
             <script type="text/javascript">  
        
                    function OnClientAppointmentMoving(sender, eventArgs)  
        
                    {  
        
                       eventArgs.set_cancel(true);  
        
                    }          
        
                    </script> 
        
                    <telerik:RadScheduler ID="RadScheduler1" OnClientAppointmentMoving="OnClientAppointmentMoving" runat="server" >

As for the second question, no special class is rendered for appointments in resource view. A workaround which you can use is to check in the AppointmentCreated event what is RadScheduler's SelectedView and set the CssClass property of the appointment respectively:

    
            protected void RadScheduler1_AppointmentCreated(object sender, Telerik.Web.UI.AppointmentCreatedEventArgs e)  
        
                {  
        
                    if (RadScheduler1.SelectedView == Telerik.Web.UI.SchedulerViewType.ResourceView)  
        
                    {  
        
                        e.Appointment.CssClass = "ResourceCssClass";  
        
                    }  
        
                }

Best wishes,
Peter
the Telerik team

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

SKS

32 posts

Member since:
Aug 2009

Posted 06 Oct 2009 Link to this post

is it possible to set the color of a timeslot based on time.
for e.g i want to to be able to have the time from 9 AM to 5 PM show in gray on the radscheduler.

Peter

Admin

6637 posts

Posted 07 Oct 2009 Link to this post

Hi Sudhir,

Please, check the following kb article:
http://www.telerik.com/support/kb/aspnet-ajax/scheduler/setting-special-days-or-time-slots-in-radscheduler.aspx

Regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.