Как обновить ограничения или заблокировать изменение размера события до 24 часов - PullRequest
Новая
       9

Как обновить ограничения или заблокировать изменение размера события до 24 часов

1 голос
/ 04 апреля 2019

Мне нужен способ, чтобы заблокировать продолжительность события до 24 часов максимум, но мне также нужно иметь возможность перетаскивать событие в течение дня (или более). В предыдущей версии fullcalendar я смог установить ограничение на событие с помощью «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>
...