如何将RRule应用于拖动到日历的外部事件

时间:2020-09-17 13:31:38

标签: javascript reactjs fullcalendar

在我的react应用中,我试图将RRule应用于拖动到日历中的外部事件。

  render() {
  return (<>
    <div className = "draggable-task"
    id = 'my-unique-id'
    key = 'my-unique-id'
    data-event = {
      `{"id": "my-unique-id", "title":"my event", "color": "#ffffff", "backgroundColor": "#000000", "duration": "00:30", "borderColor": "#000000" }`
    }>My event </div>

    <FullCalendar plugins = {[dayGridPlugin, timeGridPlugin, interactionPlugin, bootstrapPlugin, rrulePlugin]}
    initialView = "timeGridWeek"
    headerToolbar = {
      {
        start: 'title',
        center: 'timeGridDay,timeGridWeek,dayGridMonth',
        end: 'today prev,next'
      }
    }
    droppable = {true}
    editable = {true}
    eventReceive = {(info) => this.onEventReceive(info)}
    /> 
  </>)
}

componentDidMount() {
  let draggableEl = document.getElementById('my-unique-id');
  if (draggableEl) {
    new Draggable(draggableEl);
  }
}
onEventReceive(info) {
  // set recurring properties
  info.event.rrule = {
    freq: 'daily',
    interval: 1,
    dtstart: info.event.startDate,
    until: info.event.endDate
  };
}

将事件拖动到日历后,该事件将正确添加到日历中,但不会出现重复发生的事件。

0 个答案:

没有答案