Popup Calendar Custom Control
presents a popup
can be used for calendar date selection allowing either client
and or server based action against the date selected.
When developing enterprise ASP.NET applications it is common
to have a date selection facility. The calendar control supported by .NET
and Visual Studio although providing a basic calendar do not support a popup
function. The calendar control presented here offers a date selection facility
while "popping up" on button selection.
The control renders
a calendar for the selected date which is usually setup in the
event handler. Each of the days selection, month or year dropdown listbox
change generates a
SelectionChange event. The
calendar is initially initialised as "hidden" clicking the assigned
button image cause the calendar to be made "visible" and hence appear
The control has one events, is:
SelectionChange - called when an available day is selected
or a month or year dropdown listbox change is made.
The control includes the following additional properties to the standard control:
- Calendar Button alignment.
- Calendar Button Image URL.
- Available day background colour.
- Selected day background colour.
- Calendar Day.
- Calendar Month.
- Calendar Year.
- Calendar number of Days in selected Month (Get only).
- Click on all available days.
- Close popup button.
- Set Day to zero on Month Year selection change.
The demonstration application
(PopupCalTest) displays a day, month and year ASP dropdown listboxes plus
a "Go" button. The popup control generates a button, the image of which is
user selectable through the
ImageUrl property. Selection of this button causes
the popup calendar to be displayed (the example above was run on 22 May 2007).
On the example the
ClickOnAll property if false (default setting) which means
only days from the 22th onwards are selectable.
Using the control
The control properties
allow for a level of customisation and are fairly self explanatory. To use
the control the user will need to initialise the Day, Month and Year properties
which can be done in the
Page_Load event handler in the application
using the control. Once a date is set on the popup calendar a postback event
is generated to the
SelectionChange event handler thereby allowing
the application to take the necessary action against the selected date. The
application (PopupCalTest) shows
of the control which uses a set of dropdown lisboxes to show the selected
date. The "Go" button instigates a validation process before returning
control to the codebehind file for the application In this simple test application
GoBtn_Click event handler displays the selected date below
the "Go" button.
Point of Interest
The major part of the control
is the rendering of the ca lander through a series of html tables. The outer
table style attribute being set as
VISIBILITY being hidden and
being absolute. The hidden visibility means the calendar is not shown on startup
and the absolute position allows position placement of the calendar. Clicking
which makes the calendar visible as well as positions it against the calendar
The control generates and renders an HTML anchor tag which wraps a HTML image
tag (the calendar button) before it renders the calendar. The anchor contains
call to the
ShowCalendar function. The image displayed is the
calendar button and its URL is as defined by the controls property,
<a id="anchDatePopupCal1" title="Select Date"
onclick="showCalendar('anchDatePopupCal1'); return false;"
<IMG alt="Select Calendar Date" src="images/calendar.jpg"
<table id="PopupCal1" border="0"
style="VISIBILITY: hidden; POSITION: absolute">
<tr ..... rest of calendar