Telerik UI for Windows 8 HTML

The RadCalendar control for Windows 8 is a powerful HTML/JavaScript component for visualizing and selecting dates. It provides intuitive UI, fast and fluid navigation, templates, easy to use API, etc. Configuring it requires minimum effort and saves you loads of time for achieving the same result from scratch.

This topic contains the following sections.

Prerequisites

Before you declare a Telerik control in your application, make sure that you have added the references to the needed JavaScript and CSS resources, as described here:

Adding Telerik UI for Windows 8 HTML to an HTML Page

Creating a RadCalendar

To create a RadCalendar in the HTML markup, add an empty div element with a data-win-control attribute with value of Telerik.UI.RadCalendar.

Creating a RadCalendar in HTML Copy imageCopy
<div id="myCalendar" data-win-control="Telerik.UI.RadCalendar">
</div>

You can achieve the same result in JavaScript - just define the host div element on the page and then instantiate a new RadCalendar by passing a reference to the div DOM object in the control constructor:

Creating a RadCalendar in JavaScript Copy imageCopy
var calendar = new Telerik.UI.RadCalendar(document.getElementById("myCalendar"));

By defining RadCalendar without any properties set, a default version of the control will be initialized. The user can select any date from January 1st 1900 to December 31st 2099 and today's date will be shown in the calendar's footer. Here is an image of the basic calendar setup.

calendar-gettingstarted

Setting RadCalendar Options

Same as with the rest of the Windows Runtime JavaScript controls, RadCalendar's properties can be set through the data-win-options attribute of the host element:

Setting RadCalendar options in HTML Copy imageCopy
<div id="myCalendar" data-win-control="Telerik.UI.RadCalendar" data-win-options="{
start: 'year'
}">
</div>

In JavaScript, you can pass an options object as a second argument to the RadCalendar constructor:

Setting RadCalendar options in JavaScript Copy imageCopy
var calendar = new Telerik.UI.RadCalendar(document.getElementById("myCalendar"), {
start: "year"
});

Referencing the RadCalendar Control Instance

As described in this MSDN article about adding controls to a Windows Store app, any control in a Windows Runtime JavaScript application requires a call to WinJS.UI.processAll() for proper initialization. The same holds true for any of the Telerik UI controls. Once, the WinJS framework has initialized all the controls on the page, the RadCalendar control instance associated with a host HTML element can be retrieved using the winControl expando property of the host HTML element.

HTML Copy imageCopy
<!--Define your RadCalendar control in the HTML-->
                            <div id="myCalendar" data-win-control="Telerik.UI.RadCalendar">
                            </div>
JavaScript Copy imageCopy
WinJS.Utilities.ready(function () {
WinJS.UI.processAll().then(function () {
//wait for the processAll() method to finish, then find the
//calendar control from the host element's winControl property
var calendarElement = document.getElementById("myCalendar");
var myCalendarControl = calendarElement.winControl;
console.log(myCalendarControl instanceof Telerik.UI.RadCalendar); //true
});
});

Modifying RadCalendar Properties

Once RadCalendar is loaded and the control is referenced in JavaScript, it exposes an extensive set of properties, methods and events.

JavaScript Copy imageCopy
args.setPromise(WinJS.UI.processAll().then(function () {
var calendar = document.getElementById("myCalendar").winControl;
calendar.start = "year";
}));

Attaching Events

You can either declare an event handler in the options object that you pass to the control during initialization, or you can use the addEventListener method to attach a function for execution upon a certain event. Below you can see samples of both approaches:

Assigning event handler function during initialization Copy imageCopy
var calendar = new Telerik.UI.RadCalendar(document.getElementById("myCalendar"), {
onnavigate: navigateHandlerFnName
});
// OR
var calendar = new Telerik.UI.RadCalendar(document.getElementById("myCalendar"), {
onnavigate: function(e) {//...}
});
Note

Note that if you attach the event handler as shown above, but in HTML mark-up, you would need to mark the handler function as safe in your code, using the WinJS.Utilities.markSupportedForProcessing function.

Using addEventListener method Copy imageCopy
calendar.addEventListener("navigate", navigateHandlerFnName);

Selecting a date in code

A date can be selected in RadCalendar by a user action (tap on the date cell) or in code. To select a date in code, assign its value property a Date object:

JavaScript Copy imageCopy
calendar.value = new Date(2013, 7, 22);

Getting the selected date

To get the currently selected date in RadCalendar, again use the value property:

JavaScript Copy imageCopy
var selectedDate = calendar.value;

See Also