react-big-calendar selection offset

[Xizted]

I have a calendar component that uses react-big-calendar.

When I select a range of hours, it is not taking the selection from where the click started, but a little bit behind the selection.

My code: Calendar.tsx

import {Calendar, Views, dayjsLocalizer} from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
import dayjs from 'dayjs'
import timezone from 'dayjs/plugin/timezone'
import 'react-big-calendar/lib/css/react-big-calendar.css'
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css'
import './styles.css'

dayjs.extend(timezone)
const localizer = dayjsLocalizer(dayjs)
const DnDCalendar = withDragAndDrop(Calendar)

const FullCalendar = ({...props}: FullCalendarProps) => {

  return (
    <div className='d-flex h-100 flex-column w-100 gap-2 p-2'>
      <ToolBar />
      <DnDCalendar
        localizer={localizer}
        dayLayoutAlgorithm='no-overlap'
        showMultiDayTimes
        resizable
        selectable
        {...props}
      />
    </div>
  )
}

export default FullCalendar

styles.css

.rbc-header {
  color: var(--bs-gray-900);
  font-size: 14px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px !important;
  background: transparent;
}

.rbc-allday-cell {
  display: none;
}

.rbc-today {
  background-color: rgb(223, 255, 234);
}

.rbc-time-slot {
  color: var(--bs-gray-900);
  z-index: 1;
  height: 2rem;
}

.rbc-time-slot:not(.rbc-today .rbc-time-slot) {
  background-color: #fff;
}

.rbc-day-bg:not(.rbc-today, .rbc-selected-cell) {
  color: var(--bs-gray-900);
  background-color: #fff;
}

.rbc-event,
.rbc-background-event {
  z-index: 20;
  padding: 0 !important;
  border: none !important;
}

.rbc-day-slot .rbc-events-container {
  padding: 0 !important;
  margin: 0 !important;
}

How to fix this selection offset?

2024-05-02.19-45-45.mp4

[totitoti7]

Here's a breakdown of how to potentially fix this:

1. Event Container Padding:

• Remove Padding: Try removing any padding from the .rbc-events-container class in your CSS. Excessive padding can cause the selection area to misalign with the visual time slots.

• Adjust Padding: If you need padding for visual appeal, experiment with different values until you find a balance that aligns the selection accurately.

2. Time Slot Height:

• Default Height: react-big-calendar has a default height for time slots. Ensure that your custom styling (.rbc-time-slot) isn't significantly altering this height, as it can affect selection accuracy.
• Visual Alignment: If you've adjusted the time slot height, make sure it visually aligns with the selection area to avoid discrepancies.

Code Example (CSS Adjustments):

/* styles.css */

.rbc-time-slot {
    color: var(--bs-gray-900);
    z-index: 1;
    height: 2rem; /* Make sure this aligns visually */
    /* Remove or adjust padding if causing issues: */
    /* padding: 0;  */ 
}

.rbc-day-slot .rbc-events-container {
    /* Remove or adjust padding if causing issues: */
    /* padding: 0 !important; */ 
    margin: 0 !important; 
}

Additional Tips:

• Console Logs: Use console.log statements to track mouse coordinates during the selection process to better understand how react-big-calendar handles them.