Introduction
In this article I describe how to create a Windows Store App for a calendar using JavaScript. This article provides information about month, year, date in several languages. 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.
Calendars use local time zone information, which includes periodic adjustments for things like Daylight Saving Time and leap years. Enumerating where necessary helps avoid making assumptions about the duration of various calendar periods. Calendar math may produce varying results depending on the local time of the system. Code which uses the Calendar class should therefore be tested across multiple time zones and date spans over which it might be used. I assume you can create a simple Windows Store App using JavaScript, fore more help visit My first Apps.
For starting creation of this App first add a folder in your project by right-clicking on the project name in Solution Explorer and select Add > new folder then give the appropriate name to the folder; here I use html. Add another folder in the same manner and give it the name utill. Now add a page to the HTML named page1.html and add a page to js folder named script.js. Add two pages in the utill folder named page-select.html and utill.js.
![calendar-windows-store-apps.jpg]()
Write the following code in page1.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="/js/script1.js"></script>
</head>
<body>
<div data-win-control="page.pageInput">
<p></p>
<button id="displayButton">Display Calander</button>
</div>
<div data-win-control="page.pageOutput">
</div>
</body>
</html>
Write the following code in script1.js:
(function () {
"use strict";
var page = WinJS.UI.Pages.define("/html/page1.html", {
ready: function (element, options) {
document.getElementById("displayButton").addEventListener("click", doDisplay, false);
}
});
function doDisplay() {
var CalendarIdentifiers = Windows.Globalization.CalendarIdentifiers;
var ClockIdentifiers = Windows.Globalization.ClockIdentifiers;
var calendarDate = new Date();
var cal1 = new Windows.Globalization.Calendar(["en-US"]);
cal1.setDateTime(calendarDate);
var calItems1 = "User's default calendar: " + cal1.getCalendarSystem() + "\n" +
"Name of Month: " + cal1.monthAsString() + "\n" +
"Day of Month: " + cal1.dayAsPaddedString(2) + "\n" +
"Day of Week: " + cal1.dayOfWeekAsString() + "\n" +
"Year: " + cal1.yearAsString();
var results = calItems1;
WinJS.log && WinJS.log(results, "sample", "status");
}
})();
Write the following code in default.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Apps</title>
<link rel="stylesheet" href="//Microsoft.WinJS.1.0/css/ui-dark.css" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link rel="stylesheet" href="/css/default.css" />
<script src="/utill/utill.js"></script>
<script src="/js/default.js"></script>
</head>
<center><body role="application">
<div id="rootGrid">
<div id="content">
<h1 id="featureLabel"></h1>
<div id="contentHost"></div>
</div>
</div>
</body></center>
</html>
Write the following code in default.js:
(function () {
"use strict";
var sampleTitle = "";
var pages = [
{ url: "/html/page1.html",title:"Example of Calander Apps"}
];
function activated(eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
eventObject.setPromise(WinJS.UI.processAll().then(function () {
var url = WinJS.Application.sessionState.lastUrl || pages[0].url;
return WinJS.Navigation.navigate(url);
}));
}
}
WinJS.Navigation.addEventListener("navigated", function (eventObject) {
var url = eventObject.detail.location;
var host = document.getElementById("contentHost");
host.winControl && host.winControl.unload && host.winControl.unload();
WinJS.Utilities.empty(host);
eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
WinJS.Application.sessionState.lastUrl = url;
}));
});
WinJS.Namespace.define("page", {
sampleTitle: sampleTitle,
pages: pages
});
WinJS.Application.addEventListener("activated", activated, false);
WinJS.Application.start();
})();
Write the following code in page-select.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="options">
<h3 id="listLabel"></h3>
<select id="pageSelect" aria-labelledby="listLabel">
</select>
</div>
</body>
</html>
Write the following code in utill.js:
(function () {
var lastError = "";
var lastStatus = "";
var pageInput = WinJS.Class.define(
function (element, options) {
element.winControl = this;
this.element = element;
new WinJS.Utilities.QueryCollection(element)
.setAttribute("role", "main")
.setAttribute("aria-labelledby", "inputLabel");
element.id = "input";
this.addInputLabel(element);
this.addDetailsElement(element);
this.addpagesPicker(element);
}, {
addInputLabel: function (element) {
var label = document.createElement("h2");
label.textContent = "";
label.id = "inputLabel";
element.parentNode.insertBefore(label, element);
},
addpagesPicker: function (parentElement) {
var pages = document.createElement("div");
pages.id = "pages";
var control = new pageSelect(pages);
parentElement.insertBefore(pages, parentElement.childNodes[0]);
},
addDetailsElement: function (sourceElement) {
var detailsDiv = this._createDetailsDiv();
while (sourceElement.childNodes.length > 0) {
detailsDiv.appendChild(sourceElement.removeChild(sourceElement.childNodes[0]));
}
sourceElement.appendChild(detailsDiv);
},
_createDetailsDiv: function () {
var detailsDiv = document.createElement("div");
new WinJS.Utilities.QueryCollection(detailsDiv)
.addClass("details")
.setAttribute("role", "region")
.setAttribute("aria-labelledby", "descLabel")
.setAttribute("aria-live", "assertive");
var label = document.createElement("h3");
label.textContent = "";
label.id = "descLabel";
detailsDiv.appendChild(label);
return detailsDiv;
},
}
);
var pageOutput = WinJS.Class.define(
function (element, options) {
element.winControl = this;
this.element = element;
new WinJS.Utilities.QueryCollection(element)
.setAttribute("role", "region")
.setAttribute("aria-labelledby", "outputLabel")
.setAttribute("aria-live", "assertive");
element.id = "output";
this._addOutputLabel(element);
this._addStatusOutput(element);
}, {
_addOutputLabel: function (element) {
var label = document.createElement("h2");
label.id = "outputLabel";
label.textContent = "";
element.parentNode.insertBefore(label, element);
},
_addStatusOutput: function (element) {
var statusDiv = document.createElement("div");
statusDiv.id = "statusMessage";
element.insertBefore(statusDiv, element.childNodes[0]);
}
}
);
var currentpageUrl = null;
WinJS.Navigation.addEventListener("navigating", function (evt) {
currentpageUrl = evt.detail.location;
});
WinJS.log = function (message, tag, type) {
var isError = (type === "error");
var isStatus = (type === "status");
if (isError || isStatus) {
var statusDiv = /* @type(HTMLElement) */ document.getElementById("statusMessage");
if (statusDiv) {
statusDiv.innerText = message;
if (isError) {
lastError = message;
statusDiv.style.color = "blue";
} else if (isStatus) {
lastStatus = message;
statusDiv.style.color = "green";
}
}
}
};
var pageSelect = WinJS.UI.Pages.define("/utill/page-select.html", {
ready: function (element, options) {
var that = this;
var selectElement = WinJS.Utilities.query("#pageSelect", element);
this._selectElement = selectElement[0];
page.pages.forEach(function (s, index) {
that._addpage(index, s);
});
selectElement.listen("change", function (evt) {
var select = evt.target;
if (select.selectedIndex >= 0) {
var newUrl = select.options[select.selectedIndex].value;
WinJS.Navigation.navigate(newUrl).then(function () {
setImmediate(function () {
document.getElementById("pageSelect").setActive();
});
});
}
});
selectElement[0].size = (page.pages.length > 5 ? 5 : page.pages.length);
if (page.pages.length === 1) {
selectElement[0].setAttribute("multiple", "multiple");
}
},
_addpage: function (index, info) {
var option = document.createElement("option");
if (info.url === currentpageUrl) {
option.selected = "selected";
}
option.text = (index + 1) + ") " + info.title;
option.value = info.url;
this._selectElement.appendChild(option);
}
});
function activated(e) {
WinJS.Utilities.query("#featureLabel")[0].textContent = page.sampleTitle;
}
WinJS.Application.addEventListener("activated", activated, false);
WinJS.Namespace.define("page", {
pageInput: pageInput,
pageOutput: pageOutput
});
document.Testpage = {
getLastError: function () {
return lastError;
},
getLastStatus: function () {
return lastStatus;
},
selectpage: function (pageID) {
pageID = pageID >> 0;
var select = document.getElementById("pageSelect");
var newUrl = select.options[pageID - 1].value;
WinJS.Navigation.navigate(newUrl).then(function () {
setImmediate(function () {
document.getElementById("pageSelect").setActive();
});
});
}
};
})();
Your output will look like the following:
![output-Windows-Store-Apps.jpg]()
Summary
In this article I described how to make calendar apps in Windows Store Apps using JavaScript. To make this app using C# visit Calender Apps in Windows Store App using C#. I hope you understand well.