I started Angular js recently, and for a project, i have to use calendar-ui to manage events from database.
I managed to use the calendar correctly, using first events create manually. I tried now to bind with datas in database, but it's now comes the problem.
Here is my code :
$scope.eventsTab = [];
$scope.events = {};
$http({
url: "myurl",
method: "POST",
data: postData,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data) {
$scope.eventsTab.push({type:'session',title: data.title,start: new Date(y, m, 11, 15, 0),end: new Date(y, m, 20, 17, 30),url: 'http://google.com/'});
$scope.events = {
color: 'orange',
textColor: 'white',
events: $scope.eventsTab
};
});
$scope.eventSources = [$scope.events];
And this is not working, the event is not loaded in my calendar. I think it is a problem dues to asynchronous matters, because if i put the code from "success" function juste before the following line
$scope.eventSources = [$scope.events];
, the events appears in the calendar.
A last thing, when i use debug, i see correctly the data form the database .
Could you help me please?
Thanks !
Edit 1
If i put the code like this
$http({
url: "myurl",
method: "POST",
data: postData,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data) {
$scope.eventsTab.push({type:'session',title: data.title,start: new Date(y, m, 11, 15, 0),end: new Date(y, m, 20, 17, 30),url: 'http://google.com/'});
$scope.events = {
color: 'orange',
textColor: 'white',
events: $scope.eventsTab
};
$scope.eventSources = [$scope.events];
});
I got the error TypeError: Cannot read property 'length' of undefined
And with the following code
$http({
url: "myurl",
method: "POST",
data: postData,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data) {
$scope.eventsTab.push({type:'session',title: data.title,start: new Date(y, m, 11, 15, 0),end: new Date(y, m, 20, 17, 30),url: 'http://google.com/'});
$scope.events = {
color: 'orange',
textColor: 'white',
events: $scope.eventsTab
};
$scope.eventSources = [$scope.events];
});
$scope.eventSources = [$scope.events];
No error, but the same problem : the event is not displayed in the calendar.
Ok, a friend managed to do it in a other way :
$scope.events = {
url : "./webservices/getAllEvents",
type : 'POST',
data: {
id: objectId,
}
};
It works, so thanks to Gabin :)