Angular Bootstrap Calender Drag Event not working - angularjs

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.