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;
}


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


.sxmonth-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;
}