Display Calendar in Windows Store App

Introduction

In this article, I will discuss how to display a calendar in a Windows 8 Metro Application. This example will demonstrate how to create a calendar based on either the user's default preferences or specific overrides, for the current date and time. The second displayed example shows how to determine the statistics for the current calendar date and time. This will show a number of hours in this period, Number of days in this month, Number of months in this year and Current era. This example will demonstrate adding calendar period increments to a date. It is possible to add or subtract any calendar period. For example, adding a month to May 31st will return June 30th. If another month is added it will return July 30th, not July 31st.

So, we will use the following steps to make this application.

Step 1 : First of all create a new Metro Style Application. Here, I will share screens to create a new application.

Open Visual Studio 2011
File -> New -> Project
Choose Template -> JavaScript-> Windows Metro Style -> Application
Rename this Application

Step 2 : In the Solution Explorer there are various folders and files. We will primarily work with a default.html and default.js files.

Step 3 : The default.html page looks like as below.

Code : Let us see the code as given below.

<!DOCTYPE html>

<html>

<head>

<title>CalendarSample</title>

</head>

<h1 id="featureLabel">Calendar</h1>

<h2 id="inputLabel">Options</h2>

<h3 id="listLabel" >Select Options</h3>

<option selected="selected" value="1">1. Display a calendar</option>

<option value="2">2. Retrieve calendar statistics</option>

<option value="3">3. Calendar math</option>

</select>

</div>

<h3 id="descLabel">Description</h3>

<p>This example will demonstrate how to create a calendar based on either the user's default preferences or

specific overrides,for the current date and time. The details of the three example calendars are displayed below.</p>

<button class="action" id="Section1Open">Display</button>

</div>

<p>This example will show how to determine the statistics for the current calendar date and time.

This will show:Number of hours in this period, Number of days in this month, Number of months in this year and Current era.</p>

<button class="action" id="Section2Open">Display</button><br /><br />

</div>

<p>This example will demonstrate adding calendar period increments to a date. It is possible to add or subtract any calendar period.

Note: it is important to consider the effect of adding increments that span uneven period lengths. For example, adding a month to May 31st will return June 30th. If another month is added it will return July 30th, not July 31st.</p>

<button id="Section3Open" class="action">Display</button>

</div>

<h2 id="outputLabel"> Output</h2>

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

</body>

</html>

Step 4 : After running this code we will get the following output.

Retrieve calendar statistics show how to determine the statistics for the current calendar date and time.

This point will demonstrate adding calendar period increments to a date. It is possible to add or subtract any calendar period.