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.
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;
scheduler.attachEvent("onEventLoading", function(ev){
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 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);
});
}
});