ASP.NET Calendar Control Example

In the first example, the user is able to select a single date.

In the second example, the user is able to select a range of dates by week or month. All this code is on Microsoft's website, just notice that one needs to set the Calendar.VisibleDate to Calendar.SelectedDate when the selection is changed due to a bug in the control (ASP.NET 2.0).

<%@ Page Language="VB" %>
<%@ Import Namespace="System" %>	
<%@ Import Namespace="System.Configuration" %>	
<%@ Import Namespace="System.Collections" %>	
<%@ Import Namespace="System.Web" %>	
<%@ Import Namespace="System.Web.UI" %>	
<%@ Import Namespace="System.Web.UI.WebControls" %>	
<%@ Import Namespace="System.Web.UI.WebControls.WebParts" %>	
<%@ Import Namespace="System.Web.UI.HtmlControls" %>	

<script runat="server">

	Protected Sub Calendar1_Init(ByVal sender As Object, ByVal e As System.EventArgs)
		Calendar1.SelectedDate = Date.Today()
		Calendar1.VisibleDate = Date.Today()
	End Sub

	Protected Sub Calendar1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs)
		pageContent.InnerHtml = "You've selected: " & Calendar1.SelectedDate
	End Sub
</script>

<html>
<head>
	<title>Calendar Example</title>
</head>
<body>
	<form id="form1" runat="server">
	<div>
		<asp:Calendar ID="Calendar1" runat="server" OnInit="Calendar1_Init"
		BackColor="White" BorderColor="White" BorderWidth="1px"
		Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="190px"
		NextPrevFormat="FullMonth" Width="350px" OnPreRender="Calendar1_PreRender">
			<SelectedDayStyle BackColor="#333399" ForeColor="White" />
			<TodayDayStyle BackColor="#CCCCCC" />
			<OtherMonthDayStyle ForeColor="#999999" />
			<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" VerticalAlign="Bottom" />
			<DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
			<TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px" Font-Bold="True"
				Font-Size="12pt" ForeColor="#333399" />
		</asp:Calendar>
	</div>
	</form>
	<div id="pageContent" runat="server"></div>
</body>
</html>
<%@ Page Language="VB" %>
<%@ Import Namespace="System" %>	
<%@ Import Namespace="System.Configuration" %>	
<%@ Import Namespace="System.Collections" %>	
<%@ Import Namespace="System.Web" %>	
<%@ Import Namespace="System.Web.UI" %>	
<%@ Import Namespace="System.Web.UI.WebControls" %>	
<%@ Import Namespace="System.Web.UI.WebControls.WebParts" %>	
<%@ Import Namespace="System.Web.UI.HtmlControls" %>	

<script runat="server">

	Private Sub FillPage()
		pageContent.InnerHtml = "You've selected: " & Calendar1.SelectedDates.Item(0) & " to " & Calendar1.SelectedDates.Item(Calendar1.SelectedDates.Count - 1)
	End Sub
	
	Protected Sub Calendar1_Init(ByVal sender As Object, ByVal e As System.EventArgs)
		Calendar1.SelectedDate = Date.Today()
		Calendar1.VisibleDate = Date.Today()
	End Sub

	Protected Sub Calendar1_VisibleMonthChanged(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MonthChangedEventArgs)
		FillPage()
	End Sub

	Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
		Calendar1.VisibleDate = Calendar1.SelectedDate 'This is needed because of a bug in the calendar
		FillPage()
	End Sub

	Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
		If Not Page.IsPostBack Then
			FillPage()
		End If
	End Sub
</script>

<html>
<head>
	<title>Calendar Example</title>
</head>
<body>
	<form id="form1" runat="server">
	<div>
		<asp:Calendar ID="Calendar1" runat="server" OnInit="Calendar1_Init"
		BackColor="White" BorderColor="White" BorderWidth="1px" Font-Names="Verdana"
		Font-Size="9pt" ForeColor="Black" Height="190px" NextPrevFormat="FullMonth"
		Width="350px" SelectionMode="DayWeekMonth"
		OnVisibleMonthChanged="Calendar1_VisibleMonthChanged"
		OnSelectionChanged="Calendar1_SelectionChanged">
			<SelectedDayStyle BackColor="#333399" ForeColor="White" />
			<TodayDayStyle BackColor="#CCCCCC" />
			<OtherMonthDayStyle ForeColor="#999999" />
			<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" VerticalAlign="Bottom" />
			<DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
			<TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px" Font-Bold="True"
				Font-Size="12pt" ForeColor="#333399" />
		</asp:Calendar>
	</div>
	</form>
	<div id="pageContent" runat="server"></div>
</body>
</html>