Event calendar, drag end event not updating start time

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));

});

Update: It seems this is only an issue on invalid days. ie. days that the business is closed. So, I’m going to assume this is by design.

Hi @Vincent_Wansink :wave:

Yes, that’s right, in case of an invalid, this won’t work.

So, this being the case, how can I capture the fact that the event being dragged is on an invalid date? I’d like to inform the user of the reason that they can not drag this event, but how do I know?

@Vincent_Wansink You can use the onEventDragStart and onEventDragEnd lifecycle events.

As shown in this example.