create an all day event by drag and drop

1import React from "react";
2import { Calendar, momentLocalizer } from "react-big-calendar";
3import moment from "moment";
4import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
5import "react-big-calendar/lib/css/react-big-calendar.css";
6import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
7
8const DnDCalendar = withDragAndDrop(Calendar);
9
10const localizer = momentLocalizer(moment);
11
12const events = [
13  {
14    id: 0,
15    title: "All Day Event very long title",
16    allDay: true,
17    start: new Date(2015, 3, 0),
18    end: new Date(2015, 3, 1)
19  },
20  {
21    id: 1,
22    title: "Long Event",
23    start: new Date(2015, 3, 7),
24    end: new Date(2015, 3, 10)
25  },
26
27  {
28    id: 2,
29    title: "DTS STARTS",
30    start: new Date(2016, 2, 13, 0, 0, 0),
31    end: new Date(2016, 2, 20, 0, 0, 0)
32  },
33
34  {
35    id: 3,
36    title: "DTS ENDS",
37    start: new Date(2016, 10, 6, 0, 0, 0),
38    end: new Date(2016, 10, 13, 0, 0, 0),
39    desc: "Description is shown here"
40  },
41
42  {
43    id: 4,
44    title: "Leave",
45    start: new Date(new Date().setHours(new Date().getHours() - 3)),
46    end: new Date(new Date().setHours(new Date().getHours() + 3)),
47    desc: "Description is shown here"
48  }
49];
50
51const onEventDrop = ({ event, start, end, allDay }) => {
52  console.log("event clicked");
53  console.log(start, event, end, allDay);
54};
55
56const Scheduler = () => {
57  return (
58    <>
59      <div className="wrapper" style={{ minHeight: "100vh" }}>
60        <DnDCalendar
61          selectable
62          events={events}
63          startAccessor="start"
64          endAccessor="end"
65          defaultDate={moment().toDate()}
66          localizer={localizer}
67          toolbar
68          resizable
69          onEventDrop={onEventDrop}
70          components={{
71            event: EventComponent,
72            agenda: {
73              event: EventAgenda
74            }
75          }}
76          onSelectSlot={() => console.log("selected")}
77          onSelectEvent={event => alert(event.desc)}
78        />
79      </div>
80    </>
81  );
82};
83
84export default Scheduler;
85
86const EventComponent = ({ start, end, title }) => {
87  return (
88    <>
89      <p>{title}</p>
90      <p>{start}</p>
91      <p>{end}</p>
92    </>
93  );
94};
95
96const EventAgenda = ({ event }) => {
97  return (
98    <span>
99      <em style={{ color: "magenta" }}>{event.title}</em>
100      <p>{event.desc}</p>
101    </span>
102  );
103};
104