Блог

Главная - Вопросы по программированию - Как применить RRule к внешнему событию, перенесенному в календарь

Как применить RRule к внешнему событию, перенесенному в календарь

#javascript #reactjs #fullcalendar

#javascript #reactjs #полный календарь

Вопрос:

В моем приложении 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
  };
}

Событие правильно добавляется в календарь, когда я его перетаскиваю, но повторяющиеся события не отображаются.

Комментарии:

1. Если вы хотите обновить свойства события после его создания, вам следует использовать функцию setProp согласно документации. Но… почему бы просто не добавить rrule к исходным data-event свойствам, тогда оно будет проанализировано вместе с остальными данными, когда событие впервые будет перенесено в календарь?

2. Поскольку это внешнее событие, которое перетаскивается в календарь, я узнаю значение некоторых свойств только при перетаскивании события (например, dtstart ), вот почему я не могу установить rrule в исходном data-event объекте.

3. Ок, да, конечно, это имеет смысл. Поэтому я предлагаю вам попробовать метод setProp и посмотреть, поможет ли это

4. Я попробовал это и получил следующее предупреждение Could not set prop 'rrule'. Use setExtendedProp instead. , и когда я попробовал setExtendedProp , это действительно не сработало..

5. Добавление нового события и возврат добавленного сработали! Хотя это и не самый чистый способ, но я думаю, что это единственное решение на данный момент, спасибо за помощь @Adyson.