Introduction
The calendar control is the most used control for business applications. There is now way to avoid this. If you are using environment where there isn’t such control you have to buy it from outside developers or spend your time implementing it yourself. The article describes the usage of calendar control inside static html page. I faced needs to use calendar control when I had chance to program in ASP environment. I hope you found it useful.
Using the calendar control
The calendar is implemented as standalone asp.net application. So any outside application in IIS can use this functionality. It’s implemented as modal window.
function showCalendar(callbackHandler)
{
window.showModalDialog("CalendarModal.htm", callbackHandler,
"center:yes;help:no;scroll:no;dialogHeight:260px;dialogWidth:230px;");
}
The calendarModal.htm contains iframe that nests a ASP.NET calendar control. It was necessary to do this because of behaivor of IE Modal window. You can not nest form inside modal window. I mean actually you can do this but it makes post into new window and “target” attribute in form tag is ignored. So you can not specify “_self” target there as it’s ignored.
<script type="text/javascript" >
function onLoadCalendarWnd()
{
var result = uxCalendarFrame.document.getElementById("uxResult").innerText;
if(result!="Not Set")
{
var callbackHandler = window.dialogArguments;
callbackHandler(result);
}
}
</script>
<body style="margin:0px;" >
<iframe id="uxCalendarFrame" frameborder="0" width="100%" height="100%"
scrolling="no" onload="onLoadCalendarWnd()" src="Calendar.aspx"></iframe>
</body>
</html>
This iframe contains onload event to call callback function passed into modal window and to cause closing the window in case of date selection.
Passing callback function as dialogArguments.
function startDateCallbackHandler(date)
{
uxStartDate.value = date;
}
function endDateCallbackHandler(date)
{
uxEndDate.value = date;
}
function showCalendar(callbackHandler)
{
window.showModalDialog("CalendarModal.htm", callbackHandler,
"center:yes;help:no;scroll:no;dialogHeight:260px;dialogWidth:230px;");
}
<a href="javascript:showCalendar(startDateCallbackHandler)">Start Date:</a>
<input id="uxStartDate" />
<a href="javascript:showCalendar(endDateCallbackHandler)">End Date:</a>
<input id="uxEndDate" />
As you can see each date input has its own callback handler.
The server side
The calendar page contains only one event handler to indicate that data selection happens. The default value of uxResult is “Not Set”.
protected void uxCalendar_SelectionChanged(object sender, EventArgs e)
{
uxResult.Text = uxCalendar.SelectedDate.ToShortDateString();
}
The value is also used as flag that causes not to close the calendar. Once you have selected the date the modal window is closed.
General 
News 
Question 
Answer 
Joke 
Rant 
Admin 
