PROWAREtech

articles » archived » asp-net » calendar-control-example

ASP.NET: Calendar Control Example

Use the Web Form Calendar Server Control (.NET Framework).

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>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE