チュートリアルに従って、スケジューラをAngularで動作させるようにしました。でも質問があります。イベントに追加する画像を選択する必要があるため、スケジューラ自体ではなく、自分のフォームからのみイベントを追加できます。
しかし、これにより scheduler.collision が機能しなくなります。同じ期間内にイベントを追加することはできます。また、checkCollision メソッドをオーバーライドしたい場合、このメソッドが不明であるというエラーがコンソールに表示されます。
私はAngularが初めてなので、両方を連携させる方法がよくわかりません。
私のスケジューラディレクティブ:
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);
}
}
});
スケジューラの save_event メソッド (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);
});
}
});