Calendar Control
The Calendar control offers date-picking functionality in the same way that the ASP.NET mobile Calendar control does, but is displayed on mobile devices.
If a user selects a date, browses to another page, and browses back to the page with the Calendar control, the user has no indication of which date they selected. Usability is improved if the page displays a date, as is shown in the example.
Mobile Controls Syntax
Required properties, defaults, and code-featured elements are noted in bold type.
<mobile:Calendar
runat="server"
id="id"
Font-Name="fontName"
Font-Size="{NotSet|Normal|Small|Large}"
Font-Bold="{NotSet|False|True}"
Font-Italic="{NotSet|False|True}"
ForeColor="foregroundColor"
BackColor="backgroundColor"
Alignment="{NotSet|Left|Center|Right}"
Wrapping="{NotSet|Wrap|NoWrap}"
BreakAfter="{True|False}"
EnableViewState="{True|False}"
StyleReference="styleReference"
Visible="{True|False}"
CalendarEntryText="calendarEntryText"
FirstDayOfWeek="{Default|Sunday|Monday|Tuesday|Wednesday|
Thursday|Friday|Saturday|Sunday}"
OnSelectionChanged="selectionChangedHandler"
SelectedDate="selectedDate"
SelectionMode="{None|Day|DayWeek|DayWeekMonth}"
ShowDayHeader="{True|False}"
VisibleDate="visibleDateMonth"
/>
Containment Rules
The following controls can contain a Calendar control.
Control | Comments |
---|---|
System.Web.UI.MobileControls.Form | Can contain any number of Calendar controls. |
System.Web.UI.MobileControls.Panel | Can contain any number of Calendar controls. |
The Calendar control cannot contain any other controls.
Device Templates
None.
Device-Specific Behavior
Use the Calendar control to request that the user select a date and to have that date available to the containing application.
Device language | Description of behavior |
---|---|
HTML | Although the mobile Calendar control mimics many of the properties of the Web Forms Calendar Class control, it does not expose those properties specific to HTML rendering. To use these Web Forms properties, access the underlying Web Forms Calendar control and explicitly modify those settings by using the WebCalendar property. |
WML | The Calendar control presents the user with a set of alternatives for choosing the date. One of these options allows the user to type the date directly, whereas others take the user through a series of input screens to select a date. |
Example
The following example creates a Calendar control that requests a date from the user and echoes the selected date back to the user.
<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage"
Language="VB" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<script language="VB" runat="server">
protected Sub Calendar_SelectionChanged(sender As Object, e As EventArgs)
DateLabel.Text = "The date you selected is " + _
Cal.SelectedDate
ActiveForm = Form2
End Sub
</script>
<mobile:Form id="Form1" runat="server">
<mobile:Calendar id="Cal"
OnSelectionChanged="Calendar_SelectionChanged"
runat="server"/>
</mobile:Form>
<mobile:Form id="Form2" runat="server">
<mobile:Label id="DateLabel" runat="server"/>
</mobile:Form>
[C#]
<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage"
Language="C#" %>
<%@ Register TagPrefix="mobile"
Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<script language="c#" runat="server">
protected void Calendar_SelectionChanged(Object sender, EventArgs e)
{
Date.Text = "The date you selected is " +
Cal.SelectedDate;
ActiveForm = Form2;
}
</script>
<mobile:Form id="Form1" runat="server">
<mobile:Calendar id="Cal"
OnSelectionChanged="Calendar_SelectionChanged"
runat="server"/>
</mobile:Form>
<mobile:Form id="Form2" runat="server">
<mobile:Label id="Date" runat="server"/>
</mobile:Form>
See Also
Calendar Class | Calendar Class Members | Control Reference