如何更新约束或将事件大小调整为24小时

Question

我需要一种方法来将活动的持续时间限制为最大24小时，但我还需要能够将活动拖延一天（或更长）的时间。在以前的全日历版本中，我可以使用“ eventResizeStart”设置事件约束，并使用“ eventResizeStop”删除约束，但看起来不再起作用。 在fullcalendar 4.x中还有办法吗？

编辑： 我要制作的内容（适用于v2）：

const now = moment();

$('#calendar').fullCalendar({
  defaultView: 'agendaWeek',
  events: [
    {
      title: "toto",
      start: now.format(),
      end: now.add(5, 'hours').format(),
      editable: true
    }
  ],
  eventResizeStart(event) {
    const endDate = moment(event.start).add(1, "day");
    event.constraint = {
      start: event.start,
      end: endDate.format()
    }
  },
  eventResizeStop(event) {
    delete event.constraint
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.js"></script>
<div id="calendar">
</div>

有人尝试使用v4：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const customPlugin = FullCalendar.createPlugin({
    reducers: [customReducer]
  })
  
  const start = new Date();
  const end = new Date();
  end.setHours(end.getHours() + 5);
  
  const constraintStart = new Date(start);
  const constraintEnd = new Date(constraintStart);
  constraintEnd.setDate(constraintEnd.getDate() + 1);
  
  const calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['timeGrid', 'interaction', customPlugin],
    defaultView: "timeGridWeek",
    slotDuration: "02:00:00",
    events: [
      {
        id:"toto",
        start,
        end,
        editable: true
      },
      {
        groupId: 'constraint',
        start: constraintStart,
        end: constraintEnd,
        rendering: "background",
        color: "#00000000"
      }
    ],
    
    eventResizeStart(info) {
      const event = calendar.getEventById(info.event.id);
      //both doesn't work.
      
      /*
      const start = new Date(info.event.start);
      const end = new Date(start);
      end.setDate(end.getDate() + 1);
      
      const constraint = {
        start,
        end
      };
      
      event.setProp("constraint", constraint);
      */
      event.setProp("constraint", "constraint");
      
    }
  });

  calendar.render();
});

function customReducer(state, action, calendar) {
  switch(action.type) {
    case "SET_EVENT_RESIZE":
      //hook on "mouse move" resize
      //can update state but can't use internal methods (like normalizeConstraint)
      //disableCursor doesn't work.
      //without doc i don't really want to spend time on this.
      console.log('hi !')
      return state;
    default:
      return state;
  }
}

<link href="https://unpkg.com/@fullcalendar/daygrid@4.0.1/main.min.css" rel="stylesheet" />
<link href="https://unpkg.com/@fullcalendar/core@4.0.1/main.min.css" rel="stylesheet" />
<link href="https://unpkg.com/@fullcalendar/timegrid@4.0.1/main.min.css" rel="stylesheet" />

<script src="https://unpkg.com/@fullcalendar/core@4.0.1/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/interaction@4.0.1/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/daygrid@4.0.1/main.min.js"></script>
<script src="https://unpkg.com/@fullcalendar/timegrid@4.0.1/main.js"></script>

<div id="calendar"></div>