Database Search Solution
(New Version) Search Control
Free ASP.NET Controls
ASP.NET Media Player Control
Flash Video Player Control
ASP.NET Telecommute Jobs
Free IP Location Lookup
Test .Net Regular Expressions
CSS/Table/DIV Page Layouts
Article Sites Master List
.NET Windows Forms
General .NET Framework
Accepting Credit Cards
A Simple Month Calendar Control for ASP.NET
Very often web reports needs input parameters. For example, this can be period of report (i.e. start date and end date). Hopefully we all have built-in calendars for this.
But what to do when we need to select just month and year for our report? The simplest way is to use date select calendar and let user select any day in desired month and then throw day he selected, leaving only month and year. But, is this solution user-friendly; do you like it? I don't consider it to be user-friendly and don't like it as well.
Starting with user controls
So we decided to write our own control for selecting month/year pair. Then we will use it on our page.
Let's start by creating new web-site in Visual Studio 2005 and adding new Web user control to it. You can download sample Month Calendar Visual Studio .NET project here.
Web user control consists of two parts: .ascx file, which is face of our control and contains HTML and ASP.NET 2.0 tags and code-behind partial class.
Now let's create a simple design for our control in .ascx file. Let's start by creating div, and placing a table inside of it. We will have 4 rows and 3 columns in our table (for 12 month).
style="border: 1px solid
black; width: 100px; text-align: center;">
It's pretty simple now and by the way, where is the year? Let's make a field for year input and place it on top of our table in separate div.
rgb(255,238,187); padding-top: 2px;">
If year in the input is correct, we then increase or decrease it by 1. But if test was not passed we simply get the current year (newDate.getFullYear()).
Next step is binding script we wrote to some simple control. I choose to use simple left-right-arrow images. Now let's modify our header div (where the year text box is) to make it look like:
style="background-color: rgb(255,238,187); padding-top: 2px;">
Now our text box is bound to our script by means of small arrows which allow user to go back and forth in year selection.
Making months work
Now we approach to core functionality of our control. Now we should make months which are just static text for now to be ASP.NET link button control.
Replace month's table with the following one:
As you can see I wrapped month names in Link button and added event handler to all links. Now our work with .ascx file is done it's time to switch to code-behind class. In code behind we should first of all set the initial date of calendar and provide a value field so that pages and other controls can retrieve value from month calendar. Let's create a field and a property to hold value:
DateTime _Value =
Next step is to create even handler to our source. Paste next fragment in code-behind class.
sender, EventArgs e)
public event EventHandler DateChanged;
This code snippet is rather simple and somewhat stupid done. But its aim is just to demonstrate the way how it can be done and this way is easy to understand. First of all we try to determine what link was clicked this can be done in numerous ways, you can check sender it, text or any other value. In this case I check Text property of the control (the bad with this, if you change month name in .ascx file you should check to change it in code-behind). Once we're ready with month we can try to parse the year. If year was in incorrect format - then we just take the current one. And the final step is invoking method DateChanged so that other controls and pages can be notified when the date changes.
Using Month select control
Now let's add control to our Default.aspx page. Just drag-n-drop your month select control file from right panel to Default.aspx content pane. You should see something like this:
Now we should register event for month change. To do this, simply add this line to Page_Load:
MonthSelect1.DateChanged += new EventHandler(MonthSelect1_DateChanged);
And then add event handler code. For example:
It was an example of creating simple web user control using ASP.NET 2.0. Certainly there are a lot of variants how similar controls can be designed, but my aim was to provide just a basic tutorial on writing and using web controls.
comments powered by Disqus