create an all day event by drag and drop

Question

I am using react-big-calendar for scheduling availability and unavailability. I could able to create a schedule for a single day by clicking on the respective day cell. However, my requirement is to create an schedule by drag and drop method. Like if i am unavailable from Nov17 - Nov25 then i should be able to drag from Nov17 and drop to Nov25 to create those days as my unavailable event.

I could not get it done.

here is what i have done

https://codesandbox.io/s/upbeat-engelbart-sfsnh

Here is the code

import React from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
import "react-big-calendar/lib/css/react-big-calendar.css";
import "react-big-calendar/lib/addons/dragAndDrop/styles.css";

const DnDCalendar = withDragAndDrop(Calendar);

const localizer = momentLocalizer(moment);

const events = [
  {
    id: 0,
    title: "All Day Event very long title",
    allDay: true,
    start: new Date(2015, 3, 0),
    end: new Date(2015, 3, 1)
  },
  {
    id: 1,
    title: "Long Event",
    start: new Date(2015, 3, 7),
    end: new Date(2015, 3, 10)
  },

  {
    id: 2,
    title: "DTS STARTS",
    start: new Date(2016, 2, 13, 0, 0, 0),
    end: new Date(2016, 2, 20, 0, 0, 0)
  },

  {
    id: 3,
    title: "DTS ENDS",
    start: new Date(2016, 10, 6, 0, 0, 0),
    end: new Date(2016, 10, 13, 0, 0, 0),
    desc: "Description is shown here"
  },

  {
    id: 4,
    title: "Leave",
    start: new Date(new Date().setHours(new Date().getHours() - 3)),
    end: new Date(new Date().setHours(new Date().getHours() + 3)),
    desc: "Description is shown here"
  }
];

const onEventDrop = ({ event, start, end, allDay }) => {
  console.log("event clicked");
  console.log(start, event, end, allDay);
};

const Scheduler = () => {
  return (
    <>
      <div className="wrapper" style={{ minHeight: "100vh" }}>
        <DnDCalendar
          selectable
          events={events}
          startAccessor="start"
          endAccessor="end"
          defaultDate={moment().toDate()}
          localizer={localizer}
          toolbar
          resizable
          onEventDrop={onEventDrop}
          components={{
            event: EventComponent,
            agenda: {
              event: EventAgenda
            }
          }}
          onSelectSlot={() => console.log("selected")}
          onSelectEvent={event => alert(event.desc)}
        />
      </div>
    </>
  );
};

export default Scheduler;

const EventComponent = ({ start, end, title }) => {
  return (
    <>
      <p>{title}</p>
      <p>{start}</p>
      <p>{end}</p>
    </>
  );
};

const EventAgenda = ({ event }) => {
  return (
    <span>
      <em style={{ color: "magenta" }}>{event.title}</em>
      <p>{event.desc}</p>
    </span>
  );
};

Answer 1

Since your events array is going to be dynamic, it should not be stored in a static variable, but passed to the component as props or stored in the component's state, so that every update to the array will generate a re-render.

I have forked your code sandbox with a working example here: https://codesandbox.io/s/gifted-lehmann-xinxc

Here is the main change (storing dynamic events array in the component state using React.useState hook):

const Scheduler = () => {
  const [ events, setEvents ] = React.useState(initialEvents);

  const addEvent = ({ event, start, end, allDay }) => {
    const newEvent = {
      id: events.length,
      title: "New event",
      start: new Date(new Date(start).setHours(new Date().getHours() - 3)),
      end: new Date(new Date(end).setHours(new Date().getHours() + 3)),
      desc: "This is a new event"
    }

    setEvents(state => [ ...state, newEvent ]);
  };

  return (
    <>
      <div className="wrapper" style={{ minHeight: "100vh" }}>
        <DnDCalendar
          selectable
          events={events}
          startAccessor="start"
          endAccessor="end"
          defaultDate={moment().toDate()}
          localizer={localizer}
          toolbar
          resizable
          onEventDrop={onEventDrop}
          components={{
            event: EventComponent,
            agenda: {
              event: EventAgenda
            }
          }}
          onSelectSlot={addEvent}
          onSelectEvent={event => alert(event.desc)}
        />
      </div>
    </>
  );
};

export default Scheduler;