#How to Conditionally Add Scroll to Calendar Days with More Than 3 Events in React

1 messages · Page 1 of 1 (latest)

leaden niche
#

I'm building a calendar application using React and the @schedule-x/react library. The calendar displays events in a monthly grid view, and I want to add a scrollbar to days that have more than 3 events. However, I'm facing an issue where the scrollbar appears for all days, even those with fewer than 3 events.

image.png
raw nimbusBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

leaden niche
#

here's my App.js
import React from 'react';
import { useCalendarApp, ScheduleXCalendar } from '@schedule-x/react';
import { createViewMonthGrid } from '@schedule-x/calendar';
import { createEventModalPlugin } from '@schedule-x/event-modal';
import '@schedule-x/theme-default/dist/calendar.css';
import './App.css';

const initialConfig = {
monthGridOptions: {
nEventsPerDay: 100,
},
views: [
createViewMonthGrid(),
],
events: [
{ id: 1, title: 'Evento 1', start: '2025-03-13 00:00', end: '2025-03-13 01:00' },
{ id: 2, title: 'Evento 2', start: '2025-03-13 02:00', end: '2025-03-13 03:00' },
{ id: 3, title: 'Evento 3', start: '2025-03-13 04:00', end: '2025-03-13 05:00' },
{ id: 4, title: 'Evento 4', start: '2025-03-13 06:00', end: '2025-03-13 07:00' },
{ id: 5, title: 'Evento 5', start: '2025-03-13 08:00', end: '2025-03-13 09:00' },
],
selectedDate: '2025-03-13',
plugins: [
createEventModalPlugin(),
],
};

function App() {
const calendar = useCalendarApp(initialConfig);

const eventsByDay = {};
initialConfig.events.forEach((event) => {
const date = event.start.split(' ')[0];
if (!eventsByDay[date]) {
eventsByDay[date] = [];
}
eventsByDay[date].push(event);
});

const getDayClassName = ({ date }) => {
const formattedDate = date.toISOString().split('T')[0]; // Garante formato YYYY-MM-DD
return eventsByDay[formattedDate] && eventsByDay[formattedDate].length > 3 ? 'has-scroll' : '';
};

return (
<div className="App">
<h1 className="title">Calendar App</h1>
<div className="calendar-container">
<ScheduleXCalendar
calendarApp={calendar}
dayProps={(props) => ({ className: getDayClassName(props) })}
/>
</div>
</div>
);
}

export default App;

#

here's my App.css
.App {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.title {
font-size: 2rem;
margin-bottom: 20px;
color: #61dafb;
}

.calendar-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

.sx-react-calendar-wrapper {
width: 80%;
max-width: 1200px;
height: 800px;
max-height: 90vh;
}

.sx__month-grid-day {
position: relative;
padding: var(--sx-spacing-padding2) 0;
flex: 1 1;
height: 120px;
overflow-y: auto;
border: 1px solid #ddd;
}

.sx__month-grid-day .sx-event {
padding: 4px;
background-color: #f0f0f0;
border-radius: 4px;
font-size: 14px;
max-width: 95%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}