Components
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'; |
The Calendar
can optionally have an initial date selected.
You can pass the date as a string that can be parsed to a Date
object.
The Calendar
disables past days by default. This can be enabled by setting disabledDays
to null
.
lastMonth
enabledUsers won’t be able to navigate or interact with the days after lastMonth
.
daysThemeDotIndicator
Pass a function for this prop that returns true for any date where a dot indicator should appear.
daysThemeStrikeout
Pass a function for this prop that returns true for any date where the number should be crossed out.
Thin wrapper around react-day-picker
that renders a calendar.
onChange
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.
(selectedDates: Date[]) => void
onMonthChange
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.
(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.
This prop can be one of the following 3 types:
DateIsh
DateIsh[]
null
[]
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.
Date
allowMultiSelection
Boolean that determines whether or not the user is allowed to select more than one date at
a time. Defaults to false
.
boolean
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
This prop can be one of the following 3 types:
Matcher
Matcher[]
null
{ 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.
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
.
(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
.
(date: Date) => boolean