dhtmlx scheduler collision detection in angular

Question

I have followed the tutorial to make the scheduler work with angular. I do have a question though. People can only add an event trough my own form, not via the scheduler itself as they have to choose an image to add to the event.

But this makes that scheduler.collision does not work. I can still add events within the same time span. also if I want to override the checkCollision method, I get an error in the console that this method is unknown.

I don't really know how to make both work together since I'm new with Angular.

my scheduler directive:

myAppProfile.directive('dhxScheduler', function() {
        return {
        restrict: 'A',
        scope: false,
        transclude: true,
        template:'<div class="dhx_cal_navline" ng-transclude></div><div class="dhx_cal_header"> 
                      </div><div class="dhx_cal_data"></div>',

        link:function ($scope, $element, $attrs, $controller){
          //default state of the scheduler
          if (!$scope.scheduler)
          $scope.scheduler = {};
          $scope.scheduler.mode = $scope.scheduler.mode || "month";
          $scope.scheduler.date = $scope.scheduler.date || new Date();

          //watch data collection, reload on changes
          $scope.$watch($attrs.data, function(collection){
                 if(collection) {

            scheduler.clearAll();
            scheduler.parse(collection, "json");


           }

          }, true);

          //watch mode and date
          $scope.$watch(function(){
            return $scope.scheduler.mode + $scope.scheduler.date.toString();
          }, function(nv, ov) {
            var mode = scheduler.getState();

            if (nv.date != mode.date || nv.mode != mode.mode)
              scheduler.setCurrentView($scope.scheduler.date, $scope.scheduler.mode);
          }, true);

          //size of scheduler
          $scope.$watch(function() {
            return $element[0].offsetWidth + "." + $element[0].offsetHeight;
          }, function() {
            scheduler.setCurrentView();
          });

          //styling for dhtmlx scheduler
          $element.addClass("dhx_cal_container");

          //init scheduler
          scheduler.config.xml_date="%Y-%m-%d %H:%i";
          scheduler.config.dblclick_create = false;
          scheduler.config.drag_create = false;
          scheduler.config.drag_move = true;
          scheduler.config.readonly = false;
          scheduler.config.touch= true; 
          scheduler.config.collision_limit = 1; //this does not give an error but does not work
          scheduler.attachEvent("onEventLoading", function(ev){ //this gives error
                return scheduler.checkCollision(ev);             
           });
          scheduler.init($element[0], new Date(), "month");
          scheduler.load("agendaController.php", "json");
          var dp = new dataProcessor("agendaController.php");
          dp.init(scheduler); 


        }
      }
});

scheduler save_event method (through php):

myAppProfile.controller('addEventController', function($scope,$location, $http) {
        $scope.saveEvent = function() {
             $http({

                    method: 'POST', 
                    url: 'eventController.php',
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    data: { 
                            'begin': $scope.begin + " " + $scope.btijd,
                            'einde': $scope.einde + " " + $scope.etijd,
                            'beschrijving': $scope.beschrijving,
                            'img': $scope.img
                         }
                }).

                success(function(data, status) {

                    $location.path("/agenda");

                }).

                error(function(data, status) {
                    alert(data);
                });
        }
});

Answer 1

Be sure that you are loading ext/dhtmlxscheduler_limit.js, without this file checkCollision method will not be defined.

Also, using checkCollision from onEventLoading is quite expensive ( you will have n*n*n/4 checks ). Instead of it you can use the code like next before sending data to a server side

var id = scheduler.addEvent({ event object details here })
if (scheduler.getEvent(id)){
  //there is no collision, server side saving data call can be initiated
} else {
  //collision detected, event *not added*, show some message for the user
}