Show Appointment Timeslot background colour

9 posts, 0 answers
  1. chinnu
    chinnu avatar
    21 posts
    Member since:
    Aug 2011

    Posted 22 May 2012 Link to this post

    HI
    I have a requirement as given below.
    My page is for setting schedules for doctors.
    For eg: Doctor X has schedule on a particular date from 09.00 am to 1.00 pm.And I have a master page with rad scheudler to set this appointment.
    In another page with rad scheduler, I need to display the available time slot of Doctor X.
    For that I need to show the time slot from 09.00 am to 1.00 pm empty.And need to show other time slots in a diffrent colour grey.
    ie; time from 12.00 am to 08.59 am of the same date (which is unavailable schedule for the doctor) to be shown in grey colour.
    time from 09.00 am to 1.00 pm as free slot.
    1.01 pm to 11.59pm  (which is again unavailable for the doctor)  in grey colour.

    Please help, as I am stuck here.have done so many R&D,nothing helped.
    Thanks
    Chinnu


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

    Posted 22 May 2012 Link to this post

    Hi Chinnu,

    Try the following code to show different color for time slots.
    C#:
    protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
    {
     RadScheduler scheduler = (RadScheduler)sender;
     if (scheduler.SelectedView==SchedulerViewType.DayView)
     {
       if (e.TimeSlot.Start.Hour >= 9 && e.TimeSlot.Start.Hour < 13)
       {
        e.TimeSlot.CssClass = "Enabled";
       }
       else
       {
          e.TimeSlot.CssClass = "Disabled";
       }
     }
    }
    CSS:
    .Disabled
    {
      background-color:Grey !important;
    }
    .Enabled
    {
      background-color:Red !important;
    }

    Thanks,
    Shinu.
  3. chinnu
    chinnu avatar
    21 posts
    Member since:
    Aug 2011

    Posted 23 May 2012 Link to this post

    hi shinu
    thank you for your answer.And it is working in my dummy project( a simple page with a scheduler).I need to link it to my working project..Let me check with it.And sure,i will give u feedback

    Thanks
    Chinnu :)
  4. chinnu
    chinnu avatar
    21 posts
    Member since:
    Aug 2011

    Posted 23 May 2012 Link to this post

    HI shinu
    Please see the attachment.I have an appointment from 10 to 12 with name "12".
     
    I have modified the code u have given as follows
              RadScheduler scheduler = (RadScheduler)sender;
                if (scheduler.SelectedView == SchedulerViewType.DayView)
                {
                    if (e.TimeSlot.Appointments.Count > 0)
                    {
                        foreach (Appointment item in e.TimeSlot.Appointments)
                        {                    
                            if (e.TimeSlot.Start.Hour >= item.Start.Hour && e.TimeSlot.Start.Hour < item.End.Hour)
                            {
                                e.TimeSlot.CssClass = "Enabled";
                            }
                            
                        }

                    }
                    else
                    {
                        e.TimeSlot.CssClass = "Disabled";
                    }
                }

    I need to show the complete time slot from 10 to 12 in red colour and other slots in grey colour.My timeslot duration is 30 minutes.
    But here the time slot from 10 to 10.30 only is red colour and others are grey in colour.What i have to do for attaining this...please help...
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 May 2012 Link to this post

    Hi Chinnu,

    I cannot reproduce the issue at my end. Here I am pasting the full code that I tried which worked as expected. Attached is the screenshot.
    aspx:
    <style type="text/css">
    .Disabled
    {
      background-color:Grey !important;
    }
    .Enabled
    {
      background-color:Red !important;
    }
    </style>
    <telerik:RadScheduler  Height="100%" Width="100%" ID="RadScheduler1" runat="server" DataEndField="BirthDate" DataKeyField="BirthDate" DataStartField="BirthDate" TimelineView-SlotDuration="00:30:00" DataSubjectField="BirthDate" ontimeslotcreated="RadScheduler1_TimeSlotCreated"></telerik:RadScheduler>
    C#:
    protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
    {
      RadScheduler scheduler = (RadScheduler)sender;
      if (scheduler.SelectedView == SchedulerViewType.DayView)
      {
        if (e.TimeSlot.Start.Hour >= 10 && e.TimeSlot.Start.Hour < 12)
        {
          e.TimeSlot.CssClass = "Enabled";
        }
        else
        {
           e.TimeSlot.CssClass = "Disabled";
        }
      }
    }

    Thanks,
    Shinu.
  6. chinnu
    chinnu avatar
    21 posts
    Member since:
    Aug 2011

    Posted 23 May 2012 Link to this post

    hi shinu

    It was working fine for me with the code u given.
    Problem arises when u bind an appointment dynamically from database and need to show the timeslot coloured.
    In your way of code ,it was working perfectly for me.Problem arised when i tried to bind an appointment from database and applied a css class using the code i have pasted.

    Any help is highly appreciated ....
    Thanks
    Chinnu
  7. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 25 May 2012 Link to this post

    Hello Chinnu,

    Try the following code:
    protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
    {
        RadScheduler scheduler = (RadScheduler)sender;
        if (scheduler.SelectedView == SchedulerViewType.DayView)
        {
            if (scheduler.Appointments.GetAppointmentsInRange(e.TimeSlot.Start, e.TimeSlot.End).Count > 0)
            {
                e.TimeSlot.CssClass = "Enabled";
            }
            else
            {
                e.TimeSlot.CssClass = "Disabled";
            }
        }
    }

    Greetings,
    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.
  8. chinnu
    chinnu avatar
    21 posts
    Member since:
    Aug 2011

    Posted 31 May 2012 Link to this post

    protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
    {
        RadScheduler scheduler = (RadScheduler)sender;
        if (scheduler.SelectedView == SchedulerViewType.DayView)
        {
            if (scheduler.Appointments.GetAppointmentsInRange(e.TimeSlot.Start, e.TimeSlot.End).Count > 0)
            {
                e.TimeSlot.CssClass = "Enabled";
            }
            else
            {
                e.TimeSlot.CssClass = "Disabled";
            }
        }
    }

    Hi Ivana
    Above code was not working for me.But anyways I managed it some how,by checking the app start time and end time with the time slot.
    But my problem is, I just need the colour only for the appointment slot,just to indicate that there is an appointment here.ie; i dont want to display the appointment as such.
    now my css is working , but along with tht appointment block is also showing.

    I tried to make the visibility false of the appoinment in the scheduler_appointmentdatabound, but then the css applied for the timeslot  also diappears, showing disabled colour everywhere  indicating there is no appointment in the slot.Need urgent help..am fed up with this rad scheduler.

    Thanks chinnu
  9. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 01 Jun 2012 Link to this post

    Hello,

    The following should help:
    .Disabled
    {
        background-color: Yellow;
    }
     
    .Enabled
    {
        background-color: green;
    }
     
    .ApptClass
    {
        visibility: hidden;
    }

    protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
    {
        RadScheduler scheduler = (RadScheduler)sender;
        if (scheduler.SelectedView == SchedulerViewType.DayView)
        {
            if (scheduler.Appointments.GetAppointmentsInRange(e.TimeSlot.Start, e.TimeSlot.End).Count > 0)
            {
                e.TimeSlot.CssClass = "Enabled";
                foreach (Appointment appt in scheduler.Appointments.GetAppointmentsInRange(e.TimeSlot.Start, e.TimeSlot.End))
                {
                    appt.CssClass = "ApptClass";
                }
            }
            else
            {
                e.TimeSlot.CssClass = "Disabled";
            }
        }
    }


    Kind regards,
    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.
Back to Top