Telerik UI for Windows 8 HTML

RadScheduler for Windows 8 HTML is an HTML/JavaScript component that provides rich APIs for displaying a set of events. In this getting started article, you will learn how to create a basic scheduler, reference it in JavaScript, define resources for it, and attach event handlers to it.

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 RadScheduler

You can initialize RadScheduler like all other Telerik UI for Windows 8 HTML controls. To create a RadScheduler in the HTML markup, add an empty div element with a data-win-control attribute with a value of Telerik.UI.RadScheduler.

Code Listing 1: Scheduler Mark-up Declaration Copy imageCopy
<div data-win-control="Telerik.UI.RadScheduler"></div>

Alternatively, you can initialize RadScheduler programmatically by first defining an empty div element with an id and passing it to the control's constructor in JavaScript.

Code Listing 2: Scheduler Wrapper Copy imageCopy
<div id="schedulerWrapper"></div>
Code Listing 3: Scheduler JavaScript Declaration Copy imageCopy
var myScheduler = new Telerik.UI.RadScheduler(document.getElementById("schedulerWrapper"));

Defining RadScheduler with no properties set produce an empty scheduler control. To display events, you need to define a data source. The next section shows a simple binding scenario that can get you started. For more in-depth information, go to: RadScheduler Data Binding.

Displaying Events in RadScheduler

To populate RadScheduler with events, you need to bind it to a data source. Currently, RadScheduler requires that the fields to which you bind it, have specific names. For a basic scenario, it is enough to bind it to an array of objects defining start, end and title options. start and end must be Date objects. They define the start and end time of the current appointment. title will display as the appointment title. Code Listing 4 below shows a sample definition of a bound scheduler. Then, you can see the result of this definition in Figure 1.

Code Listing 4: Defining a Data Source with Events Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#boundSchedulerWrapper"), {
    dataSource: [
        { start: new Date(2013, 8, 16, 9), end: new Date(2013, 8, 16, 10), title: "Breakfast with Marta" },
        { start: new Date(2013, 8, 16, 10, 30), end: new Date(2013, 8, 16, 11, 30), title: "Meeting with Paul West" },
        { start: new Date(2013, 8, 16, 12), end: new Date(2013, 8, 16, 13), title: "Lunch with Jane Peterson" }
    ]
});
Figure 1: Displaying Events in Scheduler
scheduler-getting-started bind

Defining Available Views for RadScheduler

RadScheduler features four views of its appointments: day, week, month and agenda. By default it displays only day and week views. To change that, you can set the views property to an array, containing all needed views. Code Listing 5 shows a definition of a scheduler that will display only week and agenda views.

Code Listing 5: Changing the Available Views Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    dataSource: [
        { start: new Date(2013, 8, 16, 9), end: new Date(2013, 8, 16, 10), title: "Breakfast with Marta" },
        { start: new Date(2013, 8, 16, 10, 30), end: new Date(2013, 8, 16, 11, 30), title: "Meeting with Paul West" },
        { start: new Date(2013, 8, 16, 12), end: new Date(2013, 8, 16, 13), title: "Lunch with Jane Peterson" }
    ],
    views: ["week", "agenda"]
});

Figure 2 below shows RadScheduler in agenda view.

Figure 2: Scheduler in Agenda View
scheduler-getting-started-views

For more information about each view, see: Scheduler Views.

Providing Resources for RadScheduler

RadScheduler supports assigning scheduler events to a set of predefined resources. The scheduler supports more than one kind of resource. Multiple instances of the same resource type can be assigned to a scheduler event. Resources are explained in detail in this help article: Scheduler Resources. For a simple example, you can look at Code Listing 6 below.

Code Listing 6: Assigning Resources Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(schedulerWrapper, {
    dataSource: [
        { start: new Date(2013, 8, 16, 9), end: new Date(2013, 8, 16, 10), title: "Meeting with Marta", roomId: 1 },
        { start: new Date(2013, 8, 16, 10, 30), end: new Date(2013, 8, 16, 11, 30), title: "Meeting with Paul West", roomId: 2 },
        { start: new Date(2013, 8, 16, 13), end: new Date(2013, 8, 16, 14), title: "Meeting with Technical Team", roomId: 2 }
    ],
    resources: [
        {
            field: "roomId",
            title: "Room",
            name: "Room",
            dataSource: [
              { text: "Small meeting room", value: 1, color: "pink" },
              { text: "Big meeting room", value: 2, color: "purple" }
            ]
        }
    ]
});

You can see that each event defines a room id. The rooms are defined as resources and the id is used to connect an event with a corresponding room. In Figure 3, you can see the two events colored in different colors based on their corresponding room.

Figure 3: Scheduler with Resources
scheduler-getting-started-resources

Attaching Events

To handle an event in RadScheduler, 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:

Code Listing 7: Declaring Event Handlers in JavaScript Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.getElementById("myScheduler"), {
    ondatabound: dataBoundHandlerFnName 
});
// OR
var scheduler = new Telerik.UI.RadScheduler(document.getElementById("myScheduler"), {
    ondatabound: function(e) {
        ///...
    }
});
//OR
var scheduler = new Telerik.UI.RadScheduler(document.getElementById("myScheduler"), {
    //other scheduler properties
});

scheduler.addEventListener("databound", dataBoundHandlerFnName);
Note

You can also declare event handlers in HTML mark-up in the data-win-options attribute. To do that you need to mark the handler function as safe in your code, using the WinJS.Utilities.markSupportedForProcessing function.

All RadScheduler events are described in this help article: Scheduler Events.

See Also