Drag and drop

Use the props onDragEvent and dragEventConfig to setup event drag and drop. All-day events cannot be dragged. See the following basic example.

Drag and drop

const eventsReducer = (prevEvents, payload) => {
  // Just an example reducer, you'll probably use your own
  const {event, newStartDate, newEndDate} = payload;
  return [
    ...prevEvents.filter(e => e.id !== event.id),
    {
      ...event,
      startDate: newStartDate,
      endDate: newEndDate,
    },
  ];
};

const MyComponent = () => {
  const [events, updateEvent] = useReducer(eventsReducer, []);

  return (
    <WeekView
      events={events}
      onDragEvent={(event, newStartDate, newEndDate) => {
        // Here you must update the event in your local DB
        updateEvent({ event, newStartDate, newEndDate })
      }}
    />
  );
}