Click here to Skip to main content
Click here to Skip to main content

Using ASP.NET Calendar for web applications

, 27 Jan 2007
Rate this:
Please Sign up or sign in to vote.
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.

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.

License

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

About the Author

Andrew Golik
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 Pinmemberstixoffire28-Mar-07 0:16 
GeneralRe: Versioning Pinmemberandrew.golik28-Mar-07 1:38 
GeneralRe: Versioning Pinmemberstixoffire28-Mar-07 7:26 
GeneralRe: Versioning Pinmemberandrew.golik28-Mar-07 23:00 
Generalhuge picture Pinmemberdnh27-Jan-07 12:50 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 27 Jan 2007
Article Copyright 2007 by Andrew Golik
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid