29 |
30 |
--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /* App Module */
4 |
5 | var app = angular.module('schedulerApp', [ ]);
6 |
7 | app.controller('MainSchedulerCtrl', function($scope) {
8 | $scope.events = [
9 | { id:1, text:"Task A-12458",
10 | start_date: new Date(2018, 10, 12),
11 | end_date: new Date(2018, 10, 16) },
12 | { id:2, text:"Task A-83473",
13 | start_date: new Date(2018, 10, 22 ),
14 | end_date: new Date(2018, 10, 24 ) }
15 | ];
16 |
17 | $scope.scheduler = { date : new Date(2018,10,1) };
18 |
19 | });
--------------------------------------------------------------------------------
/js/app.scheduler.js:
--------------------------------------------------------------------------------
1 | app.directive('dhxScheduler', function() {
2 | return {
3 | restrict: 'A',
4 | scope: false,
5 | transclude: true,
6 | template:'
',
7 |
8 | link:function ($scope, $element, $attrs, $controller){
9 | //default state of the scheduler
10 | if (!$scope.scheduler)
11 | $scope.scheduler = {};
12 | $scope.scheduler.mode = $scope.scheduler.mode || "month";
13 | $scope.scheduler.date = $scope.scheduler.date || new Date();
14 |
15 | //watch data collection, reload on changes
16 | $scope.$watch($attrs.data, function(collection){
17 | scheduler.clearAll();
18 | scheduler.parse(collection, "json");
19 | }, true);
20 |
21 | //mode or date
22 | $scope.$watch(function(){
23 | return $scope.scheduler.mode + $scope.scheduler.date.toString();
24 | }, function(nv, ov) {
25 | var mode = scheduler.getState();
26 | if (nv.date != mode.date || nv.mode != mode.mode)
27 | scheduler.setCurrentView($scope.scheduler.date, $scope.scheduler.mode);
28 | }, true);
29 |
30 | //size of scheduler
31 | $scope.$watch(function() {
32 | return $element[0].offsetWidth + "." + $element[0].offsetHeight;
33 | }, function() {
34 | scheduler.setCurrentView();
35 | });
36 |
37 | //styling for dhtmlx scheduler
38 | $element.addClass("dhx_cal_container");
39 |
40 | //init scheduler
41 | scheduler.init($element[0], $scope.scheduler.date, $scope.scheduler.mode);
42 | }
43 | }
44 | });
45 |
46 | app.directive('dhxTemplate', ['$interpolate', function($interpolate){
47 | return {
48 | restrict: 'AE',
49 | terminal:true,
50 |
51 | link:function($scope, $element, $attrs, $controller){
52 | $element[0].style.display = 'none';
53 |
54 | var htmlTemplate = $interpolate($element.html());
55 | scheduler.templates[$attrs.dhxTemplate] = function(start, end, event){
56 | return htmlTemplate({event: event});
57 | };
58 | }
59 | };
60 | }]);
61 |
--------------------------------------------------------------------------------