Telerik UI for Windows 8 HTML

There are multiple ways you can navigate or manipulate RadScheduler programmatically. The following article will provide explanations and examples of the exposed methods you can use to control the scheduler.

This topic contains the following sections.

Manipulate the Event Edit Form

RadScheduler exposes five methods that allow the edit form popup to be programmatically manipulated. Below is a list of each of the methods with brief description of its usage.

  • addEvent(event): This method opens the edit form and populates it with the event object that has been passed to it as parameter. The user then has to click on the "Save" button to save the event to the scheduler.

  • editEvent(uid): This method opens the edit form for an event specified by a uid. Each event that is inserted in RadScheduler's dataSource has a uid property holding the unique string.

  • removeEvent(uid): This method removes an event specified by a uid from the data. Each event that is inserted in RadScheduler's dataSource has a uid property holding the unique string.

  • cancelEvent(): Use this method to close the edit form without saving the changes.

  • saveEvent(): Use this method to save the changes made in the edit form and close it.

In Code Listing 1 you can see an example of how you can use the above methods.

Code Listing 1: Manipulating the Edit Form Copy imageCopy
var scheduler = Telerik.UI.find.Scheduler("#schedulerWrapper");

var event = {
    title: "sample event",
    start: new Date(2013, 5, 4, 10, 30),
    end: new Date(2013, 5, 4, 11, 30)
};

scheduler.addEvent(event);
scheduler.saveEvent();

scheduler.editEvent(scheduler.dataSource.data[0].uid);
scheduler.cancelEvent();

scheduler.removeEvent(scheduler.dataSource.data[0].uid);

Navigate the View

You can navigate through RadScheduler's four views by using the setView(view) method. The method accepts a string representing one of the four scheduler views — "day", "week", "month" and "agenda".

Code Listing 2: Navigating the View Copy imageCopy
scheduler.setView("month");