Birthdays, anniversaries, appointments, holidays, bill payments, and project deadlines. All these have one thing in common. Guess? It's a date. It is difficult to remember dates so for that calendar comes to your rescue.
ASP.NET provides a Calendar control that is used to display a calendar on the Web page.
This control displays a one-month calendar that allows the user to select dates and move to the next and previous months.
By default, this control displays the name of the current month, day headings for the days of the weeks, days of the month and arrow characters for navigation to the previous or next month.
The class hierarchy for this control is as follows:
Object -> Control -> WebControl -> Calendar
The Calendar is complex, powerful Web server control that you can use to add calendar feature to your web page. We can use calendar control display any date between 0 A.D. and 9999A.D.
The Calendar control is represented as:
<asp:Calendar ID="Calendar1" runat="server" </asp:Calendar>
element in Source view.
The Calendar control when rendered to a user browser, it generates an HTML <table> element and a set of associated JavaScript.
The Calender control can be used to select a single date or multiple dates. The SelectionMode property is used for this.
The SelectionMode properties are as:
| Property | Description |
| Day | Allow selection of a single date. |
| DayWeek | Allows the selection of a single date or a complete week. |
| DayWeekMonth | Allow selection of single date, complete week or complete month. |
| None | Doesn't allow you to select any date. |
You can also set the properties for the calendar either by selecting the Auto Format property by right clicking on the Calendar control or by manually setting them one by one.
Calendar Properties
There are many properties of Calendar control to customize the functionality and appearance. These can be read at msdn.
Let us start with a basic example that will help you in making a small application showing list of Indian holidays.
Default.aspx code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p style="text-align: center">
<b></b>
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial Black" Font-Size="Medium"
ForeColor="#0066FF">Indian List of Holidays 2009</asp:Label><br /></b>
</p>
<asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66"
BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
ForeColor="#663399" ShowGridLines="True" OnDayRender="Calendar1_DayRender" OnSelectionChanged="Calendar1_SelectionChanged"
OnVisibleMonthChanged="Calendar1_VisibleMonthChanged">
<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
<SelectorStyle BackColor="#FFCC66" />
<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
<OtherMonthDayStyle ForeColor="#CC9966" />
<NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
<DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
<TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
</asp:Calendar>
<br />
<b></b>
<asp:Label ID="LabelAction" runat="server"></asp:Label><br />
</b>
</div>
</form>
</body>
</html>
Code behind file
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections;
public partial class _Default : System.Web.UI.Page
{
Hashtable HolidayList;
protected void Page_Load(object sender, EventArgs e)
{
HolidayList = Getholiday();
Calendar1.Caption = "Calender - Author: Puran Singh Mehra";
Calendar1.FirstDayOfWeek = FirstDayOfWeek.Sunday;
Calendar1.NextPrevFormat = NextPrevFormat.ShortMonth;
Calendar1.TitleFormat = TitleFormat.Month;
Calendar1.ShowGridLines = true;
Calendar1.DayStyle.Height = new Unit(50);
Calendar1.DayStyle.Width = new Unit(150);
Calendar1.DayStyle.HorizontalAlign = HorizontalAlign.Center;
Calendar1.DayStyle.VerticalAlign = VerticalAlign.Middle;
Calendar1.OtherMonthDayStyle.BackColor = System.Drawing.Color.AliceBlue;
}
private Hashtable Getholiday()
{
Hashtable holiday = new Hashtable();
holiday["1/1/2009"] = "New Year";
holiday["1/5/2009"] = "Guru Govind Singh Jayanti";
holiday["1/8/2009"] = "Muharam (Al Hijra)";
holiday["1/14/2009"] = "Pongal";
holiday["1/26/2009"] = "Republic Day";
holiday["2/23/2009"] = "Maha Shivaratri";
holiday["3/10/2009"] = "Milad un Nabi (Birthday of the Prophet";
holiday["3/21/2009"] = "Holi";
holiday["3/21/2009"] = "Telugu New Year";
holiday["4/3/2009"] = "Ram Navmi";
holiday["4/7/2009"] = "Mahavir Jayanti";
holiday["4/10/2009"] = "Good Friday";
holiday["4/12/2009"] = "Easter";
holiday["4/14/2009"] = "Tamil New Year and Dr Ambedkar Birth Day";
holiday["5/1/2009"] = "May Day";
holiday["5/9/2009"] = "Buddha Jayanti and Buddha Purnima";
holiday["6/24/2009"] = "Rath yatra";
holiday["8/13/2009"] = "Krishna Jayanthi";
holiday["8/14/2009"] = "Janmashtami";
holiday["8/15/2009"] = "Independence Day";
holiday["8/19/2009"] = "Parsi New Year";
holiday["8/23/2009"] = "Vinayaka Chaturthi";
holiday["9/2/2009"] = "Onam";
holiday["9/5/2009"] = "Teachers Day";
holiday["9/21/2009"] = "Ramzan";
holiday["9/27/2009"] = "Ayutha Pooja";
holiday["9/28/2009"] = "Vijaya Dasami (Dusherra)";
holiday["10/2/2009"] = "Gandhi Jayanti";
holiday["10/17/2009"] = "Diwali & Govardhan Puja";
holiday["10/19/2009"] = "Bhaidooj";
holiday["11/2/2009"] = "Guru Nanak Jayanti";
holiday["11/14/2009"] = "Children's Day";
holiday["11/28/2009"] = "Bakrid";
holiday["12/25/2009"] = "Christmas";
holiday["12/28/2009"] = "Muharram";
return holiday;
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
LabelAction.Text = "Date changed to :" + Calendar1.SelectedDate.ToShortDateString();
}
protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
{
LabelAction.Text = "Month changed to :" + e.NewDate.ToShortDateString();
}
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
if (HolidayList[e.Day.Date.ToShortDateString()] != null)
{
Literal literal1 = new Literal();
literal1.Text = "<br/>";
e.Cell.Controls.Add(literal1);
Label label1 = new Label();
label1.Text = (string)HolidayList[e.Day.Date.ToShortDateString()];
label1.Font.Size = new FontUnit(FontSize.Small);
e.Cell.Controls.Add(label1);
}
}
}
Code review:
In the above code we have used DayRender, SelectionChanged and VisibleMonthChanged events. A method called Getholiday() is added to populate a collection of holidays. In the Calendar1_DayRender event handler we are displaying the holiday in a label, which is created, and is added to the Cell objects Controls collection.
Output of the above code.
Conclusion
I hope that this article would have helped you in understanding the calendar control. Certainly there are a lot of variants how calendar control can be designed, but my aim was to provide just a basic tutorial on writing and using Calendar controls.
Please share it if you know more about this article. Your feedback and constructive contributions are welcome.