Thumbprint logo

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
        />
    );
}

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