Open Xizted opened 4 months ago
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.
/ 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;
}
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
styles.css
How to fix this selection offset?
https://github.com/jquense/react-big-calendar/assets/52983571/153a13c7-defe-4a7f-b791-02bea4b468d4