This documentation is archived and is not being maintained.

Calendar Control

.NET Framework 1.1

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

Show: