This is a migrated thread and some comments may be shown as answers.

Show Appointment Timeslot background colour

8 Answers 208 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
chinnu
Top achievements
Rank 1
chinnu asked on 22 May 2012, 07:41 AM
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


8 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 22 May 2012, 10:57 AM
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.
0
chinnu
Top achievements
Rank 1
answered on 23 May 2012, 05:35 AM
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 :)
0
chinnu
Top achievements
Rank 1
answered on 23 May 2012, 06:05 AM
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...
0
Shinu
Top achievements
Rank 2
answered on 23 May 2012, 07:10 AM
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.
0
chinnu
Top achievements
Rank 1
answered on 23 May 2012, 10:12 AM
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
0
Ivana
Telerik team
answered on 25 May 2012, 08:08 AM
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.
0
chinnu
Top achievements
Rank 1
answered on 31 May 2012, 11:13 AM
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
0
Ivana
Telerik team
answered on 01 Jun 2012, 01:16 PM
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.
Tags
Scheduler
Asked by
chinnu
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
chinnu
Top achievements
Rank 1
Ivana
Telerik team
Share this question
or