New to Kendo UI for jQuery? Download free 30-day trial

API

Loading Demo...

EXAMPLE
VIEW SOURCE
EDIT
- Edit in Kendo UI Dojo
- Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        api.html
                    
                        Sample service

Also available for:

API REFERENCE

Current Date

Current View

$(function () { $("#scheduler").kendoScheduler({ date: new Date("2013/6/13"), startTime: new Date("2013/6/13 7:00"), height: 400, timezone: "Etc/UTC", views: [ "day", { type: "week", selected: true }, "month", "agenda", "timeline" ], timezone: "Etc/UTC", dataSource: { batch: true, transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/tasks", dataType: "jsonp" }, update: { url: "https://demos.telerik.com/kendo-ui/service/tasks/update", dataType: "jsonp" }, create: { url: "https://demos.telerik.com/kendo-ui/service/tasks/create", dataType: "jsonp" }, destroy: { url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy", dataType: "jsonp" }, parameterMap: function (options, operation) { if (operation !== "read" && options.models) { return { models: kendo.stringify(options.models) }; } } }, schema: { model: { id: "taskID", fields: { taskID: { from: "TaskID", type: "number" }, title: { from: "Title", defaultValue: "No title", validation: { required: true } }, start: { type: "date", from: "Start" }, end: { type: "date", from: "End" }, startTimezone: { from: "StartTimezone" }, endTimezone: { from: "EndTimezone" }, description: { from: "Description" }, recurrenceId: { from: "RecurrenceID" }, recurrenceRule: { from: "RecurrenceRule" }, recurrenceException: { from: "RecurrenceException" }, ownerId: { from: "OwnerID", defaultValue: 1 }, isAllDay: { type: "boolean", from: "IsAllDay" } } } } } }); var scheduler = $("#scheduler").data("kendoScheduler"); $("#date").kendoDatePicker({ value: new Date("2013/6/13"), change: function () { scheduler.date(this.value()); } }); $("#views").kendoDropDownList({ value: "week", change: function () { scheduler.view(this.value()); } }); });

Description

The Telerik Kendo UI Scheduler exposes rich client-side API and events, which provide easy configuration or extension points for custom functionality on top of the built-in features.

In this demo, you can see how to get a reference to the scheduler's client-side object and using its date() and view() methods to update its current date and current view.

You can find more information about its API here.

Support & Learning Resources

Was this demo helpful?

YES NO

Tell us how we can improve this demo

Submit Skip