Responsive Guide

By default, the calendar element has a fixed size. If you want to use a larger/smaller calendar, you need to change the font-size of it! Because of the usage of CSS relative units in calendar styles, all the children of it will correspond correctly. To change the font size of the calendar, you can set a custom class on the calendar. Here's an example:(resize the page to see the effect)

import React, { useState } from "react";
import "react-modern-calendar-datepicker/lib/DatePicker.css";
import { Calendar } from "react-modern-calendar-datepicker";

const App = () => {
  const [selectedDay, setSelectedDay] = useState(null);
  return (
    <Calendar
      value={selectedDay}
      onChange={setSelectedDay}
      calendarClassName="responsive-calendar" // added this
      shouldHighlightWeekends
    />
  );
};

export default App;

Keep in mind to use px as your unit for the font size. CSS code:

.responsive-calendar {
  /* by setting font-size, all the elements will correspond */
  font-size: 9px !important; /* default to 10px */
}

@media (max-width: 1500px) {
  .responsive-calendar {
    font-size: 8px !important;
  }
}

@media (max-width: 1200px) {
  .responsive-calendar {
    font-size: 7px !important;
  }
}

@media (max-width: 768px) {
  .responsive-calendar {
    font-size: 6px !important;
  }
}

/* Large screens */
@media (min-width: 2500px) {
  .responsive-calendar {
    font-size: 12px !important;
  }
}