📆 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}
/>

---

💡 Bonus: Popup for Custom Time Slot Selection

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.