Components

Calendar(React)

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

Version:	`14.18.2` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { Calendar } from '@thumbtack/thumbprint-react';`

Initial dates

The Calendar can optionally have an initial date selected.

No initial date selected

September 2024

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

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

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

September 2024

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

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.

January 2100

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

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

September 2024

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

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.

September 2024

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

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.

September 2024

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

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.

September 2024

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

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.

September 2024

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

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
This prop can be one of the following 3 types:
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
This prop can be one of the following 3 types:
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

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Calendar(React)

Initial dates

No initial date selected

With an initial date selected

Using strings to set the date

Multiple date selection

Past date selection enabled

Date selection with lastMonth enabled

Adding a “dot” indicator with daysThemeDotIndicator

Strikeout the date with daysThemeStrikeout

Props

Calendar

Date selection with `lastMonth` enabled

Adding a “dot” indicator with `daysThemeDotIndicator`

Strikeout the date with `daysThemeStrikeout`