Javascript 通过拖放创建全天活动

我正在使用

react big calendar

计划可用性和不可用性。我可以通过单击相应的day单元格来创建一天的日程安排。但是，我的要求是通过拖放方法创建一个明细表。例如，如果我无法从

Nov17-Nov25

访问，那么我应该能够从

Nov17拖放到Nov25

，将这些天创建为我的不可用事件

我无法完成它

这就是我所做的

这是密码

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

从“React”导入React；
从“react big Calendar”导入{Calendar，momentLocalizer}；
从“时刻”中导入时刻；
使用dragAndDrop从“react big calendar/lib/addons/dragAndDrop”导入；
导入“react big calendar/lib/css/react big calendar.css”；
导入“react big calendar/lib/addons/dragandrop/styles.css”；
const DnDCalendar=带DragandDrop（日历）；
常数定位器=力矩定位器（力矩）；
常量事件=[
{
id:0，
标题：“全天活动超长标题”，
全天：没错，
开始日期：新日期（2015年3月0日），
结束：新日期（2015年3月1日）
},
{
id:1，
标题：“长期活动”，
开始日期：新日期（2015年3月7日），
结束：新日期（2015年3月10日）
},
{
id:2，
标题：“DTS启动”，
开始日期：新日期（2016年2月13日0月0日），
结束：新日期（2016年2月20日0月0日）
},
{
id:3，
标题：“DTS结束”，
开始日期：新日期（2016年10月6日0月0日），
结束：新日期（2016年10月13日0月0日），
desc:“此处显示说明”
},
{
id:4，
标题：“离开”，
开始：新日期（新日期（）.setHours（新日期（）.getHours（）-3）），
结束：新日期（新日期（）.setHours（新日期（）.getHours（）+3）），
desc:“此处显示说明”
}
];
const onEventDrop=（{event，start，end，allDay}）=>{
console.log（“单击事件”）；
日志（开始、事件、结束、全天）；
};
常量调度程序=（）=>{
返回(
console.log（“选定”）}
onSelectEvent={event=>alert（event.desc）}
/>
);
};
导出默认调度程序；
const EventComponent=（{start，end，title}）=>{
返回(
{title}

{start}

{end}

);
};
const EventAgenda=（{event}）=>{
返回(
{event.title}
{event.desc}

);
};

由于事件数组将是动态的，因此不应将其存储在静态变量中，而应将其作为道具传递给组件或存储在组件的状态中，以便对数组的每次更新都将生成重新渲染

我在这里用一个工作示例为您的代码沙箱提供了分支：

以下是主要更改（使用React.useState钩子将动态事件数组存储在组件状态）：

const调度程序=（）=>{
const[events，setEvents]=React.useState（initialEvents）；
const addEvent=（{event，start，end，allDay}）=>{
常数newEvent={
id:events.length，
标题：“新事件”，
开始：新日期（新日期（开始）.setHours（新日期（）.getHours（）-3）），
结束：新日期（新日期（结束）.setHours（新日期（）.getHours（）+3）），
描述：“这是一个新事件”
}
setEvents（state=>[…state，newEvent]）；
};
返回(
警报（event.desc）}
/>
);
};
导出默认调度程序；

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;