CODEWITHSUNDEEP
reactjsreact-big-calendarquestion2answer
Vinay
Vinay

Reputation: 1

react-big-calendar misaligned (Appearing on the Left Instead of Centered)

I'm using React Big Calendar in my project, but the calendar is misaligned—it.

This is screenshot of the issue: (https://i.sstatic.net/2hGOt8M6.png)

This is my code

import { Calendar, dayjsLocalizer } from 'react-big-calendar' import dayjs from 'dayjs' import { useState } from 'react';

const Tryyy = () => { const localizer = dayjsLocalizer(dayjs)

const [eventList] = useState([
    {
        start: new Date(2025, 1, 25),
        end: new Date(2025, 1, 25),
        type: 'leave',
    },

]);

return (
    <div>
        <Calendar
            localizer={localizer}
            events={eventList}
            startAccessor="start"
            endAccessor="end"
            style={{ height: 500 }}
        />
    </div>
)

}

export default Tryyy

It should be look like this: (https://i.sstatic.net/ckob3VgY.png)

Upvotes: 0

Views: 19

Answers (1)

Lorman Ribano
Lorman Ribano

Reputation: 1

Looking at your screenshots and code, I see several architectural issues causing the misalignment in your React Big Calendar implementation.

import React, { useState, useCallback, useMemo } from 'react';
import { Calendar, dayjsLocalizer } from 'react-big-calendar';
import dayjs from 'dayjs';
import 'react-big-calendar/lib/css/react-big-calendar.css'; // Critical for layout

const CalendarComponent = () => {
  const localizer = useMemo(() => dayjsLocalizer(dayjs), []);
  const [view, setView] = useState('month');
  
  const eventList = useMemo(() => [
    {
      id: 'leave-1', // Add unique ID for reconciliation
      title: 'Leave Day', // Required for event display 
      start: new Date(2025, 1, 25),
      end: new Date(2025, 1, 25),
      type: 'leave',
    },
  ], []);
  
  const eventStyleGetter = useCallback((event) => ({
    style: {
      backgroundColor: event.type === 'leave' ? '#3174ad' : '#1976d2',
      borderRadius: '4px',
      color: 'white',
      border: 'none',
      display: 'block',
      overflow: 'hidden'
    }
  }), []);

  return (
    <div className="calendar-container" style={{ height: '100vh' }}>
      <Calendar
        localizer={localizer}
        events={eventList}
        startAccessor="start"
        endAccessor="end"
        titleAccessor="title"
        style={{ height: 700 }}
        views={['month', 'week', 'day', 'agenda']}
        view={view}
        onView={setView}
        eventPropGetter={eventStyleGetter}
        popup
        selectable
      />
    </div>
  );
};

export default CalendarComponent;

Your primary issues:

  • Missing CSS import: React Big Calendar doesn't apply styles automatically - you must explicitly import the stylesheet.
  • Component architecture: For a production app, consider separating the calendar configuration logic from rendering concerns.
  • Performance optimizations: I've added memoization with useMemo/useCallback to prevent unnecessary re-rendering when events are static.
  • Proper event schema: Missing title property caused events to render incorrectly - title is a required field for the default event renderer.
  • Container dimensioning: The calendar needs an explicit container height to properly calculate its internal layout.

For more sophisticated implementations, consider extracting event handling logic into custom hooks, implementing context for shared calendar state, and creating specialized event renderers for complex event types.

Upvotes: 0

Related Questions