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

Event move & resize

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

            
                        move-resize.html
                    
                        Sample service

Also available for:

API REFERENCE

Snap events to slot boundaries

$(function() { $("#scheduler").kendoScheduler({ date: new Date("2013/6/13"), startTime: new Date("2013/6/13 07:00 AM"), height: 600, views: [ "day", { type: "week", selected: true }, "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" }, isAllDay: { type: "boolean", from: "IsAllDay" } } } } } }); $(":checkbox").change(function(e) { var scheduler = $("#scheduler").data("kendoScheduler"); scheduler.options.snap = this.checked; scheduler.view(scheduler.view().name); }); });

Description

The Telerik Kendo UI Scheduler allows you and your users to move and resize its events. In addition to this, you can also specify whether the scheduler will either snap events to the nearest slot during dragging (resizing or moving), or it will allow free moving and resizing of events. You can do that through the snap client-side bool property of the scheduler as shown in this example.

Event move & resize

Description

Support & Learning Resources

Was this demo helpful?

Tell us how we can improve this demo