我想通过react-big-calendar添加“创建事件”功能

问题描述 投票:0回答:1

我正在使用 React-big-calendar 库来制作日历。一切都很好。我希望在当天的时段应该有一个标签或文本“+create-event”,它将重定向到“/create-event-page/create-event”。 但我无法确定可以使用哪个道具或自定义道具来添加这个东西:

**CODE:**
import React from "react";
import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css"; // Import the calendar styles

const localizer = momentLocalizer(moment);

const myEventsList = [
  {
start: moment("2023-09-23T10:00:00").toDate(),
end: moment("2023-09-23T13:00:00").toDate(),
title: "Concert",
  },
  {
start: moment("2023-09-26T10:00:00").toDate(),
end: moment("2023-09-28T13:00:00").toDate(),
title: "Music Workshop",
  },
  {
start: moment("2023-09-24T10:00:00").toDate(),
end: moment("2023-09-24T13:00:00").toDate(),
title: "Conference",
  },
];

export default function OrganizerEventCalendar() {
  const handleSelect = () => {
    console.log("Hello World");
  };

  return (
    <div>
      <Calendar
        localizer={localizer}
        events={myEventsList}
        selectable={true}
        onSelectSlot={handleSelect}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 500 }}
        views={["month", "week"]}
        formats={{ weekdayFormat: "dddd" }}
        className="table-drop-shadow rounded-lg bg-[#F3FAFF] p-3"
      />
    </div>
  );
}


The thing i wants is look like this:
Please refer to the image as it contains create event label on the date-slot. How can I                     implement this:

我想知道这个库的哪个道具可以用来实现这个功能或者我如何自定义实现这个功能?

calendar react-big-calendar react-calendar
1个回答
0
投票

听起来您正在寻找需要传递给“插槽/事件”的“自定义组件”,您可能想研究一下。

© www.soinside.com 2019 - 2024. All rights reserved.