Telerik UI for Windows 8 HTML

This article describes the events of RadScheduler and its most notable event arguments.

Events

Event Name

Description

Arguments

add

Fires when the a new event is about to be added.

e.event - The event data from which the new event will be created and added to the data source.

e.target - The RadScheduler control instance.

cancel

Fires when the user cancels editing by clicking the "Cancel" button.

e.container - The edit form container element. That element contains the editing UI.

e.event - The event whose editing was canceled.

e.target - The RadScheduler control instance.

databinding

Fires before the scheduler binds to its data source.

e.target - The RadScheduler control instance.

databound

Fires after the scheduler binds to its data source.

e.target - The RadScheduler control instance.

edit

Fires when the user opens a scheduler event in edit mode or creates a new event.

e.container - The edit form container element. That element contains the editing UI.

e.event - The event that is being edited.

e.target - The RadScheduler control instance.

move

Fires when the user is moving an event.

e.event - The event which is being moved.

e.slot - The slot over which the event is currently positioned. This argument is an object with three options— element (the slot's element), start (the slot's start date) and end (the slot's end date).

e.target - The RadScheduler control instance.

moveend

Fires when the user stops moving an event.

e.event - The event which was moved.

e.slot - The slot over which the event was dropped. This argument is an object with three options— element (the slot's element), start (the slot's start date) and end (the slot's end date).

e.target - The RadScheduler control instance.

movestart

Fires when the user starts to drag an event.

e.event - The event which is being moved.

e.target - The RadScheduler control instance.

navigate

Fires when the user changes selected date, view or of the scheduler.

e.action - Name of the action. Possible values are:

  • changeView - Navigate to different view.

  • next - Navigate to next time period.

  • previous - Navigate to previous time period.

  • today - Select today's date.

  • changeDate - A date is selected via the Calendar

e.target - The RadScheduler control instance.

remove

Fires when the user clicks the "Destroy" button.

e.event - The event which is being removed.

e.target - The RadScheduler control instance.

resize

Fires when the user is resizing an event.

e.event - The event which is being resized.

e.slot - The slot over which the event is resized to. This argument is an object with three options— element (the slot's element), start (the slot's start date) and end (the slot's end date).

e.target - The RadScheduler control instance.

resizeend

Fires when the user releases the mouse after resizing an event.

e.event - The event which was resized.

e.slot - The slot to which the event was resized. This argument is an object with three options— element (the slot's element), start (the slot's start date) and end (the slot's end date).

e.target - The RadScheduler control instance.

resizestart

Fires when the user starts to resize an event.

e.event - The event which will be resized.

e.target - The RadScheduler control instance.

save

Fires when the user saves a scheduler event by clicking the "save" button.

e.container - The edit form container element. That element contains the editing UI.

e.event - The event that is saved.

e.target - The RadScheduler control instance.

Example

In the following example, you can see a simple scenario where the moveend event is used to prevent moving an event to Saturdays or Sundays. Code Listing 1 defines a basic scheduler with a moveend event handler assigned in its constructor. Code Listing 2 defines the event handler function. It checks the start date of the slot where the currently dragged event is dropped and if the day is Saturday or Sunday, the move is canceled.

Code Listing 1: Scheduler Definition Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    dataSource: data,
    date: new Date(2013, 5, 4),
    views: ["month"],
    onmoveend: validateMove
})
Code Listing 2: Event Handler Function Copy imageCopy
function validateMove(e) {
    var day = e.slot.start.getDay();
    if (day == 0 || day == 6) { // if day is 0-Sunday or 1-Saturday
        e.preventDefault();
    }
}