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 with events
- 8 Controlling how a day is rendered in the Calendar (C#)
- 9 Controlling how a day is rendered in the Calendar (VB)
- 10 Convert Selected Date from Calendar to Long Date String
- 11 Creating a Pop-up Date Picker
- 12 Format value from asp:Calendar as "dddd, MMMM dd yyyy" (VB.net)
- 13 Format value retrieved from asp:Calendar (C#)
- 14 Important properties of the Calendar control
- 15 Retrieving a range of dates from a selection (C#)
- 16 Retrieving a range of dates from a selection (VB)
- 17 title style, day header style, today style, and other month day style
Appointment based on Calendar (C#)
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">
<div>
<tr>
<td>
Choose day:<br />
<asp:Calendar ID="MyCalendar"
runat="server"
OnDayRender="MyCalendar_DayRender"
OnSelectionChanged="MyCalendar_SelectionChanged">
</asp:Calendar>
</td>
<td >
Choose time:<br />
<asp:ListBox ID="lstTimes"
runat="server"
Height="168px"
Width="136px"></asp:ListBox></td>
</tr>
</div>
</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 = "<br/>My Birthday!";
e.Cell.Controls.Add(lbl);
}
if (e.Day.Date.Year > 2000)
{
e.Day.IsSelectable = false;
}
}
}
Bind selected dates from a calendar to asp:BulletedList
<%@ 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">
<div>
<asp:Calendar
id="Calendar1"
SelectionMode="DayWeekMonth"
runat="server" />
<br /><br />
<asp:Button
id="btnSubmit"
Text="Submit"
OnClick="btnSubmit_Click"
Runat="server" />
<hr />
<asp:BulletedList
id="bltResults"
DataTextFormatString="{0:d}"
Runat="server" />
</div>
</form>
</body>
</html>
Calendar control and some of its colorful styles
<%@ Page language="C#"%>
<html>
<head runat="server">
<title>Calendars</title>
</head>
<body>
<div id="pageContent">
<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>
</div>
</body>
</html>
Calendar day renderer event (C#)
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">
<div>
<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>
<br />
<asp:Label ID="lblDates" runat="server"></asp:Label>
</div>
</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:<br />";
foreach (DateTime dt in MyCalendar.SelectedDates)
{
lblDates.Text += dt.ToLongDateString() + "<br />";
}
}
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 = "<br />My Birthday!";
e.Cell.Controls.Add(lbl);
}
}
}
Calendar selection changed event (C#)
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">
<div>
<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>
<br />
<asp:Label ID="lblDates" runat="server"></asp:Label>
</div>
</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:<br />";
foreach (DateTime dt in MyCalendar.SelectedDates)
{
lblDates.Text += dt.ToLongDateString() + "<br />";
}
}
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 = "<br />My Birthday!";
e.Cell.Controls.Add(lbl);
}
}
}
Calendar style
<%@ 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">
<div>
<h1>Calendar Control</h1>
<h2>Styles</h2>
<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>
</div>
</form>
</body>
</html>
Calendar with events
<%@ 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">
<div>
<h1>Using DayRender</h1>
<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" />
</div>
</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("<br/>");
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;
}
}
Controlling how a day is rendered in the Calendar (C#)
<%@ 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">
<div>
<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>
</div>
</form>
</body>
</html>
Controlling how a day is rendered in the Calendar (VB)
<%@ 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">
<div>
<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>
</div>
</form>
</body>
</html>
Convert Selected Date from Calendar to Long Date String
<%@ 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">
<div>
<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>
</div>
</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();
}
}
Creating a Pop-up Date Picker
<%@ 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">
<div class="content">
<asp:Label
id="lblEventDate"
Text="Event Date:"
AssociatedControlID="txtEventDate"
Runat="server" />
<asp:TextBox
id="txtEventDate"
Runat="server" />
<img src="Calendar.gif" onclick="displayCalendar()" />
<div id="datePicker">
<asp:Calendar
id="calEventDate"
OnSelectionChanged="calEventDate_SelectionChanged"
Runat="server" />
</div>
<br />
<asp:Button
id="btnSubmit"
Text="Submit"
Runat="server" OnClick="btnSubmit_Click" />
<hr />
<asp:Label
id="lblResult"
Runat="server" />
</div>
</form>
</body>
</html>
Format value from asp:Calendar as "dddd, MMMM dd yyyy" (VB.net)
<%@ 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
Format value retrieved from asp:Calendar (C#)
<%@ 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");
}
}
}
Important properties of the Calendar control
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">
<div>
<asp:Calendar
id="Calendar1"
Runat="server" />
</div>
</form>
</body>
</html>
Retrieving a range of dates from a selection (C#)
<%@ Page Language="C#" %>
<script runat="server">
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
Label1.Text = "<b><u>You selected the following date/dates:</u></b><br>";
for (int i=0; i<Calendar1.SelectedDates.Count; i++) {
Label1.Text += Calendar1.SelectedDates[i].ToShortDateString() + "<br>";
}
}
</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">
<div>
<asp:Calendar ID="Calendar1" Runat="server"
OnSelectionChanged="Calendar1_SelectionChanged"
SelectionMode="DayWeekMonth">
</asp:Calendar>
<asp:Label ID="Label1" Runat="server"></asp:Label>
</div>
</form>
</body>
</html>
Retrieving a range of dates from a selection (VB)
<%@ Page Language="VB" %>
<script runat="server">
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _
ByVal e As System.EventArgs)
Label1.Text = "<b><u>You selected the following date/dates:</u></b><br>"
For i As Integer = 0 To (Calendar1.SelectedDates.Count - 1)
Label1.Text += Calendar1.SelectedDates.Item(i).ToShortDateString() & _
"<br>"
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">
<div>
<asp:Calendar ID="Calendar1" Runat="server"
OnSelectionChanged="Calendar1_SelectionChanged"
SelectionMode="DayWeekMonth">
</asp:Calendar>
<asp:Label ID="Label1" Runat="server"></asp:Label>
</div>
</form>
</body>
</html>
title style, day header style, today style, and other month day style
<%@ 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">
<div>
<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>
</div>
</form>
</body>
</html>