Telerik UI for Windows 8 HTML

To display events in RadScheduler, you need to bind it to a local or remote data source that contains events information. This article will show you how to bind RadScheduler to a local and remote data source. To learn about binding RadScheduler resources, go to Scheduler Resources.

Important

RadScheduler uses as a data source the Telerik.Data.SchedulerDataSource component. It inherits from Telerik.Data.DataSource and has an identical public API. However, you cannot use a regular Telerik.Data.DataSource for binding RadScheduler due to internal differences.

Binding RadScheduler to Local JavaScript Array

You can define an in-memory JavaScript array that defines a subset of the fields in the following list and assign it to RadScheduler. This way, the user will be able to view, add, edit and remove events from the scheduler. However, all changes will be kept in memory, meaning that they will be lost upon restarting the application.

The possible field names are:

  • description: A string containing the event description.

  • end: A Date object representing the end date of the event.

  • id: The mandatory unique identifier of the event.

  • isAllDay: If available and set to true the event is "all day". By default events are not all day.

  • recurrenceException: A string field containing a list of colon-separated dates formatted using the yyyyMMddTHHmmssZ format string. The dates must be encoded in UTC.

  • recurrenceId: The id of the recurrence parent event. Required for events that are recurrence exceptions.

  • recurrenceRule: The recurrence rule describing the recurring pattern of the event. The format follows the iCal specification.

  • start: The date at which the scheduler event starts. The start date is mandatory.

  • title: The title of the event which is displayed by the scheduler control.

An example of an object included in the RadScheduler data source is shown in Code Listing 1 below.

Code Listing 1: Scheduler Data Item Copy imageCopy
var data = [{
    id: 1,
    title: "Tech Meeting",
    start: new Date(2013, 5, 4),
    end: new Date(2013, 5, 4),
    isAllDay: true,
    recurrenceRule: "FREQ=WEEKLY",
    description: "Tech conference",
    startTimeZone: "Europe/Amsterdam",
    endTimeZone: "Europe/Amsterdam"
}]

Now, you can assign this variable to a RadScheduler using its dataSource property.

Code Listing 2: Bind Scheduler to Local Data Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    dataSource: data,
    date: new Date(2013, 5, 4)
})

Binding RadScheduler to Remote Data

RadScheduler is bound to remote data similarly to all other databound Telerik controls. You need to set a transport that defines where data comes from and goes to (in case of editing) and a schema that parses data into the fields and types required by RadScheduler. Code Listing 3 shows a sample scheduler definition with a remotely bound data source.

If you are reading data from a file inside your application, instead of links to services, you would need to assign methods to the read, create, update and destroy options. This methods must perform the respective operations over the local file.

For full list of available configuration options, you can see Configuring Remote Binding. Note that the article references Telerik.Data.DataSource which you cannot use in RadScheduler but the API is identical to that of Telerik.Data.SchedulerDataSource.

Code Listing 3: Bind Scheduler to Remote Data Copy imageCopy
var scheduler = new Telerik.UI.RadScheduler(document.querySelector("#schedulerWrapper"), {
    date: new Date("2013/6/13"),
    timezone: "Etc/UTC", // Setting the timezone is recommended when binding to a remote service.
    dataSource: {
        batch: true, // Enable batch updates
        transport: {
            read: {
                url: "http://mysite.com/myservice/table/read",
                dataType: "json"
            },
            // Update, create and destroy methods are needed only if you are going to allow the user to edit events.
            update: {
                url: "http://mysite.com/myservice/table/update",
                dataType: "json"
            },
            create: {
                url: "http://mysite.com/myservice/table/create",
                dataType: "json"
            },
            destroy: {
                url: "http://mysite.com/myservice/table/destroy",
                dataType: "json"
            },
            parameterMap: function (options, operation) {
                // Send the scheduler event date fields ("start" and "end") to the remote service
                if (operation !== "read" && options.models) {
                    return { models: JSON.stringify(options.models) };
                }
            }
        },
        schema: {
            model: {
                id: "taskId", // The "id" of the event is the "taskId" field
                fields: {
                    // Describe the scheduler event fields and map them to the fields returned by the remote service
                    taskId: {
                        from: "TaskID", // The "TaskID" server-side field is mapped to the "taskId" client-side field
                        type: "number"
                    },
                    title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                    start: { type: "date", from: "Start" },
                    end: { type: "date", from: "End" },
                    description: { from: "Description" },
                    recurrenceId: { from: "RecurrenceID" },
                    recurrenceRule: { from: "RecurrenceRule" },
                    recurrenceException: { from: "RecurrenceException" },
                    isAllDay: { type: "boolean", from: "IsAllDay" }
                }
            }
        }
    }
})

See Also