React-big-calendar multiday event

Question

I am using react-big-calendar and trying to show multiday event at particular time slot.

import { Calendar, momentLocalizer } from "react-big-calendar";
 <Calendar
          culture="en-GB"
          localizer={localizer}
          events={event}
          dayLayoutAlgorithm="overlap"
          startAccessor="start"
          endAccessor="end"
          style={{ height: 600 }}
          step={15}
          // dayLayoutAlgorithm="no-overlap"
          views={["month", "week", "day"]}
          onNavigate={handleNavigate}
          components={{
            toolbar: CustomToolbar,
            event: CustomEvent,
          }}
          formats={{
            eventTimeRangeFormat: (date, culture, localizer) => "",
            weekdayFormat: (date, culture, localizer) =>
              localizer.format(date, "dddd", culture),
            dayHeaderFormat: (date, culture, localizer) =>
              localizer.format(date, "dddd, DD MMMM YYYY", culture),
          }}
          eventPropGetter={(event) => {
            const backgroundColor =
              event.type === "one_on_one_session" ? "#f0e3d7" : "#dce5f1";
            const fontColor =
              event.type === "one_on_one_session" ? "#D98C43" : "#10375c";
            return {
              style: {
                backgroundColor: backgroundColor,
                size: "small",
                color: fontColor,
                borderRadius: "1px",
                border: "0px",
                display: "block",
                width:"100%"
              },
            };
          }}
        />

here is my one sample event:

{
    "id": "a3c50e3b-cd9d-4701-8b35-86e05df23c3d",
    "type": "jitsi_live_session",
    "title": "jitsionesep",
    "course_name": "rafel mission",
    "start": "2024-09-17T09:07:00.000Z",
    "end": "2024-09-20T10:07:00.000Z",
    "learning_object_id": "71d07c4e-6417-4af9-8509-7047f0dbf980",
    "session_id": "7d93ecd1-2d12-4b5b-8c4d-dab33169579e",
    "allDay": false
}

I have attached the screenshot of my code.the event should appear adjacent to the time slot rather than at the top.

I tried setting allday property in event as false. And I am expecting the event should appear adjacent to time slot rater that at the top

Answer 1

Use two different start and end times. One to display on react-big-calendar and other to store the actual data.

Your new sample event may look like this.

{
    "id": "a3c50e3b-cd9d-4701-8b35-86e05df23c3d",
    "details":{
      "start": "2024-09-17T09:07:00.000Z",
      "end": "2024-09-20T10:07:00.000Z",
    }
    "type": "jitsi_live_session",
    "title": "jitsionesep",
    "course_name": "rafel mission",
    "start": "2024-09-17T09:07:00.000Z",
    "end": "2024-09-17T10:07:00.000Z",
    "learning_object_id": "71d07c4e-6417-4af9-8509-7047f0dbf980",
    "session_id": "7d93ecd1-2d12-4b5b-8c4d-dab33169579e",
    "allDay": false
}

The outer start and end time are used by react-big-calendar for displaying the event on the calendar whereas you can use the start and end from details object to use for yourself.

You can modify the end for react-big-calendar as

end: new Date(start.getTime() + 15*60*1000)

which will add 15 minutes to the start time. Since react-big-calendar takes the event as allDay if the start and end are on different dates(which seems quite fair), so may be its only way to do it.