Using ASP.NET Calendar for web applications

Andrew Golik

3.76/5 (10 votes)

Jan 27, 2007

CPOL

1 min read

53571

387

Using the ASP.NET calendar for web applications.

Download source files - 2.92 KB

Introduction

The calendar control is the most used control for business applications. There is no way to avoid this. If you are using an environment where there isn't such a control, you have to buy it from outside developers or spend your time implementing it yourself. The article describes the usage of a calendar control inside a static HTML page. I faced needs to use a calendar control when I had a chance to program in ASP. I hope you found this useful.

Using the calendar control

The calendar is implemented as a standalone ASP.NET application. So any outside application in IIS can use this functionality. It's implemented as a modal window.

function showCalendar(callbackHandler)
{
      window.showModalDialog("CalendarModal.htm", 
         callbackHandler, 
         "center:yes;help:no;scroll:no;dialogHeight:260px;dialogWidth:230px;");
}

calendarModal.htm contains an IFrame that nests an ASP.NET Calendar control. It was necessary to do this because of the behaivor of the IE Modal window. You can not nest form inside a modal window. I mean, actually, you can do this, but it makes a post into a new window and the "target" attribute in the form tag is ignored. So you can not specify a "_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 an OnLoad event to call the callback function passed into the modal window and to cause closing of the window in case of a date selection. We pass a 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 a flag that causes not to close the calendar. Once you have selected the date, the modal window is closed.