ASP.NET Booking Calendar User Control

Share |

When developing enterprise ASP.NET applications, it is common to have a calendar booking facility. The calendar control supported by .NET and Visual Studio do not provide such a facility. Although the control can be customised, it does not offer the same level of sophistication and completeness offered by the calendar control presented here.

 

Background

The control renders a calendar for the month/year selected. Each of the current/future days generate a postback event when selected, as does the rate combobox. The combobox dropdown menu is triggered by a right mouse button click.

The control has three events, which are:

• OnDayRender: Called for each rendered day. The program must return whether a day is "Available," "Booked," or "Unavailable."
• OnRateRender: Called for each rendered rate. The program must return "Rate" and "Available" strings (see the Using the Control section below for further details).
• OnSelectionChange: Called when a user request (postback event) is made for a day or rate change.

The control includes the following properties:

• Available day background colour
• Booked day background colour
• Heading month background colour
• Dropdown list hover colour
• Rate combobox colour
• Unavailable day colour
• Number of calendar columns
• Listbox entry string collection
• Rate length (maximum number of characters in string)
• Rate Combobox width
• Rate Combobox height
• Number of calendar rows
• Calendar Month
• Calendar Year

The demonstration application (CalTest) displays a 2 X 2 Calendar array starting from the current month (the example above was run on 3 July 2006). It generates a 53 week string array (rac) that holds availability and rate information that is intialised as available; in other words, all current dates with green backgrounds. The SelectionChange event updates this array through user request (postback event) for a day or rate change.

Using the Code

The control properties allow for a level of customisation and are fairly self explanatory. To use the control, the user will need to maintain information on booking availability and rates; the demonstration application (CalTest) shows a simple implementation of the control. Access to this data will be required when the control is rendered, the control generating events OnDayRender for day and OnRateRender for rate information.

There are two event arguments for OnDayRender, Date and Available. The Date argument is used to pass the day to be rendered and hence is used to recover the availability for that day. The Available argument is used by the control and hence must receive the availability status (Avail or Booked) for the requested day.

OnRateRender has three event arguments—Date, Available, and Rate—and functions similarly to OnDayRender. The control requires the return of two arguments, Available and Rate.

A postback event is generated when a user request is made for a day or rate change. The control, on receiving this postback event, uses the event argument to populate the SelectedRate, RateString, and SelectedDate properties. The control generates an OnSelectionChange event to the ASP.NET code-behind page, thereby enabling the application to update the maintained booking availability and rate data accordingly (see the demonstration application CalTest for further details).

Point of Interest

The major part of the control is the rendering of the calander through a series of HTML tables. The MultiCal function is responsible for rendering multiple calendars and calls the function MonthCal for the rendering of each actual calendar. MonthCal is passed two parameters, CalMonth and CalYear; they are used to construct the calendar. The DayRenderStatus and RateRenderStatus functions generate the OnDayRender and OnRateRender events, respectively, into the main application to secure the requested information.

After rendering the calendar(s), the final function called is AddListBox. Each rate textbox is actually a combobox consisting of a textbox and a listbox triggered by a right-click mouse action. The common listbox and associated JavaScript code is rendered by the AddListBox function. Each textbox is constructed as follows:

<TD align=left>
   <INPUT class=calendar oncontextmenu="return false;"
   onmousedown=MouseBtnDown(arguments[0],this) id=L240606
   onkeydown=KeyDown(arguments[0],this)
   style="WIDTH: 30px; BACKGROUND-COLOR: #e7e7ff"
   maxLength=4 value=250 name=L240606>
</TD>

oncontextmenu disables the standard right mouse click context dropdown menu. onmousedown and onkeydown events call the MouseBtnDown and KeyDown JavaScript functions accordingly. MouseBtnDown obtains a reference to the common listbox, and loads the variable selTextbox with a reference to the selected textbox. If the mouse right button has been clicked, it also positions/displays the listbox with the selected clicked textbox (rate). KeyDown gets the selected key, hides the listbox, and, if the key is a carriage return, calls the ValidateTextbox function.

function MouseBtnDown(e,textbox){
   var listbox=document.getElementById('listbox');
   var btnclick;
   selTextbox=textbox;
   selValue=textbox.value;
   if(!e)
      var e=window.event;
   if(e.which){
      btnclick=e.which;
      if(btnclick==3)
         btnclick=2;
      else
         if(btnclick==2)
            btnclick=4;
      }
   else
      if(e.button)
   btnclick=e.button;
   if(btnclick==2){
      posArray=FindPosition(textbox);
      listbox.style.visibility='visible';
      listbox.style.position='absolute';
      listbox.style.zIndex=200;
      listbox.style.left=posArray[0]+28;
      listbox.style.top=posArray[1]+5;
      }
   else
      listbox.style.visibility='hidden';
}

When a listbox entry is selected, the AddToTextbox function is called. The entry is added to the textbox, the listbox hidden, and the ValidateTextbox function is called.

function AddToTextbox(entry){
   var listbox=document.getElementById('listbox');
   selTextbox.value=entry.firstChild.nodeValue;
   listbox.style.visibility='hidden';
   ValidateTextbox(selTextbox);
}

The ValidateTextbox function tests for a valid textbox entry and, if so, calls the _doPostBack function that generates a postback event. If the entry is not valid, an appropriate alert message box is displayed.

function ValidateTextbox(textbox){
   if(textbox.value){
      if(IsNumeric(textbox.value)||(InListbox(textbox.value)))
         __doPostBack(postBackEventTarget,textbox.id+textbox.value);
      else{
         textbox.value=selValue;
         alert('The rate entry can only be a number or a listbox
                entry!');}
      }
   else{
      textbox.value=selValue;
      alert('The rate cannot be left empty, please make a entry!');}
}

 

Downloads

CalTest.zip - Calendar Test Demo

Calendar.zip - Calendar Control