PROWAREtech
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>
