New and Updated Demos for RadScheduler (ASP.NET AJAX) Part I

I have provided technical support for RadScheduler since its inception and I can say that it is truly like an iceberg - the more you dive in knowing the control the more you come to appreciate its power, richness of features, potential for customization and flexibility. But what good is something if you don't know that it exists? For the Q3 2011 release, we have made a thorough review of the RadScheduler demos and realized that they show only a fraction of RadScheduler's potential. So, we have updated some old demos and added a few new ones. We will continue this practice in the future to show you even more of the cool things you can achieve with RadScheduler. In this blog post, I will go through each new or updated demo and outline the main functionalities it presents and the techniques used to achieve them.

First Look

If you have been annoyed by those spinnig loading images that indicate a postback is happening and having to wait a few seconds for the advaced form to open, well then I guess you will be happy to learn that there is a way to put an end to all this. The First Look demo now uses Web Service binding to populate RadScheduler. This sets RadScheduler automatically in Client Binding mode and causes RadScheduler to render all its views and the advanced form at the initial page load. Thus, any interaction with the control does not cause a postback, but happens instantly on the client. 

The panel at the bottom left corner allows you to filter appointments based on their Calendar resource value. This is achieved by sending additional information to the Web Service and the provider.

The two calendars on the left are synchronized with each other and RadScheduler using the client API of the controls. Selecting a date from the first calendar changes the view for the second calendar to show the next month and navigates RadScheduler to the selected date and vice versa . 

Web Service Binding

The Web Service demo has been updated to demonstrate how to filter appointments by sending additional information to the Web Service and the provider. You can get a runnable stand-alone sample from the code library. There you will also find a step-by-step tutorial on how to implement this technique.

Customization

We have created an entire section dedicated on customizing RadScheduler and the appointments. The first demo in this section shows how to customize RadScheduler using the various properties of the control. Since the list of properties is quite large, we have divided the configuration panel into expandable categories that affect specific parts or views of the control.

Customizing the Appointment

 
There are three main functionalities we have aimed to show with this demo:

• Interacting directly with the appointment object without having to open the edit form.
  
  
  
  This is achieved by finding the appointment object in the CheckedChanged event handler and using RadScheduler’s PrepareToEdit and UpdateAppointment methods to set the “Completed” custom attribute.
  
  

  protected void CompletedStatusCheckBox_CheckedChanged(object sender, EventArgs e) 

  { 

      CheckBox CompletedStatusCheckBox = (CheckBox)sender;             

      //Find the appointment object to directly interact with it 

      SchedulerAppointmentContainer appContainer = (SchedulerAppointmentContainer)CompletedStatusCheckBox.Parent; 

      Appointment appointment = appContainer.Appointment; 

      Appointment appointmentToUpdate = RadScheduler1.PrepareToEdit(appointment, RadScheduler1.EditingRecurringSeries); 

      appointmentToUpdate.Attributes["Completed"] = CompletedStatusCheckBox.Checked.ToString(); 

      RadScheduler1.UpdateAppointment(appointmentToUpdate); 

      RadScheduler1.Rebind(); 

  }

  
  
  
• Displaying any kind of information about an appointment in the AppointmentTemplate.
  
  Declaratively this can be done simply using <%#Eval([PropertyName])%>. For example,
  
  <AppointmentTemplate>      
         <%#Eval(“Start”)%> 
         <%#Eval(“Description”)%>
  </AppointmentTemplate>
  
  But how about resources? A universal way to access the appointment and any of its properties is to use:
  
  <%# Container.Appointment.[PropertyName]%>
  
  For example, the following displays the selected User resource:
  
  

  <asp:Label ID="UserLabel" runat="server" Text='<%# Container.Appointment.Resources.GetResourceByType("User") == null ? "None" : Container.Appointment.Resources.GetResourceByType("User").Text %>' />

  
  
• Access nested controls in the AppointmentTemplate by handling AppointmentCreated.
  
  If you have a complex server-side logic that you want to perform, you can handle AppointmentCreated to find any server control that is nested in the AppointmentTemplate using e.Container.FindControl.  
  

To examine the rest of the features demonstrated with this example, view the content under the “Description” tab.

Customizing the Time Slots

 
This demo shows how to customize time slots by handling TimeSlotCreated event to set the CssClass property of the time slot or to insert controls, such as a label for the number of appointments for a given day.

The main theme of this example is presenting a weather forecast in Month View. The forecast information can be stored permanently in the RadScheduler data base using appointments. For each day that shows the weather, an appointment with the “Weather” custom attribute specified is created. In AppointmentDataBound, those appointments are made invisible because we need them to only tag the time slot and conditionally set its CssClass property in TimeSlotCreated.

A secondary theme is disabling special periods of the day such as non-work hours or lunch break. This can be seen in Day or Week view. The technique used for this functionality is explained in more details in the kb article on setting special days or time slots in RadScheduler.

Creating Appointments with Drag-and-drop

 
One of the really strong sides of RadScheduler is its rich client API and abundance of client events. This demo shows how Appointments can be created by dragging and dropping elements from an external control using an entirely client-side approach.

Using RadToolTip

 
This is another updated demo that leverages the client API of RadScheduler to provide a client-side user experience when the “Populate the tooltip client-side via JavaScript.” option is selected.


In conclusion, RadScheduler is a very powerful control and with some imagination and creativity, you can achieve all sorts of functionalities in a neat and elegant way. It has a very rich client API and a plentitude of client events , which alone or in combination with Client Binding mode ( Web Service or WCF Web Service), will allow you to avoid round-trips to the server and enhance performance. We recommend using Web Service binding whenever you can.