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!

NEW! Best Practices: The Integrated Project and Portfolio Management Platform. Hear how IBM Rational Project and Portfolio Management integrated solutions help teams put the right tools and processes in place to maximize the effectiveness and efficiency of project teams and ensure that the business vision is being executed correctly. Learn how to automate and integrate requirements prioritization, top-down project planning, communications and controls, and methodology deployment to keep your scope, costs, and schedules under control. Tackle with an end-to-end approach the management of scope and scope changes, usage of methodology to control and empower project teams, and optimization of resources to align activity costs with the overall project plan. FREE! Go There Now!

NEW! Cook up Web sites fast with CakePHP, Part 4: Use CakePHP's Session and Request Handler components CakePHP is a stable production-ready, rapid-development aid for building Web sites in PHP. This "Cook up Web sites fast with CakePHP" series shows you how to build an online product catalog using CakePHP. FREE! Go There Now!

NEW! Download IBM Data Studio V1.1 Visit IBM developerWorks to download the latest trial version of IBM Data Studio V1.1 at no cost. IBM Data Studio is a comprehensive data management solution that helps you effectively design, develop, deploy and manage your data, databases, and database applications throughout the data management life cycle utilizing a consistent and integrated user interface. Unlike other client-side data management solutions that focus on only one aspect of the application lifecycle or database administration, Data Studio complements the Rational Software Delivery platform, providing unparalleled flexibility for a heterogeneous data server environment across platforms. FREE! Go There Now!

NEW! IBM Rational Systems Development e-Kit As systems increase in complexity, communication between systems and software teams becomes more and more difficult. Now, there’s a way to improve product quality and communication.<br />Read the “Model Driven Systems Development” white paper to see how. Also included in this kit are more educational white papers, customer examples, tutorials, informative Webcasts, and best practices for designing, building and managing systems.<br /> FREE! Go There Now!

NEW! Info 2.0: Harnessing the power of Web 2.0 and Enterprise Mashups Listen to this webcast to get an overview of Info 2.0 and a technical demo of how to quickly build an enterprise mashup. IBM's Info 2.0 technology leverages emerging Web 2.0 technologies such as mashups, feeds, AJAX, and JSON in order to simplify assembly of information using feeds and services. Come learn about the technical elements of Info 2.0 including the Feed Generation framework, Mashup Engine, and mashup assembly components. Learn how to pull information from databases, departmental information, and the Web to create mashups critical to your company’s success. We will also discuss best practices to help you get started. FREE! Go There Now!

NEW! Run your first CICS application on a PC using TXSeries for Windows Learn the basics of the IBM Customer Information Control System (CICS). With a hands-on exercise, learn how to get your first CICS application up and running on your desktop using TXSeries V6.1 for Windows. The tutorial shows you how to download and install a free trial version of TXSeries V6.1. FREE! Go There Now!

NEW! The dirty dozen: preventing common application-level hack attacks As organizations have grown increasingly dependent on online software, the risk of malicious attacks has also become far more serious. Fortunately, well-governed organizations can protect their Web applications by injecting vulnerability assessments and ethical hacks into their software development and delivery processes. This paper describes 12 of the most common hacker attacks and provides basic rules that you can follow to help create more hack-resistant Web applications. FREE! Go There Now!

NEW! Try IBM Rational Asset Manager V7.0 online! You can now evaluate IBM Rational Asset Manager V7.0 online without installing or configuring it on your own system! Rational Asset Manager helps create, modify, govern, find, and reuse any type of development assets, including SOA and systems development assets. Rational Asset Manager helps you reduce software development costs and improve quality by facilitating the reuse of all types of software development-related assets. Visit developerWorks to learn more about this product and register to explore its capabilities online. FREE! Go There Now!

NEW! Webcast: Application security testing and Web compliance Join the IBM Watchfire team for an informative discussion on techniques and best practices to proactively manage Web application security and how to effectively build application security testing into the software development lifecycle (SDLC). In this Software Delivery Platform webcast you will learn: How to better understand potential web application security vulnerabilities, best practices and how to effectively integrate application security testing into the software development lifecycle, the importance of detecting and removing software vulnerabilities during application development. FREE! Go There Now!

NEW! Whitepaper: Achieving consistency between business process models and operational guides Explore how Rational and WebSphere software enable enterprise documentation in SOA environments. Specifically, a new integration between IBM WebSphere® Business Modeler and IBM Rational® Method Composer software can help technical writers more easily keep enterprise operations manuals in sync with changes that are made to business processes, resulting in more accurate and timely documentation that benefits the entire enterprise. FREE! Go There Now!

All FREE IBM® developerWorks Tools!