javascript - 我可以拖动，但无法删除全日历中的外部事件

Question

我在 Angular 4 中使用 jquery-ui 1.12.1 和 fullcalendar.js 3.4。我可以在屏幕上拖动事件，但是当我尝试将事件拖放到日历上时，拖放属性不会触发，事件只会发生恢复回来。

这是我的代码部分:

HTML:

<div id='external-events'>
 <div id='external-events-listing'>
  <h4>Draggable Events</h4>
  <div class='fc-event'>My Event 1</div>
  <div class='fc-event'>My Event 2</div>
  <div class='fc-event'>My Event 3</div>
  <div class='fc-event'>My Event 4</div>
  <div class='fc-event'>My Event 5</div>
 </div>
</div>

JS:

   calendarInit(){
  this.calendarOptions = {
    fixedWeekCount : false,
    defaultDate: '2016-09-12',
    editable: true,
    defaultTimedEventDuration: '01:00:00',
    eventLimit: true, // allow "more" link when too many events
    eventOverlap: (stillEvent, movingEvent) => {
      return stillEvent.allDay && !movingEvent.allDay;
    },
    droppable: true,
    drop: function(date, jsEvent) {
      console.log(date, jsEvent);

    },

    selectable: true, // TO DO

    defaultView: 'agendaDay',
    header: { center: 'agendaDay,agenda3Day' }, // buttons for switching between views
    views: {
      agenda3Day: {
          type: 'agenda',
          duration: { days: 3 },
          buttonText: '3 days',
          groupByDateAndResource: true
      }
    },
    viewRender: (view, element)=>{
      this.calendarMode = view.type;
    },

    eventClick: (calEvent) => {
      this.showConfirm(calEvent)
    },

    businessHours: {
      dow: [0, 1, 2, 3, 4, 5, 6, 7],
      start: '5:00',
      end: '23:00',
    },

    resources: this.resources[this.resourceSection],
    events: [
      ...events...
      {
        resourceId: 2,
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2016-09-28',
        color: '#FFC107'        
      }
    ]
  }
}

externalEvents(){
  var externalEvents = {
    title: $.trim($('#external-events .fc-event').text()),        
  }; // creating event object and makes event text as its title

  $('#external-events .fc-event').data('externalEvents', externalEvents); //saving events into DOM

  $('#external-events .fc-event').draggable({
    revert: true,      // immediately snap back to original position
    revertDuration: 0,
    zIndex: 999      
  })

}

有人知道为什么我无法删除外部事件吗？谢谢。

Answer 1

经过大量研究，这就是我所做的，并且 fullcalendar 效果非常好。

首先你必须从 npm 安装 jquery 和 jquery-ui

npm install jquery --save

npm install jquery-ui save

下载jquery-ui从网站并将其放入 node_modules/jquery-ui/dist/我必须创建它。

然后将所有 css 和 js 文件从 index.html 移动到 angular-cli.json。这就是我的 angular-cli.json 的样子:

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/fullcalendar/dist/fullcalendar.min.css",
    "styles.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/jquery-ui/dist/jquery-ui.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../node_modules/moment/min/moment.min.js",
    "../node_modules/fullcalendar/dist/fullcalendar.min.js",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.js"
  ]

在您的 calendar.component.ts 中添加

declare var $:any;
import * as moment from 'moment';

并在您的 html 中使用 <div id="calendar"></div>

这将允许您将 jquery-ui 与可拖放事件一起使用。我希望这对某人有帮助!