Question

我无法在日历上删除外部事件。日历可以正确呈现，并且功能select和eventClick可以正常工作。我现在想知道如何在日历中删除外部事件... 我读过the fullcalendar.io documentation，但我确实做不到自己想要的事情。

我正在使用的设置如下：

<FullCalendar 
    id="calendario"
    header={{
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    }}
    navLinks={true}
    nowIndicator={true}
    viewRender={(view, element) => {
        this.handleChangeView(view);
    }}
    selectable={true}
    editable={true}
    droppable={true}
    eventDrop={function(eventBj, date) {
        console.log('eventDrop function');
    }}
    drop={(date, jsEvent, ui, resourceId) => {
        console.log('drop function');
    }}
    select={(start, end, allDay) => {
        this.handleSelect(start, end, allDay);
    }}
    eventClick={(calEvent, jsEvent, view) => {
        this.handleClick(calEvent, jsEvent, view);
    }}
    events={events}
/>

我包括了jQuery-UI，并且该事件触发了draggable，我可以将外部事件悬停在日历上。

编辑

拖动效果是在componentDidMount生命周期中启动的。

注意：我在设置innerHTML时使用了一个缩小器，但是我将它放在此处而不使用缩小器来更好地理解它。

componentDidMount() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.innerHTML = "$('.calendar-events').each(function() {
        $(this).data('event', {
            title: $.trim($(this).text()),
            stick: true
        });
        $(this).draggable({
            zIndex: 999,
            revert: true,
            revertDuration: 0
        })
    });";
    document.body.appendChild(s);
}

我在控制台中有0个错误和0个警告。拖动效果会像它应该发生的那样：/

EDIT-2

我当前正在使用2个类来呈现日历：

1。

class Calendario extends Component {
  componentDidMount() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.innerHTML =
      "$('.calendar-events').each(function(){$(this).data('event',{title:$.trim($(this).text()),stick:!0}),$(this).draggable({zIndex:999,revert:!0,revertDuration:0})});";
    document.body.appendChild(s);
  }

  render() {
    return (
      <>
        <Grid container spacing={16} >
          <Grid item md={3}>
            Eventos
            <div className="calendar-events">
              <i className="fa fa-circle text-info" /> Consultas
            </div>
          </Grid>
          <Grid item md={9} style={{ minHeight: '500px' }}>
            <FullCalendarComponent />
          </Grid>
        </Grid>
      </>
    );
  }
}

第二

export class FullCalendarComponent extends Component {
  state = {
    view: 'agendaWeek',
    events: [
      {
        title: 'Static Event 1',
        start: '2018-11-20T16:00:00'
      },
      {
        title: 'Static Event 2',
        start: '2018-11-21T16:00:00',
        end: '2018-11-21T18:00:00'
      },
      {
        title: 'Static Event 3',
        start: '2018-11-20T11:00:00',
        end: '2018-11-20T13:00:00'
      },
      {
        title: 'Static Event 4',
        start: '2018-11-22T14:00:00',
        end: '2018-11-22T16:00:00'
      }
    ]
  };

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.events !== nextState.events) {
      return true;
    }
    return false;
  }

  handleDrop = (eventObj, date) => {
    console.group('onDrop');
    console.log('date');
    console.dir(date);
    console.groupEnd();
  };

  handleSelect = (start, end, allDay) => {
    console.group('select');
    console.log('start');
    console.dir(start);
    console.dir('end');
    console.dir(end);
    console.groupEnd();
  };

  handleClick = (calEvent, jsEvent, view) => {
    console.group('click');
    console.log('calEvent');
    console.dir(calEvent);
    console.groupEnd();
  };

  handleChangeView = view => e => {
    e.preventDefault();
    this.setState({
      view: view.name
    });
  };

  render() {
    const { events, view } = this.state;
    return (
      <FullCalendar 
        id="calendario"
        header={{
            left: 'prev,next today myCustomButton',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        }}
        navLinks={true}
        nowIndicator={true}
        viewRender={(view, element) => {
            this.handleChangeView(view);
        }}
        selectable={true}
        editable={true}
        droppable={true}
        eventDrop={function(eventBj, date) {
            console.log('eventDrop function');
        }}
        drop={(date, jsEvent, ui, resourceId) => {
            console.log('drop function');
        }}
        select={(start, end, allDay) => {
            this.handleSelect(start, end, allDay);
        }}
        eventClick={(calEvent, jsEvent, view) => {
            this.handleClick(calEvent, jsEvent, view);
        }}
        events={events}
      />
    );
  }
}

在我的index.html文件中，我包含了jquery.min.js和jquery-ui.min.js的脚本

Answer 1

仅针对内部事件删除触发回调eventDrop。您需要为外部事件删除添加回调eventReceive。然后，您至少可以确定fullcalendar是否正在检测墨滴。我还把我的全日历放在了React包装器中，经过一番尝试和错误之后，它能够使事件变为可拖动状态，并且效果很好！

拖放外部事件FullCalendar React-Wrapper

1 个答案: