Angular Bootstrap Calender Drag Event not working

Question

I am facing problem in drag event of Angular bootstrap calender. I am using https://mattlewis92.github.io/angular-bootstrap-calendar/#?example=draggable-events Here is my HTML code:

<div ng-controller="scheduleCtrl as vm">
<div class="calender-mid">
    <div ng-controller="scheduleCtrl as vm">
        <h2 class="text-center">{{ vm.calendarTitle }}</h2>

        <div class="row">
            <div class="col-md-6 text-center">
                <div class="btn-group">
                    <button class="btn btn-primary" mwl-date-modifier date="vm.viewDate" decrement="vm.calendarView" ng-click="vm.cellIsOpen = false">
                        Previous
                    </button>
                    <button class="btn btn-default" mwl-date-modifier date="vm.viewDate" set-to-today ng-click="vm.cellIsOpen = false">
                        Today
                    </button>
                    <button class="btn btn-primary" mwl-date-modifier date="vm.viewDate" increment="vm.calendarView" ng-click="vm.cellIsOpen = false">
                        Next
                    </button>
                </div>
            </div>
            <br class="visible-xs visible-sm">
            <div class="col-md-6 text-center">
                <div class="btn-group">
                    <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'" ng-click="vm.cellIsOpen = false">Year</label>
                    <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'" ng-click="vm.cellIsOpen = false">Month</label>
                    <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'" ng-click="vm.cellIsOpen = false">Week</label>
                    <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'" ng-click="vm.cellIsOpen = false">Day</label>
                </div>
            </div>
        </div>
        <br>
        <mwl-calendar events="vm.events" view="vm.calendarView" view-date="vm.viewDate" cell-is-open="vm.cellIsOpen" cell-auto-open-disabled="true" on-timespan-click="vm.timespanClicked(calendarDate, calendarCell)" on-event-times-changed="calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd; vm.eventTimesChanged(calendarEvent)">
        </mwl-calendar>
    </div>
</div>

And my controller code is:

var vm = this;
vm.events = [
  {
    title: 'Draggable event',
    color: calendarConfig.colorTypes.warning,
    startsAt: moment().startOf('month').toDate(),
    draggable: true
  },
  {
    title: 'Non-draggable event',
    color: calendarConfig.colorTypes.info,
    startsAt: moment().startOf('month').toDate(),
    draggable: false
  }
];

vm.calendarView = 'month';
vm.viewDate = moment().startOf('month').toDate();
vm.cellIsOpen = true;

vm.eventTimesChanged = function(event) {
  vm.viewDate = event.startsAt;
  alert.show('Dragged and dropped', event);
};

vm.timespanClicked = function(date, cell) {
  if (vm.calendarView === 'month') {
    if ((vm.cellIsOpen && moment(date).startOf('day').isSame(moment(vm.viewDate).startOf('day'))) || cell.events.length === 0 || !cell.inMonth) {
      vm.cellIsOpen = false;
    } else {
      vm.cellIsOpen = true;
      vm.viewDate = date;
    }
  } else if (vm.calendarView === 'year') {
    if ((vm.cellIsOpen && moment(date).startOf('month').isSame(moment(vm.viewDate).startOf('month'))) || cell.events.length === 0) {
      vm.cellIsOpen = false;
    } else {
      vm.cellIsOpen = true;
      vm.viewDate = date;
    }
  }

};

Event is showing properly but when i try to drag an event from some date to some other date then it is not changing the event date. No idea what am i doing wrong or missing something. Note: I have injected all dependencies and included all required file.

Please help me. Thanks in advance.

Update:

I have identified that when I drag an event from one date to other date then, then transform is not working while in demo link https://mattlewis92.github.io/angular-bootstrap-calendar/#?example=draggable-events , transform is working. Please suggest my mistake.

Answer 1

In your HTML markup, inside the eventTimesChanged function send a second parameter calendarDate.

html code

and in your JavaScript code update eventTimesChanged function event parameter startdate using calendardate parameter.

js code

Answer 2

I ran into some issues with this recently, and I found that you need to include interact script before the angular-bootstrap-calendar-tpls script.