This course introduces developers to one of the latest Kendo UI Web widgets: the scheduler. Now, developers can build better web sites powered by the ability to create events (tasks/appointments) through a simple web widget. The ability to preview tasks in day, week, month, and calendar view is supported.
The author will follow a hands-on approach where all the features and options are shown through examples. The only tools needed are Notepad++ and a web browser (such as Google Chrome).
The course will start by introducing the scheduler and comparing the functionality to a similar scheduler (like Office Outlook). Then the scheduler features and options are discussed step-by-step using carefully selected examples.
By the time the user is done with this course, he/she will be well equipped to power his/her site with the new scheduler functionality.
Please note that since the scheduler is currently in beta release, some of the functionality might change, but the core concepts will remain the same.
In this section, we will introduce the scheduler and see the different products that Kendo UI provides. We will download Kendo UI Web (that contains the scheduler) and discuss the content of the download.
In this section, we will choose Notepad++ as the development tool and Google Chrome as the browser. We will look at a complete example that shows off the scheduler and its features.
The main property of a scheduler is the data source. In this exercise, we will see how to create a data source and preview the events in the scheduler. Note: Make sure you download the jquery.min.js and kendo.web.min.js and place them in the appropriate folder to test the page (these type of files cannot be uploaded on this site).
This section covers adding a date header template, all day event property and template, and using resources. Note: Remember to add the css and the js files from the appropriate folders in order for the example to work properly.
The events, by default, are editable (we can change them, delete them...). But we are presented with some options to change that behavior. We will see how that can be accomplished in this lesson.
We will use the rooms as the resources, and we will see how to group the events using these resources by applying the group, dataSource, and resources properties. Remember to have the following files in order for the example to work:
<link href="Styles/kendo.common.min.css" rel="stylesheet" />
<link href="Styles/kendo.metroblack.min.css" rel="stylesheet" />
As you will see in this discussion, we have control over the major and minor ticks on the left side of the scheduler. We can change these values and we can create templates to affect the display.
We will work with the views by manipulating their properties and set the "Month" view to be the default.
In the previous exercises we changed the properties within the scheduler to accomplish our tasks. Today, we will create another scheduler instance and change the event's properties programmatically.
This lesson will wrap up the Kendo UI Web Scheduler discussion. The features we discussed should provide you everthing you need to feel comfortable using this widget in your web applications.