Bind Two Schedulers Together to Display the Same View and Date
Environment
| Product | Progress® Kendo UI® Scheduler for jQuery |
| Operating System | All |
| Browser | All |
| Browser Version | All |
Description
My application displays two Kendo UI Schedulers on the same page. How can I bind them in such a way that if I change the view type or the date in any of them, the other will change too?
Solution
- Subscribe to the
navigateevent of the Scheduler. - Depending on whether the date or the view type is changed, trigger the
dateorviewmethods of the same API.
<div id="example">
<div id="team-schedule">
<div id="people">
<input checked type="checkbox" id="alex" aria-label="Alex" value="1">
<input checked type="checkbox" id="bob" aria-label="Bob" value="2">
<input type="checkbox" id="charlie" aria-label="Charlie" value="3">
</div>
</div>
<div id="scheduler"></div>
<div id="schedulerTwo"></div>
</div>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2022/6/13"),
startTime: new Date("2022/6/13 07:00 AM"),
height: 600,
views: [
"day",
{
type: "workWeek",
selected: true
},
"week",
"month",
"agenda",
{
type: "timeline",
eventHeight: 50
}
],
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"
}
}
}
},
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"
}
]
}],
navigate: function(e) {
if (e.action == "changeView") {
var schedulerTwo = $("#schedulerTwo").data("kendoScheduler");
schedulerTwo.view(e.view);
} else if (e.action == "next" || e.action == "today" || e.action == "previous" || e.action == "changeDate") {
var schedulerTwo = $("#schedulerTwo").data("kendoScheduler");
schedulerTwo.date(e.date);
}
}
});
$("#schedulerTwo").kendoScheduler({
date: new Date("2022/6/13"),
startTime: new Date("2022/6/13 07:00 AM"),
height: 600,
views: [
"day",
{
type: "workWeek",
selected: true
},
"week",
"month",
"agenda",
{
type: "timeline",
eventHeight: 50
}
],
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"
}
}
}
},
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"
}
]
}],
navigate: function(e) {
if (e.action == "changeView") {
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.view(e.view);
} else if (e.action == "next" || e.action == "today" || e.action == "previous" || e.action == "changeDate") {
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.date(e.date);
}
}
});
$("#people :checkbox").change(function(e) {
var checked = $.map($("#people :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
operator: function(task) {
return $.inArray(task.ownerId, checked) >= 0;
}
});
var schedulerTwo = $("#schedulerTwo").data("kendoScheduler");
schedulerTwo.dataSource.filter({
operator: function(task) {
return $.inArray(task.ownerId, checked) >= 0;
}
});
});
});
</script>
<style>
.k-nav-current>.k-link span+span {
max-width: 200px;
}
#team-schedule {
background: url('../content/web/scheduler/team-schedule.png') transparent no-repeat;
height: 115px;
position: relative;
}
#people {
background: url('../content/web/scheduler/scheduler-people.png') no-repeat;
width: 345px;
height: 115px;
position: absolute;
right: 0;
}
#alex {
position: absolute;
left: 4px;
top: 81px;
}
#bob {
position: absolute;
left: 119px;
top: 81px;
}
#charlie {
position: absolute;
left: 234px;
top: 81px;
}
</style>