Components

Calendar(React)

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

Version:14.16.0 View sourceChangelogReport 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

July 2023
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

With an initial date selected

July 2023
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Using strings to set the date

You can pass the date as a string that can be parsed to a Date object.

January 2100
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Multiple date selection

July 2023
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Past date selection enabled

The Calendar disables past days by default. This can be enabled by setting disabledDays to null.

July 2023
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Date selection with lastMonth enabled

Users won’t be able to navigate or interact with the days after lastMonth.

July 2023
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Adding a “dot” indicator with daysThemeDotIndicator

Pass a function for this prop that returns true for any date where a dot indicator should appear.

July 2023
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Strikeout the date with daysThemeStrikeout

Pass a function for this prop that returns true for any date where the number should be crossed out.

July 2023
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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-v7.netlify.app/docs/matching-days

    Type

    This prop can be one of the following 3 types:

    • Modifier
    • Modifier[]
    • 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
Was this page helpful?

We use this feedback to improve the quality of our documentation.