Question

我在角度4中使用jquery-ui 1.12.1和fullcalendar.js 3.4。我能够在屏幕上拖动事件但是当我尝试在日历上放下事件时，drop属性不会触发，事件只是回复。

以下是我的代码部分：

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

从网站下载Out-String并将其放入我必须创建的jquery-ui。

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

node_modules/jquery-ui/dist/

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

并在您的html中使用declare var $:any; import * as moment from 'moment';

这将允许您将jquery-ui与draggable / droppable事件一起使用。我希望这对某人有帮助！

我可以拖动，但不能在fullcalendar中删除外部事件

1 个答案: