Edit this page

Wrap Scheduler in Custom Directives

The following example demonstrates how to render a Kendo UI Scheduler by using a custom AngularJS directive.

<div id="example" ng-app="KendoDemos">
  <div class="demo-section k-content" ng-controller="MyCtrl">
    <h4>Select product</h4>
    <people-scheduler event-source="events"></people-scheduler>

  .module("KendoDemos", [ "kendo.directives" ])
  .controller("MyCtrl", function($scope){
    var dataEvents = [
      { id:1, title:"theo@test.com", start: new Date(), end: new Date() },
      { id:2, title:"guest@test.com", start: new Date(), end: new Date() }

    $scope.events = new kendo.data.SchedulerDataSource({
      transport: {
        read: function(options) {
  .directive(  'peopleScheduler',
        function() {
          return {
            restrict: 'E',
            replace: true,
            scope: {
              source: "=eventSource",

            controller: function($scope, $timeout) {
              $scope.schedulerOptions = {
                date: new Date(),
                dataSource: $scope.source
            template: '<div kendo-scheduler k-options="schedulerOptions"></div>'

See Also

Other how-to examples on the Kendo UI Scheduler in AngularJS:

Other articles and how-to examples on the Kendo UI Scheduler:

For more runnable examples on the Kendo UI Scheduler, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article