1

我需要一种方法来阻止事件的持续时间最长为 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>

4

0 回答 0