Thumbprint logo

Components

Calendar

A visual calendar display for displaying availability and/or selecting dates

Initial dates

The Calendar can optionally have an initial date selected.

No initial date selected

function CalendarExample() {
    const [value, setValue] = React.useState(undefined);
    const [month, setMonth] = React.useState(undefined);

    return <Calendar value={value} month={month} onChange={setValue} onMonthChange={setMonth} />;
}

With an initial date selected
function CalendarExample() {
    const [value, setValue] = React.useState(new Date());
    const [month, setMonth] = React.useState(undefined);

    return <Calendar value={value} month={month} onChange={setValue} onMonthChange={setMonth} />;
}

Using strings to set the date
You can pass the date as a string that can be parsed to a Date object.
function CalendarExample() {
    const [value, setValue] = React.useState('2100-01-01');
    const [month, setMonth] = React.useState(undefined);

    return <Calendar value={value} month={month} onChange={setValue} onMonthChange={setMonth} />;
}

Multiple date selection
function CalendarExample() {
    const [value, setValue] = React.useState([
        new Date(),
        new Date(new Date().getTime() + 60 * 60 * 24 * 1000 * 2),
        new Date(new Date().getTime() + 60 * 60 * 24 * 1000 * 5),
    ]);
    const [month, setMonth] = React.useState(undefined);

    return (
        <Calendar
            value={value}
            month={month}
            onChange={setValue}
            onMonthChange={setMonth}
            allowMultiSelection
        />
    );
}

Date range selection
Set enableDateRangeSelection to let the user select a range from a start date to an end date. Click a start date, then click an end date to complete the range. The start and end dates are highlighted in blue and the days in between in blue-100. While picking the end date, the day under the cursor is previewed in blue-100. When enabled, value holds the [startDate, endDate] pair.
function CalendarExample() {
    const DAY_MS = 60 * 60 * 24 * 1000; // one day in milliseconds
    const [value, setValue] = React.useState([
        new Date(new Date().getTime() + DAY_MS * 3),
        new Date(new Date().getTime() + DAY_MS * 7),
    ]);
    const [month, setMonth] = React.useState(undefined);

    return (
        <Calendar
            value={value}
            month={month}
            onChange={setValue}
            onMonthChange={setMonth}
            enableDateRangeSelection
        />
    );
}

Only future dates can be selected as part of a range — past dates can never be selected. The example below initializes with a range in the past, which renders its edges in blue-300. The user can still select a new range as long as the start and end dates are in the future. disabledDays is set to null so the past range can be displayed.
function CalendarExample() {
    const DAY_MS = 60 * 60 * 24 * 1000; // one day in milliseconds
    const [value, setValue] = React.useState([
        new Date(new Date().getTime() - DAY_MS * 7),
        new Date(new Date().getTime() - DAY_MS * 3),
    ]);
    const [month, setMonth] = React.useState(undefined);

    return (
        <Calendar
            value={value}
            month={month}
            onChange={setValue}
            onMonthChange={setMonth}
            disabledDays={null}
            enableDateRangeSelection
        />
    );
}

Date range with a fixed start date
Set rangeStartDate alongside enableDateRangeSelection to lock the start of the range so the user can only choose the end date. Clicking the start date or any earlier day is ignored, so the end is always after the start. Provide value as [rangeStartDate, endDate] (or just [rangeStartDate] before an end is chosen).
function CalendarExample() {
    const DAY_MS = 60 * 60 * 24 * 1000; // one day in milliseconds
    const start = new Date();
    const [value, setValue] = React.useState([
        start,
        new Date(new Date().getTime() + DAY_MS * 5),
    ]);
    const [month, setMonth] = React.useState(undefined);

    return (
        <Calendar
            value={value}
            month={month}
            onChange={setValue}
            onMonthChange={setMonth}
            enableDateRangeSelection
            rangeStartDate={start}
        />
    );
}

Past date selection enabled
The Calendar disables past days by default. This can be enabled by setting disabledDays to null.
function CalendarExample() {
    const [value, setValue] = React.useState(new Date());
    const [month, setMonth] = React.useState(undefined);

    return (
        <Calendar
            value={value}
            month={month}
            onChange={setValue}
            onMonthChange={setMonth}
            disabledDays={null}
        />
    );
}

Date selection with lastMonth enabled
Users won’t be able to navigate or interact with the days after lastMonth.
function CalendarExample() {
    const [value, setValue] = React.useState(new Date());
    const [month, setMonth] = React.useState(undefined);

    return (
        <Calendar
            value={value}
            month={month}
            onChange={setValue}
            onMonthChange={setMonth}
            lastMonth={new Date(new Date().getTime() + 60 * 60 * 24 * 1000 * 60)}
        />
    );
}

Adding a "dot" indicator with daysThemeDotIndicator
Pass a function for this prop that returns true for any date where a dot indicator should appear.
function CalendarExample() {
    const [value, setValue] = React.useState(new Date());
    const [month, setMonth] = React.useState(undefined);

    const isMonday = date => date.getDay() === 1;

    return (
        <Calendar
            value={value}
            month={month}
            onChange={setValue}
            onMonthChange={setMonth}
            daysThemeDotIndicator={isMonday}
        />
    );
}

Strikeout the date with daysThemeStrikeout
Pass a function for this prop that returns true for any date where the number should be crossed out.
function CalendarExample() {
    const [value, setValue] = React.useState(new Date());
    const [month, setMonth] = React.useState(undefined);

    const isFriday = date => date.getDay() === 5;

    return (
        <Calendar
            value={value}
            month={month}
            onChange={setValue}
            onMonthChange={setMonth}
            daysThemeStrikeout={isFriday}
        />
    );
}

Props
Calendar
Thin wrapper around `react-day-picker` that renders a calendar.
  • onChange
    required
    Callback that is triggered when th user selects a date. The function receives an array of
a JavaScript Date objects for each of the currently selected dates.
    

    Type
    (selectedDates: Date[]) => void
  • onMonthChange
    required
    Callback that is triggered when the user navigates to a different month using the navigation
buttons or keyboard. The function receives a single JavaScript Date object indicating
the new on-screen month.
    

    Type
    (selectedMonth: Date) => void
  • value
    One or more dates to show as selected in the initial UI. Each "date" can be a JS Date object
or a string representing a date, or a numeric UNIX timestamp, and either a single object or
an array of such objects can be provided.
    

    Type
    DateIsh | DateIsh[] | null
    Default
    []
  • month
    Date object representing the month that is currently displayed by the calendar. If omitted
it will default to the first date in the value prop. You should update it in response to
the onMonthChange prop.
    

    Type
    Date
  • allowMultiSelection
    Boolean that determines whether or not the user is allowed to select more than one date at
a time. Defaults to false.
    

    Type
    boolean
    Default
    false
  • disabledDays
    A react-day-picker modifier for greater control over disabled days. Past selection is
disabled by default.
See: https://react-day-picker.js.org/api/types/Matcher
    

    Type
    Matcher | Matcher[] | null
    Default
    { before: new Date() }
  • lastMonth
    A Date object representing the last allowed month. Users won’t be able to navigate or
interact with the days after it.
    

    Type
    Date
  • daysThemeDotIndicator
    Applies a blue dot indicator below the numeric day in the calendar's day cell if the
function returns true for a given JavaScript Date.
    

    Type
    (date: Date) => boolean
  • daysThemeStrikeout
    Applies a strikeout treatment on the numeric day in the calendar's day cell if the function
returns true for a given JavaScript Date.
    

    Type
    (date: Date) => boolean
  • enableDateRangeSelection
    Enables selecting a start-to-end date range. When enabled, value holds the
[startDate, endDate] pair, and onChange is called with the new pair once a range is
completed.
    

      

    • The start and end dates are highlighted in blue, the days between them in blue-100.
      • 

    • Click a start date, then an end date to complete the range. While choosing the end date,
the day under the cursor is previewed in blue-100.
      • 

    • Only future dates can be selected. A pre-selected range in the past is shown with blue-300
edges and cannot be edited in place, but a new future range can always be selected.
      • 

    • The end date is always at least one day after the start date; they can never be the same day.
      • 

    

    Type
    boolean
    Default
    false
  • rangeStartDate
    Locks the start of the range to this date so the user can only choose the end date. Only has
an effect alongside enableDateRangeSelection. When set:
    

      

    • The start is always rangeStartDate; clicking only ever picks the end. value should hold
[rangeStartDate, endDate] (or just [rangeStartDate] before an end is chosen).
      • 

    • Clicking the start date or any earlier day is ignored, so the end is always after the start.
      • 

    • Hovering a day after the start previews the rangeStartDate-to-hovered range in blue-100.
      • 

    

    Type
    Date