create an all day event by drag and drop

Solutions on MaxInterview for create an all day event by drag and drop by the best coders in the world

showing results for - "create an all day event by drag and drop"
Alessio
30 Nov 2018
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