So for some reason my drag start and drag end events don’t appear to be firing on my event calendar. This is my code:
$.get("get-bookings.json.php?staffid=0", function(data){
var calendar = $('#bookings-schedule').mobiscroll5().eventcalendar({
invalid: [<?=$invalidstring?>],
display: 'inline',
themeVariant: 'light',
calendarHeight: 600,
groupBy: 'resource',
clickToCreate: 'double',
dragToCreate: true,
dragToMove: true,
dragToResize: true,
dragTimeStep: <?=$scheduleincrements?>,
resources: [<?=$resourcestring?>],
responsive: {
xsmall: {
view: {
agenda: {type: 'day',
startDay: <?=$firstdayofweek?>,
startTime: '<?=$schedulestarttime?>',
endTime: '<?=$scheduleendtime?>'}
}
},
small: {
view: {
schedule: {type: 'day',
startDay: <?=$firstdayofweek?>,
startTime: '<?=$schedulestarttime?>',
endTime: '<?=$scheduleendtime?>'}
}
}
},
onEventSelect: function (event, inst) {
alert("select");
mobiscroll4.toast({
message: event.event.text
});
},
onEventDragEnd: function (event, inst) {
alert("drag end");
},
onEventDragStart: function (event, inst) {
alert("drag start");
},
onEventDelete: function (event, inst) {
alert("deleting");
},
onEventDoubleClick: function (event, inst) {
var bookingid = event.event.Id;
loadShade('Edit Booking','edit.booking.php',{'bookingid':bookingid});
},
onEventCreate: function (args, inst) {
loadShade('New Booking','new.booking.php');
if (hasOverlap(args, inst)) {
mobiscroll.toast({
message: 'Make sure not to double book'
});
return false;
}
},
onEventUpdate: function (args, inst) {
if (hasOverlap(args, inst)) {
mobiscroll.toast({
message: 'Make sure not to double book'
});
return false;
}
}
}).mobiscroll5('getInst');
calendar.setEvents(JSON.parse(data));
});
I have an event on my calendar and when I drag it or resize it, I’m expecting an alert, but I’m not getting anything. Also no JavaScript errors or anything. What am I missing?