Show Appointment Timeslot background colour

[chinnu]

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

[Shinu]

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.

[chinnu]

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 :)

[chinnu]

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...

[Shinu]

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.

[chinnu]

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

[Ivana]

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

[chinnu]

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

[Ivana]

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