Click here to Skip to main content
15,867,594 members
Articles / Web Development / HTML

Using ASP.NET Calendar for web applications

Rate me:
Please Sign up or sign in to vote.
3.76/5 (11 votes)
27 Jan 2007CPOL1 min read 52.9K   387   17   5
Using the ASP.NET calendar for web applications.

Sample Image - Calendar.jpg

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.

JavaScript
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.

HTML
<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.

JavaScript
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".

C#
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
Belarus Belarus
Andrew Golik is a software professional working in Minsk, Belarus.
He enjoys design infrastructures based on object oriented paradigm. His programming experience includes ASP, ASP.NET, .NET, COM, JAVA, PHP, DHTML, AJAX, blah blah blah....

Andrew Golik's Blog

Comments and Discussions

 
GeneralVersioning Pin
stixoffire28-Mar-07 0:16
stixoffire28-Mar-07 0:16 
GeneralRe: Versioning Pin
Andrew Golik28-Mar-07 1:38
Andrew Golik28-Mar-07 1:38 
Seems like I fogot to mention the version of framework - use framework2.
Is there any problem to use this stuff?
GeneralRe: Versioning Pin
stixoffire28-Mar-07 7:26
stixoffire28-Mar-07 7:26 
GeneralRe: Versioning Pin
Andrew Golik28-Mar-07 23:00
Andrew Golik28-Mar-07 23:00 
Generalhuge picture Pin
DavidNohejl27-Jan-07 12:50
DavidNohejl27-Jan-07 12:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.