ASP.Net: Calendar Web Control

Introduction

Calendar web control is provided by Microsoft.Net framework, it can display a calendar in a web page, user can navigate to any day in any year, user can also select dates, and it can also used to display some information, like appointment or schedule, in the calendar.

This article gives you an example application of programming on Calendar control. We have a XML file which has holiday data in year 2002, we use a DataSet object to read this XML file and mark them on the Calendar, when you select a date, the date and a description, if it is a holiday, will be displayed in a Label control.

In this article I will provide a step-by-step guide to show you how to:

1. Read XML file into a DataSet object
2. Display the DataSet data in a DataGrid
3. Program Calendar control to display information
4. Program Calendar control when user select a date
   
   

Requirement

You need the following things to do this work

1. Windows 2000 Pro or Server with service pack 2 as your operation system.
2. Visual Studio.Net is installed on your system
   

Create a XML file and read it into a DataSet object

1. Start your Visual Studio.Net, from the File menu, point to New, and then click Project to display the New Project dialog box.
2. Select Visual C# Projects in the Project Types pane, and then select ASP.Net Web Application. Name the project Calendar, then click OK. Visual Studio will add this project to Solution Explorer and display a new web page in the designer.
3. From the File menu, point to New, and then click File. The New File dialog box appears.
4. Select XML File and click Open.
5. Paste the following code into the editor below the XML declaration, (Right-click the editor and select Paste as HTML )

   <holidays>
   
     <holiday>
   
       <Date>2002/1/1</Date>
   
       <Description>New Years' Day</Description>
   
     </holiday>
   
     <holiday>
   
       <Date>2002/1/15</Date>
   
       <Description>Martin Luther King</Description>
   
     </holiday>
   
     <holiday>
   
       <Date>2002/2/19</Date>
   
       <Description>President's Day</Description>
   
     </holiday>
   
     <holiday>
   
       <Date>2002/3/28</Date>
   
       <Description>Memorial Day</Description>
   
     </holiday>
   
     <holiday>
   
       <Date>2002/7/4</Date>
   
       <Description>Independence Day</Description>
   
     </holiday>
   
     <holiday>
   
       <Date>2002/9/3</Date>
   
       <Description>Labor Day</Description>
   
     </holiday>
   
     <holiday>
   
       <Date>2002/10/8</Date>
   
       <Description>Columbus Day</Description>
   
     </holiday>
   
     <holiday>
   
       <Date>2002/11/12</Date>
   
       <Description>Veterans Day</Description>
   
     </holiday>
   
     <holiday>
   
       <Date>2002/11/22</Date>
   
       <Description>Thanksgiving Day</Description>
   
     </holiday>
   
     <holiday>
   
       <Date>2002/12/25</Date>
   
       <Description>Christmas Day</Description>
   
     </holiday>
   
   </holidays>

6. From the File menu, point to Save XMLFile1 As. Name the file holiday.xml and click Save.
7. In Solution Explorer window, select WebForm1.aspx, right click and select View Code.
8. Declare a DataSet Object, under public class WebForm1

   protected DataSet dsHoliday = new DataSet("holiday");
   
    

   In private void Page_Load method, write this:
   

   dsHoliday.ReadXml("C:\Inetpub\wwwroot\Calendar\holiday.xml");
   
    

9. Now, you have read the XML file into your DataSet object.
   

Display the XML file in a DataGrid control

1. From the Web Forms tab of the Toolbox, drag a DataGrid control onto the design view of WebForm1.aspx page.
2. Add the following three lines into the private void Page_Load method

   DataGrid1.DataSource = dsHoliday;
   
   DataGrid1.DataMember = "holiday";
   
   DataGrid1.DataBind();
   
    

3. In Solution Explorer, right-click the page and choose Build and Browse. Confirm that a list of holiday is displayed in the grid.

Programming on the Calendar control

Now the XML data is already in our DataSet object, we need to do is mark them in the Calendar control by programming on the DayRender event of Calendar object. When the Calendar control is generating the calendar data, it raises an event you can handle. You create a event handler to hook this event, the control calls your event handler for each day as it is preparing the day for display, and you can then programmatically examine which date is being rendered and customize it appropriately.

1. From the Web Forms tab of the Toolbox, drag a Calendar control onto the design view of WebForm1.aspx page.
2. If you like you can change the appearance by clicking Auto Format... like under the Properties window, you can also change individual style properties to change the appearance.
3. In Properties window, click Event button, and select DayRender event, double click it. This will create an event handler in your code view of WebForm1.aspx page.
   private void Calendar1_DayRender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
   
4. Copy the following code into this Calendar1_DayRender method.

   DataGrid1.DataSource = dsHoliday;
   
   Style holidayStyle = new Style();
   
   holidayStyle.ForeColor = System.Drawing.Color.Red;
   
   
   
   foreach (DataRow myDataRow in dsHoliday.Tables["holiday"].Rows)
   
   {
   
    string s = myDataRow["Date"].ToString();
   
    DateTime holiday_date = DateTime.Parse(s);
   
    if ( (e.Day.Date == holiday_date) && 
   
    (!e.Day.IsOtherMonth)               )
   
    {
   
    e.Cell.ApplyStyle(holidayStyle);
   
    }
   
   } 

   At first, set the DataSource of DataGrid1 to dsHoliday DataSet. Then create a Style to mark the calendar red for the holidays.
   When Calendar control generate the calendar data, this DayRender event is fired for every day in the calendar, the date is in the parameter DayRenderEventArgs e, the above code compares the date in parameter e and every record in dsHoliday DataSet, if the date in parameter e equals to a date in dsHoliday record, then apply the holidayStyle to that date cell in calendar.
   
5. Build the project and run, you will see the Calendar control displayed in your browser, then navigate it to the months with a holiday, you will see the holiday date is displayed in red.

Programming When User Select a Date from Calendar

When user click on a date on a Calendar control, the Calendar control fires a SelectionChanged Event, developer can add a event handler and some code to program it. In this sample, when user click on a date, the date string, like Wednesday, July 17, 2002, will be displayed in a Label control, if that date is a holiday, the description of the holiday is also displayed.

1. In Properties window, click Event button, and select SelectionChanged event, double click it. This will create an event handler in your code view of WebForm1.aspx page.
   private void Calendar1_SelectionChanged(object sender, System.EventArgs e)
   
2. In the design view of WebForm1.aspx, drag a Label control from the Toolbox.
3. Copy the following code into this Calendar1_SelectionChanged method.

   
   
   string holiday_descr = "";
   
   if (e != null){
   
   System.Web.UI.WebControls.Calendar cl = 
           (System.Web.UI.WebControls.Calendar)sender;
   
   foreach (DataRow myDataRow in dsHoliday.Tables["holiday"].Rows)
   
   {
   
   DateTime holiday_date = DateTime.Parse(myDataRow["Date"].ToString());
   
   if ( cl.SelectedDate.Date == holiday_date ){
   
   holiday_descr = ", " + myDataRow["Description"].ToString();
   
   }
   
   }
   
   Label1.Text = cl.SelectedDate.Date.ToLongDateString() + holiday_descr;  
   
   }
   
    

   When the Calendar control fires this event, the parameter object sender is the Calendar control itself, the code above will cast the sender to Calendar object, then you can use SelectedDate property of Calendar control. The above code will go over all the records to find whether the selected date is a holiday, if it is, then get the description of the holiday.
4. Build the project and run it, when you click on a date, the date string will be displayed in the Label control.
   

More ASP.NET Code Articles
More By aspfree

developerWorks - FREE Tools!

IBM DB2 Deep Compression ROI Tool The IBM DB2 Deep Compression ROI tool is designed for DBA’s and IT management personnel to perform a clinical analysis of the cost savings gained from the Storage Optimization feature of DB2 9 for Linux, UNIX and Windows. The feature, also known as Deep Compression, compresses data that lies within a database by up to 80% at times. FREE! Go There Now!

IBM – Taking Web 2.0 to Work You'll get answers to many questions and more from David Barnes, Lead Evangelist for IBM Emerging Internet Technologies. David will discuss aspects of Web 2.0 that bring value to corporations, academia, and government. He'll also discuss IBM's vision around Web 2.0, including the importance of remixability and consumability. The discussion will culminate with examples of various IBM Software Group solutions you can use to get ahead of the Web 2.0 adoption curve. FREE! Go There Now!

NEW! Build Web services with transport-level security using Rational Application Developer V7, Part 1: Build Web services and Web services clients Build secure Web services with transport-level security using IBM Rational Application Developer V7 and IBM WebSphere Application Server V6.1. Follow this three-part series for step-by-step instructions about how to develop Web services and clients, configure HTTP basic authentication, and configure HTTP over SSL (HTTPS). This first part of the series walks you through building a Web service for a simple calculator application. You generate and test two different types of Web services clients: a Java Platform, Enterprise Edition (Java EE) client and a stand-alone Java client. You also handle user-defined exceptions in Web services. FREE! Go There Now!

NEW! Don't wait! Try the Rational Application Developer (RAD) v7.5 open beta code today Download the Rational Application Developer (RAD) v7.5 open beta code and start developing applications for the JEE5 standard which features EJB3.0, JPA, JSF 1.2, JSP 2.1 and Servlet 2.5 standards. When you use this beta you will see how you can increase developer productivity for already existing applications with improved support for refactoring, as well as adding new features to existing applications. In addition, the beta provides tooling for JD Edwards, Oracle, SAP, Siebel and PeopleSoft to improve the developer productivity with these enterprise systems. FREE! Go There Now!

NEW! Download DB2 9.5 for Linux, Unix, and Windows Download a free trial version of IBM DB2 9.5 for Linux, UNIX, and Windows. DB2 9 is the result of a five-year development project that transformed traditional (static) database technology into an interactive data server that merges the high performance and ease of use of DB2 with the self-describing benefits of XML. FREE! Go There Now!

NEW! Evaluate Rational Business Developer V7.1 Visit IBM developerWorks to download a free trial version of IBM Rational Business Developer V7.1. Rational Business Developer offers rapid and simplified development of business applications and services through Enterprise Generation Language (EGL) tools, generating Java or mainframe solutions while shielding developers from technical complexities. FREE! Go There Now!

NEW! Rational Talks to You:Per Kroll on Rational Method Composer Plug-in customization Join this Rational Talks to You teleconference on December 11 at 1:00 pm ET to get tips on building your own plugins with Rational Method Composer. Get your questions answered! FREE! Go There Now!

NEW! Trial download: IBM Rational Manual Tester V7.0.1 Try the latest version of IBM Rational Manual Tester V7.0.1 by downloading a free trial from IBM developerWorks. This manual test authoring and execution tool promotes test step reuse to reduce the impact of software change on testers and business analysts and addresses the needs of teams performing at least a portion of their testing manually. FREE! Go There Now!

NEW! Try the IBM SOA Sandbox for Process Visit IBM developerWorks to try the IBM SOA Sandbox for process. The SOA Sandbox for process focuses on providing a trial environment with the necessary tooling and components required to gain a better understanding of business processes and how to best improve existing business processes to derive value quickly. FREE! Go There Now!

NEW! Webcast: IBM Rational Build Forge - Beyond the Build The discipline of assembling and delivering software is maturing beyond standard developer-centric compile/test software builds. The end-to-end software development lifecycle is emerging as the new focus moves “Beyond the Build.” Join this on demand webcast to learn about methods for streamlining software delivery and key capabilities of the IBM Rational Build Forge framework for automating build and release management in environments of any size. FREE! Go There Now!

All FREE IBM® developerWorks Tools!