# 📆 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

```javascript
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

```javascript
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:

```javascript
<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?

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

```javascript
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:

```javascript
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 {};
};
```

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

---

## 💡 Bonus: Popup for Custom Time Slot Selection

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

```javascript
{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:
    

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

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

---

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1745006115204/fb233c52-ea7d-4486-ad7c-36761cec78eb.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1745006147750/46224e6c-20ea-4173-b980-1a0b925ed1d9.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1745006221214/4031ef14-42a8-4668-964d-8a9b976c0b4e.png align="center")

## ✨ 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.