ASP.NET
Popup Calendar Custom Control
Many available web based popup calendars are client based javascript solutions.
This
article
presents a popup
calendar
Custom
Control which
can be used for calendar date selection allowing either client
and or server based action against the date selected.
Introduction
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.
Background
The control renders
a calendar for the selected date which is usually setup in the Page_Load
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
to popup.
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
demonstration
application (PopupCalTest) shows
a simple
implementation
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
the 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 POSITION as
being absolute. The hidden visibility means the calendar is not shown on startup
and the absolute position allows position placement of the calendar. Clicking
the calendar button performs a call to a javascript ShowCalendar function
which makes the calendar visible as well as positions it against the calendar
button.
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
an onclick event
call to the ShowCalendar function. The image displayed is the
calendar button and its URL is as defined by the controls property, ImageUrl.
<a id="anchDatePopupCal1" title="Select Date"
onclick="showCalendar('anchDatePopupCal1'); return false;"
name="anchDatePopupCal1">
<IMG alt="Select Calendar Date" src="images/calendar.jpg"
align="absBottom"></a>
<table id="PopupCal1" border="0"
style="VISIBILITY: hidden; POSITION: absolute">
<tr ..... rest of calendar
 |
