javascript - 拖放外部事件 FullCalendar React-Wrapper

问题描述

我无法在日历上删除外部事件。日历正确呈现，功能select和eventClick工作正常。我现在想知道如何能够在日历中删除外部事件......我一直在阅读fullcalendar.io 文档，但我真的不能做我想做的事。

我使用的设置如下：

<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 个警告。并且拖动效果就像它应该发生的那样：/

编辑-2

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

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

标签： javascriptreactjsfullcalendar

javascript - 拖放外部事件 FullCalendar React-Wrapper

问题描述

解决方案

推荐阅读