Wrap Scheduler in Custom Directives

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

Example

<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>
  </div>
</div>

<script>
  angular
  .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) {
            options.success(dataEvents);
        }
      }
    });
  })
  .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>'
          }
        }
      );
</script>

See Also

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

• How to Edit Using ContextMenu
• How to Show Тooltip on hover

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

• Scheduler JavaScript API Reference
• How to Add Controls to Custom Editor
• How to Create External Editor Form
• How to Edit Using ContextMenu
• How to Get Reference to the Built-In Validator
• How to Hide Edit Buttons
• How to Nest Editors inside Event Templates

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