create an all day event by drag and drop
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>
);
};