I want to add "create-event" functionality through react-big-calendar

Question

I am using React-big-calendar library for making a calendar. Everything is perfectly fine. I want that on current day slot there should a label or text "+create-event" that will re-direct to "/create-event-page/create-event". But I am unable to identify which prop or custom prop can be used to add this thing:

**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:

i want to know which prop of this library can be used to achieve this functionality or how can customly I can implement this?

Answer 1

Sounds like you are looking for a "custom component" that needs to be passed on to "slots/events", you might want to look into that.