Customization

This package is designed to be customizable. There are a couple of props to change the default styles according to your preferences. You can customize picker, calendar, and input. For the full list of available props, you can visit props list.

Customized Input

Placeholder and the formatted value of input can be set directly by you. Moreover, you can set an additional class on the input. If that's not enough, you can render your own input as well. Let's take a look at a few examples:

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

const App = () => {
  const [selectedDay, setSelectedDay] = useState(null);

  const formatInputValue = () => {
    if (!selectedDay) return '';
    return `Day: ${selectedDay.day}`;
  };

  return (
    <DatePicker
      value={selectedDay}
      onChange={setSelectedDay}
      inputPlaceholder="Select a date" // placeholder
      formatInputText={formatInputValue} // format value
      inputClassName="my-custom-input" // custom class
      shouldHighlightWeekends
    />
  );
};

export default App;

You can render your own custom input using renderInput prop:

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

const App = () => {
  const [selectedDay, setSelectedDay] = useState(null);

  // render regular HTML input element
  const renderCustomInput = ({ ref }) => (
    <input
      readOnly
      ref={ref} // necessary
      placeholder="I'm a custom input"
      value={selectedDay ? `✅: ${selectedDay.day}` : ''}
      style={{
        textAlign: 'center',
        padding: '1rem 1.5rem',
        fontSize: '1.5rem',
        border: '1px solid #9c88ff',
        borderRadius: '100px',
        boxShadow: '0 1.5rem 2rem rgba(156, 136, 255, 0.2)',
        color: '#9c88ff',
        outline: 'none',
      }}
      className="my-custom-input-class" // a styling class
    />
  )

  return (
    <DatePicker
      value={selectedDay}
      onChange={setSelectedDay}
      renderInput={renderCustomInput} // render a custom input
      shouldHighlightWeekends
    />
  );
};

export default App;

Customized Calendar

The calendar has a few more props for customization. The most basic ones are colorPrimary, colorPrimaryLight. Additional classes' props are available for the calendar itself, selected day, disabled days, range start day, range end day, and more. Here are some examples:

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

const App = () => {
  const defaultFrom = {
    year: 2019,
    month: 4,
    day: 16,
  };
  const defaultTo = {
    year: 2019,
    month: 4,
    day: 19,
  };
  const defaultValue = {
    from: defaultFrom,
    to: defaultTo,
  };
  const [selectedDayRange, setSelectedDayRange] = useState(
    defaultValue
  );

  return (
    <Calendar
      value={selectedDayRange}
      onChange={setSelectedDayRange}
      colorPrimary="#0fbcf9" // added this
      colorPrimaryLight="rgba(75, 207, 250, 0.4)" // and this
      shouldHighlightWeekends
    />
  );
};

export default App;

SMTWTFS

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

const App = () => {
  const defaultValue = {
    year: 2020,
    month: 7,
    day: 16,
  };
  const [selectedDay, setSelectedDay] = useState(defaultValue);

  return (
    <Calendar
      value={selectedDay}
      onChange={setSelectedDay}
      colorPrimary="#9c88ff" // added this
      calendarClassName="custom-calendar" // and this
      calendarTodayClassName="custom-today-day" // also this
      shouldHighlightWeekends
    />
  );
};

export default App;

SMTWTFS

Our CSS code for the above example is:

.custom-calendar {
  box-shadow: 0 1em 3em rgba(156, 136, 255,0.2);
}

.custom-today-day {
  color: #e67e22 !important;
  border: 1px solid #e67e22 !important;
}

.custom-today-day::after {
  visibility: hidden; /* hide small border under the text */
}

Note: the usage of !important is because of overriding the default styles.

Customized Array of Days

If any of the above customizable options for days is not enough for you, you can provide an array for some days to have a certain CSS class:

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

const App = () => {
  const defaultValue = {
    year: 2019,
    month: 3,
    day: 1,
  };
  const [selectedDay, setSelectedDay] = useState(defaultValue);

  return (
    <Calendar
      value={selectedDay}
      onChange={setSelectedDay}
      shouldHighlightWeekends
      customDaysClassName={[
        // here we add some CSS classes
        { year: 2019, month: 3, day: 4, className: 'purpleDay' },
        { year: 2019, month: 3, day: 12, className: 'orangeDay' },
        { year: 2019, month: 3, day: 18, className: 'yellowDay' },
        { year: 2019, month: 3, day: 26, className: 'navyBlueDay' },
      ]}
    />
  );
};

export default App;

SMTWTFS

Our CSS code for the above example is:

/*
  These :not() selectors are for preventing
  style conflicts with a selected date. You can remove them if you wish!
*/

.purpleDay:not(.-selectedStart):not(.-selectedBetween):not(.-selectedEnd):not(.-selected) {
  border: 2px solid rgba(156, 136, 255, 0.7) !important;
}

.orangeDay:not(.-selectedStart):not(.-selectedBetween):not(.-selectedEnd):not(.-selected) {
  border: 2px solid rgba(219, 145, 60, 0.7) !important;
}

.yellowDay:not(.-selectedStart):not(.-selectedBetween):not(.-selectedEnd):not(.-selected) {
  border: 2px solid rgba(228, 231, 36, 0.7) !important;
}

.navyBlueDay:not(.-selectedStart):not(.-selectedBetween):not(.-selectedEnd):not(.-selected) {
  border: 2px solid rgba(52, 73, 94, 0.7) !important;
}

Calendar Footer

You can render a custom footer in the calendar below the days list by renderFooter prop. This can be useful for rendering a button for selecting today or reseting the value. This is an example:

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

const App = () => {
  const defaultValue = {
    year: 2020,
    month: 7,
    day: 18,
  };
  const [selectedDay, setSelectedDay] = useState(defaultValue);

  return (
    <Calendar
      value={selectedDay}
      onChange={setSelectedDay}
      shouldHighlightWeekends
      // here we go
      renderFooter={() => (
        <div style={{ display: 'flex', justifyContent: 'center', padding: '1rem 2rem' }}>
          <button
            type="button"
            onClick={() => {
              setSelectedDay(null)
            }}
            style={{
              border: '#0fbcf9',
              color: '#fff',
              borderRadius: '0.5rem',
              padding: '1rem 2rem',
            }}
          >
            Reset Value!
          </button>
        </div>
      )}
    />
  );
};

export default App;

SMTWTFS

Customized Wrapper

All the calendar custom styling props can be passed from <DatePicker />. Furthermore, there's awrapperClassName prop for the customization of the picker's container element itself.