Question

我在Angular bootstrap日历的拖动事件中遇到问题。我正在使用https://mattlewis92.github.io/angular-bootstrap-calendar/#?example=draggable-events 这是我的HTML代码：

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

我的控制器代码是：

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

};

事件显示正常，但当我尝试将某个事件从某个日期拖到其他某个日期时，它不会更改事件日期。不知道我做错了什么或错过了什么。注意：我已经注入了所有依赖项并包含了所有必需的文件。

请帮帮我。提前谢谢。

更新

我已经确定当我将事件从一个日期拖到另一个日期时，然后在演示链接https://mattlewis92.github.io/angular-bootstrap-calendar/#?example=draggable-events中转换不起作用，转换正在运行。请提出我的错误。

Answer 1

在HTML标记中，eventTimesChanged函数内发送第二个参数 calendarDate。

html code

并在您的JavaScript代码中使用eventTimesChanged参数更新startdate函数事件参数calendardate。

js code

Answer 2

我最近遇到了一些问题，发现您需要在angular-bootstrap-calendar-tpls脚本之前包含交互脚本。

Angular Bootstrap日历拖动事件无效

2 个答案: