For some reason, on the onEventDragEnd event for the eventcalendar control, I’m not able to get the new start time if a user resized the event. It’s still returning the original start time in args.event.start. What am I missing?
I’m using version 5.33.2
$.get("get-staffschedule.json.php?staffid=0", function(data){
var calendar = $('#staffmainschedule').mobiscroll5().eventcalendar({
locale: mobiscroll5.locale['<?=$locale?>'],
dateFormat: js_dateformat,
invalid: [<?=$invalidstring?>],
groupBy: 'resource',
clickToCreate: false,
dragToCreate: true,
dragToMove: true,
dragToResize: true,
dragTimeStep: <?=$scheduleincrements?>,
resources: [<?=$resourcestring?>],
themeVariant: 'light',
view: {
timeline: {type: 'day',
startTime: '<?=$schedulestarttime?>',
endTime: '<?=$scheduleendtime?>',
timeCellStep: 30,
timeLabelStep: 60,
resourceRowHeight: 20}
},
renderHeader: function () {
return "<table style='width:100%'><tr><td style='width:200px'><div mbsc-calendar-nav class='cal-header-nav'></div></td>" +
"<td>" +
"<div class='cal-header-picker'>" +
"<select class=standardinput id=viewpicker style='width:120px' onchange=viewChange($('#staffmainschedule'),this.value)><option value='timeline'>Timeline</option><option value='month'>Month</option><option value='week'>Week</option><option value='day'>Day</option><option value='agenda'>Agenda</option></select>" +
"</div>" +
"</td>" +
"<td style='width:20px'><div mbsc-calendar-prev class='cal-header-prev' style='width:16px;padding:0px;margin:0px'></div></td>" +
"<td style='width:50px'><div mbsc-calendar-today class='cal-header-today'></div></td>" +
"<td style='width:20px'><div mbsc-calendar-next class='cal-header-next' style='width:16px;padding:0px;margin:0px'></div></td>" +
"</tr></table>";
},
onEventClick: function (args, inst) {
var scheduleid = args.event.Id;
var scheduleUTCdate = args.event.start;
var year = scheduleUTCdate.getFullYear();
var month = scheduleUTCdate.getMonth() + 1;
var day = scheduleUTCdate.getDate();
var scheduledate = year + '-' + padLeft(month,2) + '-' + padLeft(day,2);
loadShade('Edit Work Schedule','edit.schedule.php',{'scheduleid':scheduleid,'scheduledate':scheduledate});
//viewSchedule(scheduleid,scheduledate);
},
onEventUpdateFailed: function (event, inst) {
//toast('Invalid date. Please click to edit.','danger');
},
onEventDragEnd: function (args, inst) {
var staffid = args.event.resource;
var allowmodify = $('#modifyworkschedule').val()
var allowcreate = $('#createworkschedule').val()
var scheduleid = args.event.Id;
var UTCstartTime = args.event.start;
var starttime = padLeft(UTCstartTime.getHours(),2) + ':'+ padLeft(UTCstartTime.getMinutes(),2) + ':00';
var UTCendTime = args.event.end;
var endtime = padLeft(UTCendTime.getHours(),2) + ':'+ padLeft(UTCendTime.getMinutes(),2) + ':00';
var year = UTCstartTime.getFullYear();
var month = UTCstartTime.getMonth() + 1;
var day = UTCstartTime.getDate();
var date = year + '-' + padLeft(month,2) + '-' + padLeft(day,2);
var start = date + "T" + starttime;
var end = date + "T" + endtime;
if(scheduleid == undefined){
// Inserting new schedule with drag
if(allowcreate == "Y"){
insertQuickSchedule(staffid,date,starttime,endtime);
}else{
toast('Insufficient security privilege','danger');
refreshSchedules();
}
}else{
// Modifying existing schedule
if(args.event.recurring == null || args.event.recurring == ""){
if(allowmodify == "Y"){
dragDropSchedule(scheduleid,staffid,start,end);
}else{
toast('Insufficient security privilege','danger');
refreshSchedules();
}
}else{
popup("No Drag","This is a recurring event. Please click to edit");
refreshSchedules();
}
}
}
}).mobiscroll5('getInst');
// Set default view
viewChange($('#staffmainschedule'),defaultview);
$('#viewpicker').val(defaultview);
// Set calendar data, converting ISO dates to objects
calendar.setEvents(fixScheduleData(data));
});
