Calendar Control

Article
09/14/2006

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>