<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/kendo.timezones.min.js"></script>
</head>
<body>
<script src="../content/shared/js/schedulerTasks.js"></script>
<div id="example">
<div id="scheduler"></div>
</div>
<script id="event-template" type="text/x-kendo-template">
<div class="template-container">
# if (image != "") { #
<img alt="Kendo UI for jQuery Scheduler #:title #" src="#= image #" style="height:25px; width: 25px;">
# } #
<h3 class="template-title-#= resources[0].value #">#: title #</h3>
</div>
</script>
<script>
var sampleDataNextID = schedulerTasks.length + 1;
function getIndexById(id) {
var idx,
l = schedulerTasks.length;
for (var j = 0; j < l; j++) {
if (schedulerTasks[j].id == id) {
return j;
}
}
return null;
}
$(function () {
var dataSource = new kendo.data.SchedulerDataSource({
transport: {
read: function (e) {
e.success(schedulerTasks);
},
create: function (e) {
e.data.id = sampleDataNextID++;
schedulerTasks.push(e.data);
e.success(e.data);
},
update: function (e) {
schedulerTasks[getIndexById(e.data.id)] = e.data;
e.success();
},
destroy: function (e) {
schedulerTasks.splice(getIndexById(e.data.id), 1);
e.success();
}
},
error: function (e) {
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
batch: false,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
title: { field: "title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", field: "start" },
end: { type: "date", field: "end" },
description: { field: "description" },
recurrenceRule: { from: "recurrenceRule" },
recurrenceException: { from: "recurrenceException" },
attendee: { field: "attendee", defaultValue: 1 },
isAllDay: { type: "boolean", field: "isAllDay" },
image: { from: "image", defaultValue: "", },
}
}
}
});
$("#scheduler").kendoScheduler({
date: new Date("2020/10/4"),
startTime: new Date("2020/10/4 7:00"),
endTime: new Date("2020/10/4 20:00"),
height: 600,
views: [
"day",
{ type: "week", selected: true },
"workWeek",
"month",
"agenda",
],
timezone: "Etc/UTC",
eventTemplate: $("#event-template").html(),
dataSource: dataSource,
resources: [
{
field: "attendee",
dataSource: [
{ text: "Jason", value: 1, color: "#eaf8ff" },
{ text: "Maddie", value: 2, color: "#fdfdf4" }
]
}
]
});
});
</script>
<style>
.template-container {
margin-top: -8px;
}
.template-container img {
float: left;
margin: 0 4px;
margin-right: 10px;
}
.template-container h3 {
padding: 0 4px 4px;
font-size: 12px;
font-weight: 400;
margin-right: 14px;
}
.template-title-1 {
color: #65CCFF;
}
.template-title-2 {
color: #D0D03B;
}
.k-event .k-i-reload,
.k-event .k-i-non-recurrence {
display: none;
}
</style>
</body>
</html>