Hi,
I am testing use of scheduler for my upcoming project and using Angular JS with Spring as backend. REST APIs are used for all CRUD operations in Spring. I am able to do CRD fine but having problem with Change Event function. When i update event (Only simple events have not tried Recurring), the Event is deleted from database fine but then all events from scheduler are gone. I have to reload them by page refresh to make them visible. I am sure i am doing something wrong but could not figure out. I am using Custom Lightbox with “Select”.
Appreciate some help as i could not find a way out. Please let me know if you need more details
scheduler.attachEvent("onEventSave", function(id,data,is_new_event){
alert("onEventSave " + id);
if ( (data.primary == data.backup ) || ( data.primary == null))
{
alert("Primary must be selected and Primary and Backup Contacts can not be same");
return false;
}
if (is_new_event != undefined) {
SchedulerService
.AddSchedule(1, id, data)
.then(function (response) {
if (response.id != null) {
alert("new event id :" + response.id);
var new_event_id = response.id;
scheduler.changeEventId(id, new_event_id);
scheduler._lightbox_id = new_event_id;
} else {
alert("Unexpected Error happened during creating Event, Please try again");
return false;
}
});
}else{ //Update Existing Event
SchedulerService
.UpdateSchedule(1,id,data)
.then(function (response){
if(response.id != null){
alert ("Scheduled Event Successfully updated");
var new_event_id = response.id;
scheduler.changeEventId(id, new_event_id);
scheduler._lightbox_id = new_event_id;
}else {
alert("Unexpected Error happened during updating Event, Please try again");
}
});
}
return true;
});
scheduler.attachEvent("onEventChanged", function(id,e){
alert("onEventChanged " + id);
var event = scheduler.getEvent(id);
event.text = "Primary:<b>" + getUsersLabel(e.primary.id) + "</b> Backup:<b>" + getUsersLabel(e.backup.id) + "</b>";
event.primary = e.primary.id;
event.backup = e.backup.id;
return true;
});
Hello,
do you have any JS errors in browser console when events disappear?
Regarding the code provided, please note that if .addSchedule is an asynchronous operation, it may work not exactly the way you expect.
If SchedulerService.AddSchedule/UpdateSchedule are async, then this code is executed in following order:
0) “onEventSave” is called
-
your handler is called and starts async operation AddSchedule/UpdateSchedule
-
code exits onEventSave returning ‘true’. After that lightbox is closed.
-
… js runtime doing its thing
-
.AddSchedule is completed and ‘.then’ callback is fired (note the comments):[code] .then(function (response) {
if (response.id != null) {
alert(“new event id :” + response.id);
var new_event_id = response.id;
scheduler.changeEventId(id, new_event_id);
// lightbox is already closed, assigning non-empty lightbox_id might cause some side-effects
scheduler._lightbox_id = new_event_id;
} else {
alert("Unexpected Error happened during creating Event, Please try again");
// returning false from a callback won't do anything
return false;
}
});[/code]
I think onEventSave handler should look like following:
[code] scheduler.attachEvent(“onEventSave”, function(id,data,is_new_event){
alert("onEventSave " + id);
if ( (data.primary == data.backup ) || ( data.primary == null))
{
alert(“Primary must be selected and Primary and Backup Contacts can not be same”);
return false;
}
if (is_new_event != undefined) {
SchedulerService
.AddSchedule(1, id, data)
.then(function (response) {
if (response.id != null) {
alert("new event id :" + response.id);
var new_event_id = response.id;
if(new_event_id != id):
scheduler.changeEventId(id, new_event_id);
} else {
alert("Unexpected Error happened during creating Event, Please try again");
scheduler.clearAll(); scheduler.load("datasource");// rollback changes or simply reload data
}
});
}else{ //Update Existing Event
SchedulerService
.UpdateSchedule(1,id,data)
.then(function (response){
if(response.id != null){
alert ("Scheduled Event Successfully updated");
var new_event_id = response.id;
if(new_event_id != id):
scheduler.changeEventId(id, new_event_id);
}else {
alert("Unexpected Error happened during updating Event, Please try again");
scheduler.clearAll(); scheduler.load("datasource");// rollback changes or simply reload data
}
});
}
return true;
});[/code]
Regarding onEventChanged, since its used for formatting event label you’d probably be better off with template functions
scheduler.templates.event_bar_text = scheduler.templates.event_text = function(start, end, event){
return "Primary:<b>" + (event.primary ? getUsersLabel(event.primary.id) : "")
+ "</b> Backup:<b>" + (event.backup ? getUsersLabel(e.backup.id) : "") + "</b>";
};
It will be called each time event is painted, so as long as you assign correct values to the event object they will be displayed.
Hi Alex,
Thanks for your guidance. My Aysnc Get functions were all messed up and after rectifying it. just worked like a charm. I think it will be good to provide an all out example for REST without using data processor. I will write one from my code and submit for benefit of others.
[code] scheduler.attachEvent(“onEventSave”, function(id,data,is_new_event){
alert("onEventSave " + id);
if ( (data.primary == data.backup ) || ( data.primary == null))
{
alert(“Primary must be selected and Primary and Backup Contacts can not be same”);
return false;
}
if (is_new_event != undefined) {
SchedulerService
.AddSchedule($routeParams.id, id, data,
function (response) {
alert("new event id :" + response.id);
var new_event_id = response.id;
scheduler.changeEventId(id, new_event_id);
},function(error) {
alert("Unexpected Error happened during creating Event, Please try again");
return false;
});
}else{ //Update Existing Event
SchedulerService
.UpdateSchedule($routeParams.id,id,data,
function (response){
var new_event_id = response.id;
scheduler.changeEventId(id, new_event_id);
scheduler.clearAll();
loadSchedules();
scheduler.load($scope.events);
//scheduler.updateEvent(id);
},function(error){
alert("Unexpected Error happened during updating Event, Please try again");
scheduler.clearAll();
loadSchedules();
scheduler.load($scope.events);
});
}
return true;
});[/code]