New to Kendo UI for jQuery? Start a free 30-day trial
Work with the Scheduler Offline
Environment
| Product | Progress® Kendo UI® Scheduler for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I set up the Kendo UI for jQuery Scheduler to work offline?
Solution
The following example demonstrates how to achieve the desired scenario. For more information, refer to the article on working offline.
<div id="example">
<div id="team-schedule">
<label>Online: </label><input id="online" type="checkbox" checked>
</div>
<div id="scheduler"></div>
</div>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2025/6/13"),
startTime: new Date("2025/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
"agenda"
],
timezone: "Etc/UTC",
dataSource: {
offlineStorage: "offline-kendo-demo",
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/service/v2/core/tasks"
},
update: {
url: "https://demos.telerik.com/service/v2/core/tasks/update",
type: "POST",
contentType: "application/json"
},
create: {
url: "https://demos.telerik.com/service/v2/core/tasks/create",
type: "POST",
contentType: "application/json"
},
destroy: {
url: "https://demos.telerik.com/service/v2/core/tasks/destroy",
type: "POST",
contentType: "application/json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return 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" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "ownerId", operator: "eq", value: 1 },
{ field: "ownerId", operator: "eq", value: 2 }
]
}
},
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});
$("#online").on("change", function() {
alert("Online: " + this.checked);
$("#scheduler").data("kendoScheduler").dataSource.online(this.checked);
});
});
</script>