📆 Mastering React Big Calendar: A Complete Guide with Custom Slots and Mobile Optimization

If you're building an appointment system, event scheduler, or anything that needs calendar interaction in your React app, React Big Calendar is your best friend. It's powerful, flexible, and integrates easily with your data.

In this blog, we’ll cover:

✅ Setting up React Big Calendar
✅ Displaying events
✅ Handling slot selection
✅ Custom styling
✅ Mobile optimizations
✅ Bonus: Adding a popup with custom time slots!

🔧 Step 1: Installation

npm install react-big-calendar date-fns

We’re using date-fns as the date library. You can also use moment or luxon.

🧠 Step 2: Basic Setup

import { Calendar, dateFnsLocalizer } from 'react-big-calendar'
import 'react-big-calendar/lib/css/react-big-calendar.css'
import { format, parse, startOfWeek, getDay } from 'date-fns'

const locales = {
  'en-US': require('date-fns/locale/en-US'),
}

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
})

Now, render the calendar:

<Calendar
  localizer={localizer}
  events={events}
  startAccessor="start"
  endAccessor="end"
  style={{ height: 500 }}
/>

🗓 Step 3: Handling Slot Selection

Want to allow users to select a date/time?

<Calendar
  localizer={localizer}
  events={events}
  selectable
  onSelectSlot={handleDateSelection}
  views={['month']}
  defaultView="month"
  defaultDate={new Date()}
/>

const handleDateSelection = ({ start }) => {
  setSelectedDate(start);
  setPopupVisible(true);
};

📌 Tip: Add longPressThreshold={1} to make it responsive on mobile taps.

🎨 Step 4: Custom Styling for Dates

You can style past dates or special days:

const calendarStyle = (date) => {
  const today = new Date();
  today.setDate(today.getDate() - 1);

  if (date < today) {
    return {
      style: {
        backgroundColor: "#f0f0f0",
        cursor: "not-allowed",
        pointerEvents: "none",
        color: "#ccc",
      },
    };
  }

  return {};
};

<Calendar
  ...
  dayPropGetter={calendarStyle}
/>

Once a user clicks a date, show a popup with time slot options.

{popupVisible && (
  <div className="popup">
    <p>Select Time Slot for {moment(selectedDate).format("MMMM Do YYYY")}</p>
    <div className="slots-container">
      {timeSlots.map((slot) => {
        const disabled = isSlotDisabled(slot, selectedDate, events);
        return (
          <div
            key={slot}
            className="slot-box"
            style={{
              backgroundColor: disabled ? "#E0E0E0" : selectedSlot === slot ? "#007BFF" : "#FFF",
              color: disabled ? "#A9A9A9" : selectedSlot === slot ? "#FFF" : "#000",
              cursor: disabled ? "not-allowed" : "pointer",
            }}
            onClick={() => !disabled && setSelectedSlot(slot)}
          >
            {moment(slot, "HH:mm").format("h:mm A")}
          </div>
        );
      })}
    </div>
  </div>
)}

📱 Step 5: Mobile Optimization Tips

React Big Calendar works on mobile but may need tweaks:

Use longPressThreshold={1} to improve tap behavior.
Add responsive styles:

.calendar-container {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

Use media queries for padding and layout tweaks on .popup and .slot-box.

✨ Final Thoughts

React Big Calendar provides a lot of power out of the box. With a bit of customization, it becomes the backbone of any booking or scheduling application.

📆 Mastering React Big Calendar: A Complete Guide with Custom Slots and Mobile Optimization

Comments

More from this blog

Building an AI-native Second Brain with Multi-RAG, Knowledge Graphs, and MCP

Mind Maps in MCP: A Powerful Feature or Just Eye Candy?

Running Hermes Agent with Kokoro TTS: A Local-First AI Assistant Setup

Building Reusable Claude Code Plugins with Fable 5

SEO Is Not Enough Anymore — The Rise of AEO (Answer Engine Optimization)

🔧 Step 1: Installation

🧠 Step 2: Basic Setup

🗓 Step 3: Handling Slot Selection

🎨 Step 4: Custom Styling for Dates

📱 Step 5: Mobile Optimization Tips

✨ Final Thoughts

Command Palette

Comments

More from this blog

🔧 Step 1: Installation

🧠 Step 2: Basic Setup

🗓 Step 3: Handling Slot Selection

🎨 Step 4: Custom Styling for Dates

💡 Bonus: Popup for Custom Time Slot Selection

📱 Step 5: Mobile Optimization Tips

✨ Final Thoughts