|  Register

Instructions

Objectives

  • Capture a single date using the calendar control.
  • Capture multiple dates using the calendar control.
  • See how the calendar control adapters to different mobile devices. 

Prerequisites

Step 1 - Capture a Single Date

The calendar control is interface compatible with the one provided by Microsoft with ASP.NET. Therefore all the documentation provided via MSDN can be used as a guide. This tutorial goes through come of the major differences.

Add the following ASP.NET to an empty mobile web page.

<mob:Calendar ID="Calendar1" runat="server" OnSelectionChanged="DateChanged">
</mob:Calendar>
<mob:Label ID="Label1" runat="server"></mob:Label>

Add the following C# code to the pages class file.

protected void DateChanged(object sender, EventArgs e)
{
    Label1.Text = Calendar1.SelectedDate.ToString();
}

Open the page in the Android emulator. You should see a page similar to the following.



When a date is selected a post back will be triggered and the label below the calendar updated to displayed the selected date. The current month can be changed by pressing the arrows to the left and right of the month name. On the Android emulator, and any other touch screen phone, the month can be changed by swiping left or right with a finger.

Try opening the same page on a lower specification mobile device emulator such as the Nokia S40 5th edition.



Notice how the date is captured using a series of drop down lists because the screen is too narrow to display a calendar grid that can be used to select a date with a single tap of the finger.

Step 2 - Multiple Date Selection

Some times more than one date will need to be provided to support a business process. For example booking a return journey or choosing the duration of a visit. Mobile device screen sizes are small and it makes sense to capture the two dates in a single control. When used with touch screen devices only 3 taps of the screen will be needed to select two dates. Considerably less clicks or a mouse than a traditional browser.

Paste the following ASP.NET code into the web form.

<mob:Label ID="Label2" runat="server">Select a start and end date using the calendar below and press done when complete.</mob:Label>
<mob:Calendar ID="Calendar1" runat="server" AllowMultipleSelection="true" OnSelectionChanged="DateChanged">
</mob:Calendar>
<mob:Label ID="Label1" runat="server"></mob:Label>

Paste the following C# code in the web pages class file.

protected void Page_Load(object sender, EventArgs e)
{
    Calendar1.MinDate = DateTime.Now.Date;
    Calendar1.MaxDate = DateTime.Now.Date.AddMonths(3);
}
 
protected void DateChanged(object sender, EventArgs e)
{
    var dates = new System.Collections.Generic.List<string>();
    foreach(DateTime current in Calendar1.SelectedDates)
        dates.Add(current.Date.ToShortDateString());
    Label1.Text = "Selected Dates: " + String.Join(" & ", dates.ToArray());
}

Notice the calendar control has now been configured to support the selection of multiple dates. The load event of the page restricts the date range to the next 3 months. Finally the processing of date changes will display all the selected dates

Open this page on an Android emulator. A screen similar to the following should be displayed.



Notice three new links have been added towards the bottom of the calendar. Dates that are outside of the available range and not available for selection can not be chosen.

The same page displayed on the Nokia S40 5th edition emulator will behave differently but still enables multiple dates to be provided.



Notice the currently selected dates appear under the day, month and year elements. The year is not available for selection because the available dates are all with in the same year. Currently selected dates can be removed by choosing the X button to their right.

Although the user interface is considerably different the same events and data structures are used by the mobile web application. Date based applications can be created quickly supporting many different mobile devices.

Conclusion

The calendar control provides many more features to control it's look and feel which we've not explored in this tutorial. The main documentation for the project provides more details. This control provides a date capture mechanism which can be deployed quickly supporting any mobile devices.

Tutorials

NumberSorted By Number In Ascending OrderTutorialSummary
1InstallationInstall 51Degrees - .Net Mobile Framework and confirm the installation is successful.
2EmulatorsConfigure IIS to work with mobile device emulators improving development productivity.
3Hello WorldAdd a mobile label control to a mobile page and understand major differences compared to standard ASP.NET.
4Mobile ProfileUse a simple database to gain additional insight into the mobile device performance, optimise view state and persist data.
5Clever ImagesOptimise images to consume the bare minimum amount of data for the display on the requesting mobile device without compromising image quality.
6Entering TextMake it easier for your users to enter text by remembering previous values and providing common options.
7DatesCaptures dates quickly and easily using all the capabilities of the requesting mobile device.
8LocationFind out where the requesting mobile device is or get location information from users.
9MapsDisplay maps from Google or Bing, move around and show multiple markers.
10Data Lists and PagersDisplay lists of items and page between them.
11Styling Mobile ControlsStyle mobile web applications using different common characteristics of mobile devices such as screen size or input method.
12DeploymentDeploy the Framework onto a production server and configure IIS and SQL.