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

jQuery Scheduler Readonly Events

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
meridian
Meridian Theme

Main

Main Dark
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main

Main Dark
Launch Theme Builder

readonly-events.html

Also available for:

$(document).ready(() => { let data = [ { id: 2, title: "Company Presentation", start: new Date("2025/6/10 14:00"), end: new Date("2025/6/10 16:00"), isAllDay: false, isReadonly: true, attendee: 2 }, { id: 3, title: "Interview with Candidate", start: new Date("2025/6/11 10:00"), end: new Date("2025/6/11 11:30"), isAllDay: false, attendee: 1 }, { id: 4, title: "IT Maintenance Window", start: new Date("2025/6/12 08:00"), end: new Date("2025/6/12 10:00"), isAllDay: false, isReadonly: true, attendee: 3 }, { id: 5, title: "Team Standup", start: new Date("2025/6/13 09:00"), end: new Date("2025/6/13 09:30"), isAllDay: false, attendee: 1 }, { id: 6, title: "Public Holiday - No Office", start: new Date("2025/6/11 00:00"), end: new Date("2025/6/11 00:00"), isAllDay: true, isReadonly: true, attendee: 3 } ]; let nextId = data.length + 1; $("#scheduler").kendoScheduler({ date: new Date("2025/6/13"), startTime: new Date("2025/6/13 07:00 AM"), height: 600, views: [ "day", { type: "week", selected: true }, "month", ], timezone: "Etc/UTC", dataSource: { transport: { read: (e) => { e.success(data); }, create: (e) => { e.data.id = nextId++; data.push(e.data); e.success(e.data); }, update: (e) => { let idx = data.findIndex((item) => item.id === e.data.id); data[idx] = e.data; e.success(); }, destroy: (e) => { let idx = data.findIndex((item) => item.id === e.data.id); data.splice(idx, 1); e.success(); } }, schema: { model: { id: "id", fields: { id: { type: "number" }, title: { defaultValue: "No title", validation: { required: true } }, start: { type: "date" }, end: { type: "date" }, isAllDay: { type: "boolean" }, isReadonly: { type: "boolean", defaultValue: false }, attendee: { type: "number", defaultValue: 1 } } } } }, resources: [ { field: "attendee", dataSource: [ { text: "Alex", value: 1, color: "#2572c0" }, { text: "Bob", value: 2, color: "#f8a398" }, { text: "System", value: 3, color: "#9bc8e8" } ], title: "Attendee" } ] }); });

Description

The Kendo UI for jQuery Scheduler supports marking individual events as read-only by setting the isReadonly field to true in the event data.

Read-only events cannot be edited, moved, or resized by the user. They are visually distinguished with a lock icon and appear non-interactive, making them ideal for system-generated entries, holidays, or externally managed calendar items.

In this demo, events such as "Company Presentation", "IT Maintenance Window", and "Public Holiday" are marked as read-only, while other events remain fully editable.

jQuery Scheduler Readonly Events

Description

Support & Learning Resources

Additional Resources