Post
Ask Question

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

 homepage.gif

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

 solutionexplorer.gif

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>

 

    <!-- WinJS references -->

    <link href="winjs/css/ui-light.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="WinJS/js/base.js"></script>

    <script type="text/javascript" src="WinJS/js/ui.js"></script>

    <script type="text/javascript" src="WinJS/js/wwaapp.js"></script>

 

    <!-- Base references -->

    <link rel="stylesheet" type="text/css" href="css/base-sdk.css" />

    <script type="text/javascript" src="base-sdk.js"></script>

 

    <!-- references -->

    <link rel="stylesheet" type="text/css" href="css/program.css" />

    <script type="text/javascript" src="program.js"></script>

 </head>

<body role="application" style="background-color:#0ff">

    <div id="rootGrid">

        <div id="header" role="contentinfo"></div>

        <div id="content">

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

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

             <div id="input" role="main" aria-labelledby="inputLabel">

                <div class="options">

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

                    <select size="3" id="Sections" aria-labelledby="listLabel" style="background-color:#808080">

                        <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>

                <div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">

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

           

                    <!-- Section 1 Input -->

                    <div class="item" id="Section1Input">

                        <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>

 

                    <!-- Section 2 Input -->

                    <div class="item" id="Section2Input">

                        <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>

 

                    <!-- Section 3 Input -->

                    <div class="item" id="Section3Input">

                        <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>

                </div>

            </div>

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

            <div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">

                    <div id="statusMessage"></div>

 

                    <!-- Section 1 Output -->

                    <div class="item" id="Section1Output">

                        <p></p>

                    </div>

 

                    <!-- Section 2 Output -->

                    <div class="item" id="Section2Output">

                        <p></p>

                    </div>

 

                    <!-- Section 3 Output -->

                    <div class="item" id="Section3Output">

                        <p></p>

                    </div>

            </div>

        </div>

       </div>

</body>

</html>

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

output1.gif

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

output2.gif

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

output3.gif



Similar Articles