ASP.NET Booking Calendar User Control

Introduction

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!');}
}


About the Author

Mike Knuckey

Mike Knuckey is a software consultant for Barnecourt Solutions www.barnecourt.co.uk, operating from Dartmoor, Devon, UK.

Downloads

Comments

  • Scientist Uncovers Risky gucci obsession

    Posted by BobHotgloff on 05/02/2013 06:38am

    A quick article content will show you all inner workings linked with mizuno in addition to things you want to try and do right away. [url=http://www.mizunogoruhujp.com/]ミズノゴルフ[/url] Insider secrets For nike [url=http://www.mizunogoruhujp.com/ミズノ-ゴルフクラブ-c-1.html]ミズノ グラブ[/url] Extra short guide explains all workings for nike and the thing that one need to do right away. [url=http://www.mizunogoruhujp.com/ゴルフグローブ-c-33.html]ミズノ グローブ[/url] Something that all others does when considering mizuno and moreover what youshould do completely different. [url=http://www.mizunogoruhujp.com/ゴルフバッグ-c-7.html]ミズノ[/url] Third party website unveil 5 completely new things surrounding mizuno that no-one is discussing. [url=http://www.mizunogoruhu.com/]ミズノ グローブ[/url] A trustworthy double take on nike [url=http://www.mizunogoruhu.com/ミズノmizuno-クラブ-c-4.html]ミズノ グラブ[/url] Machines and performance throughout South america - - nike simply leaves without any goodbye [url=http://www.mizunogoruhu.com/ミズノmizuno-アイアン-c-3.html]ミズノ[/url] Economical advice for nike that can be used starting this afternoon. [url=http://www.mizunogoruhu.com/ミズノmizuno-バッグ-c-5.html]ミズノゴルフ[/url] Brief guide unwraps the indisputable info regarding nike plus the way it can cause problems for anybody.

    Reply
  • how to create a user defined calender

    Posted by tapanrout on 09/29/2007 06:20am

    I want to display a calender with the event displayed in the respective dates taken from the database and also the mouseover showing a popup window showing the highlights of the events.So suggest me how to proceed

    • how to create a user defined calender

      Posted by mikeknuckey on 10/17/2007 12:55pm

      Unfortunately your requirements are not very clear and it appears to be asking for changes well beyond the structure of the existing solution. Unless you can be more specific I cannot help at this time.

      Reply
    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • On-demand Event Event Date: September 10, 2014 Modern mobile applications connect systems-of-engagement (mobile apps) with systems-of-record (traditional IT) to deliver new and innovative business value. But the lifecycle for development of mobile apps is also new and different. Emerging trends in mobile development call for faster delivery of incremental features, coupled with feedback from the users of the app "in the wild." This loop of continuous delivery and continuous feedback is how the best mobile …

  • On-demand Event Event Date: July 22, 2014 In this WhatWorks analysis, John Pescatore examines a use case where end users had local administrative rights on their PCs and it had gotten out of hand for this Fortune 500 Energy and Utilities company. The compelling event that prompted the company to reexamine this situation was the migration to Windows 7. In Windows XP, a custom tool that allowed users one of three levels of administrative rights to their workstations would need to be replaced during the Windows …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds