ASP.NET Tutorial/ASP.net Controls/Calendar
Содержание
- 1 Appointment based on Calendar (C#)
- 2 Bind selected dates from a calendar to asp:BulletedList
- 3 Calendar control and some of its colorful styles
- 4 Calendar day renderer event (C#)
- 5 Calendar selection changed event (C#)
- 6 Calendar style
- 7 Calendar Control
- 8 Using DayRender
- 8.1 Controlling how a day is rendered in the Calendar (C#)
- 8.2 Controlling how a day is rendered in the Calendar (VB)
- 8.3 Convert Selected Date from Calendar to Long Date String
- 8.4 Creating a Pop-up Date Picker
- 8.5 Format value from asp:Calendar as "dddd, MMMM dd yyyy" (VB.net)
- 8.6 Format value retrieved from asp:Calendar (C#)
- 8.7 Important properties of the Calendar control
- 8.8 Retrieving a range of dates from a selection (C#)
- 8.9 Retrieving a range of dates from a selection (VB)
- 8.10 title style, day header style, today style, and other month day style
Appointment based on Calendar (C#)
<source lang="csharp">
File: Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Appointment" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Untitled Page</title>
</head> <body>
<form id="form1" runat="server">
<tr> <td> Choose day:
<asp:Calendar ID="MyCalendar" runat="server" OnDayRender="MyCalendar_DayRender" OnSelectionChanged="MyCalendar_SelectionChanged"> </asp:Calendar> </td> <td > Choose time:
<asp:ListBox ID="lstTimes" runat="server" Height="168px" Width="136px"></asp:ListBox></td> </tr>
</form>
</body> </html>
File: Default.aspx.cs using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class Appointment : System.Web.UI.Page {
protected void MyCalendar_SelectionChanged(object sender, EventArgs e) { lstTimes.Items.Clear(); switch (MyCalendar.SelectedDate.DayOfWeek) { case DayOfWeek.Monday: lstTimes.Items.Add("10:00"); lstTimes.Items.Add("10:30"); lstTimes.Items.Add("11:00"); break; default: lstTimes.Items.Add("10:00"); lstTimes.Items.Add("10:30"); lstTimes.Items.Add("11:00"); lstTimes.Items.Add("11:30"); lstTimes.Items.Add("12:00"); lstTimes.Items.Add("12:30"); break; } } protected void MyCalendar_DayRender(object sender, DayRenderEventArgs e) { if (e.Day.Date.Day == 28 && e.Day.Date.Month == 2) { e.Cell.BackColor = System.Drawing.Color.Yellow; Label lbl = new Label(); lbl.Text = "
My Birthday!"; e.Cell.Controls.Add(lbl); } if (e.Day.Date.Year > 2000) { e.Day.IsSelectable = false; } }
}</source>
Bind selected dates from a calendar to asp:BulletedList
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e) { bltResults.DataSource = Calendar1.SelectedDates; bltResults.DataBind(); }
</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>Calendar SelectionMode</title>
</head> <body>
<form id="form1" runat="server">
<asp:Calendar id="Calendar1" SelectionMode="DayWeekMonth" runat="server" />
<asp:Button id="btnSubmit" Text="Submit" OnClick="btnSubmit_Click" Runat="server" />
<asp:BulletedList id="bltResults" DataTextFormatString="{0:d}" Runat="server" />
</form>
</body> </html></source>
Calendar control and some of its colorful styles
<source lang="csharp">
<%@ Page language="C#"%> <html> <head runat="server">
<title>Calendars</title>
</head> <body>
<form id="Form1" runat="server"> <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#3366CC" BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="200px" SelectedDate="2007-08-16" VisibleDate="2007-08-16" Width="220px"> <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" /> <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" /> <WeekendDayStyle BackColor="#CCCCFF" /> <OtherMonthDayStyle ForeColor="#999999" /> <TodayDayStyle BackColor="White" ForeColor="Transparent" /> <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" /> <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" /> <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" /> </asp:Calendar> </form>
</body> </html></source>
Calendar day renderer event (C#)
<source lang="csharp">
File: Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CalendarTest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Untitled Page</title>
</head> <body>
<form id="form1" runat="server">
<asp:Calendar ID="MyCalendar" runat="server" BackColor="White" BorderColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="190px" NextPrevFormat="FullMonth" OnDayRender="MyCalendar_DayRender" OnSelectionChanged="MyCalendar_SelectionChanged" SelectionMode="DayWeek" Width="350px"> <SelectedDayStyle BackColor="#333399" ForeColor="White" /> <OtherMonthDayStyle ForeColor="#999999" /> <TodayDayStyle BackColor="#CCCCCC" /> <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>
<asp:Label ID="lblDates" runat="server"></asp:Label>
</form>
</body> </html>
File: Default.aspx.cs using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class CalendarTest : System.Web.UI.Page {
protected void MyCalendar_SelectionChanged(object sender, EventArgs e) { lblDates.Text = "You selected these dates:
"; foreach (DateTime dt in MyCalendar.SelectedDates) { lblDates.Text += dt.ToLongDateString() + "
"; } } protected void MyCalendar_DayRender(object sender, DayRenderEventArgs e) { if (e.Day.Date.Day == 28 && e.Day.Date.Month == 2) { e.Cell.BackColor = System.Drawing.Color.Yellow; Label lbl = new Label(); lbl.Text = "
My Birthday!"; e.Cell.Controls.Add(lbl); }
}
}</source>
Calendar selection changed event (C#)
<source lang="csharp">
File: Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CalendarTest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Untitled Page</title>
</head> <body>
<form id="form1" runat="server">
<asp:Calendar ID="MyCalendar" runat="server" BackColor="White" BorderColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="190px" NextPrevFormat="FullMonth" OnDayRender="MyCalendar_DayRender" OnSelectionChanged="MyCalendar_SelectionChanged" SelectionMode="DayWeek" Width="350px"> <SelectedDayStyle BackColor="#333399" ForeColor="White" /> <OtherMonthDayStyle ForeColor="#999999" /> <TodayDayStyle BackColor="#CCCCCC" /> <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>
<asp:Label ID="lblDates" runat="server"></asp:Label>
</form>
</body> </html>
File: Default.aspx.cs using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class CalendarTest : System.Web.UI.Page {
protected void MyCalendar_SelectionChanged(object sender, EventArgs e) { lblDates.Text = "You selected these dates:
"; foreach (DateTime dt in MyCalendar.SelectedDates) { lblDates.Text += dt.ToLongDateString() + "
"; } } protected void MyCalendar_DayRender(object sender, DayRenderEventArgs e) { if (e.Day.Date.Day == 28 && e.Day.Date.Month == 2) { e.Cell.BackColor = System.Drawing.Color.Yellow; Label lbl = new Label(); lbl.Text = "
My Birthday!"; e.Cell.Controls.Add(lbl); }
}
}</source>
Calendar style
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Calendar</title>
</head> <body>
<form id="form1" runat="server">
Calendar Control
Styles
<asp:Calendar ID="Calendar1" runat="server" SelectionMode="DayWeekMonth" CellPadding="7" CellSpacing="5" DayNameFormat="FirstTwoLetters" FirstDayOfWeek="Monday" NextMonthText="Next >" PrevMonthText="< Prev" ShowGridLines="True" DayStyle-BackColor="White" DayStyle-ForeColor="Black" DayStyle-Font-Names="Arial"> <DayHeaderStyle BackColor="Black" Font-Names="Arial Black" ForeColor="White" /> <SelectedDayStyle BackColor="Cornsilk" Font-Bold="True" Font-Italic="True" Font-Names="Arial" ForeColor="Blue" /> <SelectorStyle BackColor="Cornsilk" Font-Names="Arial" ForeColor="Red" /> <WeekendDayStyle BackColor="LavenderBlush" Font-Names="Arial" ForeColor="Purple" /> <OtherMonthDayStyle BackColor="LightGray" Font-Names="Arial" ForeColor="White" /> <TodayDayStyle BackColor="Cornsilk" Font-Bold="True" Font-Names="Arial" ForeColor="Green" /> <NextPrevStyle BackColor="DarkGray" Font-Names="Arial" ForeColor="Yellow" /> <TitleStyle BackColor="Gray" Font-Names="Arial Black" ForeColor="White" HorizontalAlign="Left" /> </asp:Calendar>
</form>
</body> </html></source>
Calendar with events
<source lang="csharp">
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CalenderRender" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Calender DayRender</title>
</head> <body>
<form id="form1" runat="server">
Using DayRender
<asp:Calendar ID="calRender" runat="server" BackColor="White" BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="504px" NextPrevFormat="ShortMonth" Width="664px" OnDayRender="calRender_DayRender" OnSelectionChanged="calRender_SelectionChanged" > <SelectedDayStyle BackColor="#333399" ForeColor="White" /> <OtherMonthDayStyle ForeColor="#999999" /> <DayStyle BackColor="#CCCCCC" /> <TodayDayStyle BackColor="#999999" ForeColor="White" /> <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" /> <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" /> <TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="9pt" ForeColor="White" Height="9pt" /> </asp:Calendar> <asp:Label ID="labMessage" runat="server" />
</form>
</body> </html> File: Default.aspx.cs using System.Collections; using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Text; public class CalenderEvent {
public enum EventTypes { AllDayEvent, Appointment, ToDoReminder } private string _shortDescription; private string _fullDescription; private DateTime _eventDate; private EventTypes _eventType; public CalenderEvent(string shortDescription, string fullDescription, DateTime eventDate, EventTypes eventType) { _shortDescription = shortDescription; _fullDescription = fullDescription; _eventDate = eventDate; _eventType = eventType; } public override string ToString() { StringBuilder sb = new StringBuilder(); sb.Append(this.Date.ToShortDateString()); sb.Append(" -- "); sb.Append(this.EventTypeString); sb.Append("
"); sb.Append(FullDescription); return sb.ToString(); } public string FullDescription { get { return _fullDescription; } set { _fullDescription = value; } } public string ShortDescription { get { return _shortDescription; } set { _shortDescription = value; } } public DateTime Date { get { return _eventDate; } set { _eventDate = value; } } public EventTypes Type { get { return _eventType; } set { _eventType = value; } } public string EventTypeString { get { if (this.Type == EventTypes.AllDayEvent) return "All Day Event"; else if (this.Type == EventTypes.Appointment) return "Appointment"; else return "To Do Reminder"; } } public string ImageFile { get { if (this.Type == EventTypes.AllDayEvent) return "cal_allday.gif"; else if (this.Type == EventTypes.Appointment) return "cal_appointment.gif"; else return "cal_todo.gif"; } }
} public partial class CalenderRender : System.Web.UI.Page {
private ArrayList _events; protected void Page_Load(object sender, EventArgs e) { FillCalender(); } private void FillCalender() { _events = new ArrayList(); _events.Add(new CalenderEvent("A", "event a", DateTime.Now, CalenderEvent.EventTypes.Appointment)); _events.Add(new CalenderEvent("B", "event b", DateTime.Now.AddDays(2.0), CalenderEvent.EventTypes.ToDoReminder)); _events.Add(new CalenderEvent("C", "event c", DateTime.Now.AddDays(5.0), CalenderEvent.EventTypes.AllDayEvent)); } protected void calRender_DayRender(object sender, DayRenderEventArgs e) { DateTime renderDay = e.Day.Date; foreach (CalenderEvent cEvent in _events) { if (renderDay.ToShortDateString() == cEvent.Date.ToShortDateString()) { Image img = new Image(); img.ImageUrl = "~/images/" + cEvent.ImageFile; img.ToolTip = cEvent.ShortDescription; img.ImageAlign = ImageAlign.Middle; e.Cell.Controls.Add(img); } } } protected void calRender_SelectionChanged(object sender, EventArgs e) { DateTime selectDay = calRender.SelectedDate; string message = ""; foreach (CalenderEvent cEvent in _events) { if (selectDay.ToShortDateString() == cEvent.Date.ToShortDateString()) { message = cEvent.ToString(); } } if (message == "") labMessage.Text = "No event scheduled for " + selectDay.ToShortDateString(); else labMessage.Text = message; }
}</source>
Controlling how a day is rendered in the Calendar (C#)
<source lang="csharp">
<%@ Page Language="C#" %> <script runat="server">
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e) { e.Cell.VerticalAlign = VerticalAlign.Top; if (e.Day.DayNumberText == "25") { e.Cell.Controls.Add(new LiteralControl("User Group Meeting!")); e.Cell.BorderColor = System.Drawing.Color.Black; e.Cell.BorderWidth = 1; e.Cell.BorderStyle = BorderStyle.Solid; e.Cell.BackColor = System.Drawing.Color.LightGray; } }
</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>Using the Calendar Control</title>
</head> <body>
<form id="form1" runat="server">
<asp:Calendar ID="Calendar1" Runat="server" OnDayRender="Calendar1_DayRender" Height="190px" BorderColor="White" Width="350px" ForeColor="Black" BackColor="White" BorderWidth="1px" NextPrevFormat="FullMonth" Font-Names="Verdana" Font-Size="9pt"> <SelectedDayStyle ForeColor="White" BackColor="#333399"></SelectedDayStyle> <OtherMonthDayStyle ForeColor="#999999"></OtherMonthDayStyle> <TodayDayStyle BackColor="#CCCCCC"></TodayDayStyle> <NextPrevStyle ForeColor="#333333" VerticalAlign="Bottom" Font-Size="8pt" Font-Bold="True"></NextPrevStyle> <DayHeaderStyle Font-Size="8pt" Font-Bold="True"></DayHeaderStyle> <TitleStyle ForeColor="#333399" BorderColor="Black" Font-Size="12pt" Font-Bold="True" BackColor="White" BorderWidth="4px"> </TitleStyle> </asp:Calendar>
</form>
</body> </html></source>
Controlling how a day is rendered in the Calendar (VB)
<source lang="csharp">
<%@ Page Language="VB" %> <script runat="server">
Protected Sub Calendar1_DayRender(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) e.Cell.VerticalAlign = VerticalAlign.Top If (e.Day.DayNumberText = "25") Then e.Cell.Controls.Add(New LiteralControl("User Group Meeting!")) e.Cell.BorderColor = Drawing.Color.Black e.Cell.BorderWidth = 1 e.Cell.BorderStyle = BorderStyle.Solid e.Cell.BackColor = Drawing.Color.LightGray End If End Sub
</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>Using the Calendar Control</title>
</head> <body>
<form id="form1" runat="server">
<asp:Calendar ID="Calendar1" Runat="server" OnDayRender="Calendar1_DayRender" Height="190px" BorderColor="White" Width="350px" ForeColor="Black" BackColor="White" BorderWidth="1px" NextPrevFormat="FullMonth" Font-Names="Verdana" Font-Size="9pt"> <SelectedDayStyle ForeColor="White" BackColor="#333399"></SelectedDayStyle> <OtherMonthDayStyle ForeColor="#999999"></OtherMonthDayStyle> <TodayDayStyle BackColor="#CCCCCC"></TodayDayStyle> <NextPrevStyle ForeColor="#333333" VerticalAlign="Bottom" Font-Size="8pt" Font-Bold="True"></NextPrevStyle> <DayHeaderStyle Font-Size="8pt" Font-Bold="True"></DayHeaderStyle> <TitleStyle ForeColor="#333399" BorderColor="Black" Font-Size="12pt" Font-Bold="True" BackColor="White" BorderWidth="4px"> </TitleStyle> </asp:Calendar>
</form>
</body> </html></source>
Convert Selected Date from Calendar to Long Date String
<source lang="csharp">
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CalendarSelect" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Calendar Selection</title>
</head> <body>
<form id="form1" runat="server">
<asp:calendar id="calTest" runat="server" backcolor="PaleGoldenrod" width="250px" height="200px" font-size="12px" font-names="Arial" borderwidth="2px" bordercolor="#000000" nextprevformat="shortmonth" OnSelectionChanged="calTest_SelectionChanged"> </asp:calendar> Date Selected: <asp:TextBox ID="txtSelected" Runat="server"></asp:TextBox>
</form>
</body> </html> File: Default.aspx.cs using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class CalendarSelect : System.Web.UI.Page {
protected void calTest_SelectionChanged(object o, EventArgs e) { txtSelected.Text = calTest.SelectedDate.ToLongDateString(); }
}</source>
Creating a Pop-up Date Picker
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server">
protected void calEventDate_SelectionChanged(object sender, EventArgs e) { txtEventDate.Text = calEventDate.SelectedDate.ToString("d"); } protected void btnSubmit_Click(object sender, EventArgs e) { lblResult.Text = "You picked: " + txtEventDate.Text; }
</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<script type="text/javascript"> function displayCalendar() { var datePicker = document.getElementById("datePicker"); datePicker.style.display = "block"; } </script> <style type="text/css"> #datePicker { display:none; position:absolute; border:solid 2px black; background-color:white; } .content { width:400px; background-color:white; margin:auto; padding:10px; } html { background-color:silver; } </style> <title>Calendar with JavaScript</title>
</head> <body>
<form id="form1" runat="server">
<asp:Label id="lblEventDate" Text="Event Date:" AssociatedControlID="txtEventDate" Runat="server" /> <asp:TextBox id="txtEventDate" Runat="server" /> <img src="Calendar.gif" onclick="displayCalendar()" />
<asp:Calendar id="calEventDate" OnSelectionChanged="calEventDate_SelectionChanged" Runat="server" />
<asp:Button id="btnSubmit" Text="Submit" Runat="server" OnClick="btnSubmit_Click" />
<asp:Label id="lblResult" Runat="server" />
</form>
</body> </html></source>
Format value from asp:Calendar as "dddd, MMMM dd yyyy" (VB.net)
<source lang="csharp">
<%@ Page Inherits="ParentPage" src="test.aspx.vb" %> <html><body>
<form runat="server"> <asp:Calendar id="Calendar1" runat="server" OnSelectionChanged="DateChanged" Cellpadding="5" Cellspacing="5" DayHeaderStyle-Font-Bold="True" DayNameFormat="Short" Font-Name="Arial" Font-Size="12px" height="250px" NextPrevFormat="ShortMonth" NextPrevStyle-ForeColor="white" SelectedDayStyle-BackColor="#ffcc66" SelectedDayStyle-Font-Bold="True" SelectionMode="DayWeekMonth" SelectorStyle-BackColor="#99ccff" SelectorStyle-ForeColor="navy" SelectorStyle-Font-Size="9px" ShowTitle="true" TitleStyle-BackColor="#ddaa66" TitleStyle-ForeColor="white" TitleStyle-Font-Bold="True" TodayDayStyle-Font-Bold="True" /> </form> You selected: <asp:Label id="lblMessage" runat="server"/>
</body></html> File: test.aspx.vb Imports System Imports System.Web Imports System.Web.UI Imports System.Web.UI.WebControls Public Class ParentPage : Inherits Page
public lblMessage as Label public Calendar1 as Calendar Public sub Page_Load(obj as object, e as eventargs) if not Page.IsPostBack then Calendar1.SelectedDate = DateTime.Now lblMessage.Text = Calendar1.SelectedDate. _ ToString("dddd, MMMM dd yyyy") end if End Sub Public sub DateChanged(obj as object, e as eventargs) if Calendar1.SelectedDates.Count > 1 then lblMessage.Text = Calendar1.SelectedDates(0). _ ToString("dddd, MMMM dd yyyy") & " through " & _ Calendar1.SelectedDates(Calendar1.SelectedDates. _ Count - 1).ToString("dddd, MMMM dd yyyy") else lblMessage.Text = Calendar1.SelectedDate. _ ToString("dddd, MMMM dd yyyy") end if End Sub
End Class</source>
Format value retrieved from asp:Calendar (C#)
<source lang="csharp">
<%@ Page Inherits="ParentPage" src="test.aspx.cs" %> <html><body>
<form runat="server"> <asp:Calendar id="Calendar1" runat="server" OnSelectionChanged="DateChanged" Cellpadding="5" Cellspacing="5" DayHeaderStyle-Font-Bold="True" DayNameFormat="Short" Font-Name="Arial" Font-Size="12px" height="250px" NextPrevFormat="ShortMonth" NextPrevStyle-ForeColor="white" SelectedDayStyle-BackColor="#ffcc66" SelectedDayStyle-Font-Bold="True" SelectionMode="DayWeekMonth" SelectorStyle-BackColor="#99ccff" SelectorStyle-ForeColor="navy" SelectorStyle-Font-Size="9px" ShowTitle="true" TitleStyle-BackColor="#ddaa66" TitleStyle-ForeColor="white" TitleStyle-Font-Bold="True" TodayDayStyle-Font-Bold="True" /> </form> You selected: <asp:Label id="lblMessage" runat="server"/>
</body></html> File: test.aspx.cs using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public class ParentPage : Page {
public Label lblMessage; public Calendar Calendar1; public void Page_Load(Object Sender, EventArgs e) { if (!Page.IsPostBack) { Calendar1.SelectedDate = DateTime.Now; lblMessage.Text = Calendar1.SelectedDate.ToString("dddd, MMMM dd yyyy"); } } public void DateChanged(Object Sender, EventArgs e) { if (Calendar1.SelectedDates.Count > 1) { lblMessage.Text = Calendar1.SelectedDates[0].ToString("dddd, MMMM dd yyyy") + " through " + Calendar1.SelectedDates[Calendar1.SelectedDates.Count - 1].ToString("dddd, MMMM dd yyyy"); } else { lblMessage.Text = Calendar1.SelectedDate.ToString("dddd, MMMM dd yyyy"); } }
}</source>
Important properties of the Calendar control
<source lang="csharp">
DayNameFormat: style of the days of the week.
Possible values are FirstLetter, FirstTwoLetters, Full, Short, and Shortest.
NextMonthText: the text that appears for the next month link. NextPrevFormat: style of the next month and previous month link.
Possible values are CustomText, FullMonth, and ShortMonth.
PrevMonthText: the text for the previous month link. SelectedDate: get / set the selected date. SelectedDates: get / set a collection of selected dates. SelectionMode: how dates are selected.
Possible values are Day, DayWeek, DayWeekMonth, and None.
SelectMonthText: text for selecting a month. SelectWeekText: text for selecting a week. ShowDayHeader: hide or display the day names. ShowNextPrevMonth: hide or display the links for the next and previous months. ShowTitle: hide or display the title bar displayed at the top of the calendar. TitleFormat: format the title bar.
Possible values are Month and MonthYear.
TodaysDate: set current date.
This property defaults to the current date.
VisibleDate: set the month displayed.
defaults to the month for TodaysDate.
DayRender: Raised as each day is rendered. SelectionChanged: Raised when a new day, week, or month is selected. VisibleMonthChanged: Raised when the next or previous month link is clicked.
<%@ Page Language="C#" %> <!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 id="Head1" runat="server">
<title>Show Calendar</title>
</head> <body>
<form id="form1" runat="server">
<asp:Calendar id="Calendar1" Runat="server" />
</form>
</body> </html></source>
Retrieving a range of dates from a selection (C#)
<source lang="csharp">
<%@ Page Language="C#" %> <script runat="server">
protected void Calendar1_SelectionChanged(object sender, EventArgs e) { Label1.Text = "You selected the following date/dates:
"; for (int i=0; i<Calendar1.SelectedDates.Count; i++) { Label1.Text += Calendar1.SelectedDates[i].ToShortDateString() + "
"; } }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>Using the Calendar Control</title>
</head> <body>
<form id="form1" runat="server">
<asp:Calendar ID="Calendar1" Runat="server" OnSelectionChanged="Calendar1_SelectionChanged" SelectionMode="DayWeekMonth"> </asp:Calendar> <asp:Label ID="Label1" Runat="server"></asp:Label>
</form>
</body> </html></source>
Retrieving a range of dates from a selection (VB)
<source lang="csharp">
<%@ Page Language="VB" %> <script runat="server">
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _ ByVal e As System.EventArgs) Label1.Text = "You selected the following date/dates:
" For i As Integer = 0 To (Calendar1.SelectedDates.Count - 1) Label1.Text += Calendar1.SelectedDates.Item(i).ToShortDateString() & _ "
" Next End Sub
</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">
<title>Using the Calendar Control</title>
</head> <body>
<form id="form1" runat="server">
<asp:Calendar ID="Calendar1" Runat="server" OnSelectionChanged="Calendar1_SelectionChanged" SelectionMode="DayWeekMonth"> </asp:Calendar> <asp:Label ID="Label1" Runat="server"></asp:Label>
</form>
</body> </html></source>
title style, day header style, today style, and other month day style
<source lang="csharp">
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title>Calendar Test</title>
</head> <body>
<form id="form1" runat="server">
<asp:calendar id="calTest" runat="server" backcolor="PaleGoldenrod" width="400px" height="200px" font-size="12px" font-names="Arial" borderwidth="2px" bordercolor="#000000" nextprevformat="shortmonth"> <titlestyle font-size="14px" font-bold="true" backcolor="Goldenrod"/> <dayheaderstyle font-bold="true" /> <todaydaystyle backcolor="Orange" forecolor="#ffffff" /> <othermonthdaystyle forecolor="Tan" /> </asp:calendar>
</form>
</body> </html></source>