Getting Started with the Scheduler
This guide demonstrates how to get up and running with the Kendo UI for jQuery Scheduler.
After the completion of this guide, you will be able to achieve the following end result:
<div id="scheduler"></div>
<script id="event-template" type="text/x-kendo-template">
<div>Title: #: title #</div>
<div>Atendees:
# for (var i = 0; i < resources.length; i++) { #
#: resources[i].text #
# } #
</div>
</script>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
eventTemplate: $("#event-template").html(),
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview",
attendees: [1,2]
}
],
resources: [
{
field: "attendees",
title:"Attendees",
dataSource: [
{ value: 1, text: "Alex" },
{ value: 2, text: "Bob" }
],
multiple: true
}
]
});
</script>
1. Create an Empty div Element
First, create an empty <div> element on the page that will serve as the main container of the Scheduler component.
<div id="scheduler"></div>
2. Initialize the Scheduler
In this step, you will initialize the Scheduler from the empty <div> element. When you initialize the component from an empty div, all settings of the Scheduler will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.
<div id="scheduler"></div>
<script>
// Target the div element by using jQuery and then call the kendoScheduler() method.
$("#scheduler").kendoScheduler();
</script>
3. Bind the Scheduler to Data
Once the basic initialization is completed, you can start adding additional configurations to the Scheduler. The first and most important configuration is the dataSource.
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
dataSource: [
{
id: 1,
start: new Date("2023/8/23 08:00 AM"),
end: new Date("2023/8/23 09:00 AM"),
title: "Interview",
attendees: [1,2]
}
]
});
</script>
4. Set the Current Date
The Scheduler allows you to configure the initially displayed date.
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2023/8/23"),
dataSource: [
{
id: 1,
start: new Date("2023/8/23 08:00 AM"),
end: new Date("2023/8/23 09:00 AM"),
title: "Interview",
attendees: [1,2]
}
]
});
</script>
5. Add Resources for the Events
The Scheduler allows you to assign predefined resources to the events.
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview",
attendees: [1,2]
}
],
resources: [
{
field: "attendees",
title:"Attendees",
dataSource: [
{ value: 1, text: "Alex" },
{ value: 2, text: "Bob" }
],
multiple: true
}
]
});
</script>
6. Add Event Template
To customize the appearance of the events, use the eventTemplate option of the Scheduler.
<div id="scheduler"></div>
<script id="event-template" type="text/x-kendo-template">
<div>Title: #: title #</div>
<div>Atendees:
# for (var i = 0; i < resources.length; i++) { #
#: resources[i].text #
# } #
</div>
</script>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
eventTemplate: $("#event-template").html(),
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview",
attendees: [1,2]
}
],
resources: [
{
field: "attendees",
title:"Attendees",
dataSource: [
{ value: 1, text: "Alex" },
{ value: 2, text: "Bob" }
],
multiple: true
}
]
});
</script>