Breaking News: Grepper is joining You.com. Read the official announcement!

create an all day event by drag and drop

Dark Donkey answered on June 4, 2021 Popularity 1/10 Helpfulness 1/10

answer create an all day event by drag and drop

create an all day event by drag and drop

Comment

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>
  );
};

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: drag-and-drop javascript

Link to this answer
Share Copy Link

Contributed on Jun 04 2021

Dark Donkey

0 Answers Avg Quality 2/10

create an all day event by drag and drop

Contents

More Related Answers

create an all day event by drag and drop

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.