Calendar component
A Calendar component
Install
npm i @wethecurious/wtc-ui-library
Usage
Import it into your project
import { SingleDatePicker } from '@wethecurious/wtc-ui-library'
Plain button
// Simple
<SingleDatePicker onDateChange={action('date changed')} />
// Within set range
<SingleDatePicker
autoFocus={true}
keepOpenOnDateSelect={true}
isOutsideRange={day =>
!isInclusivelyAfterDay(day, moment()) ||
// @ts-ignore
isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
}
onDateChange={action('date changed')}
/>
<SingleDatePicker
autoFocus={true}
keepOpenOnDateSelect={true}
isDayBlocked={day1 =>
dayStatuss.some(
day2 =>
day2.status === 'status.disabled' &&
isSameDay(day1, moment(day2.date))
)
}
isDayWarning={day1 =>
dayStatuss.some(
day2 =>
day2.status === 'status.warning' &&
isSameDay(day1, moment(day2.date))
)
}
dayStatuss={dayStatuss}
onDateChange={action('date changed')}
/>
Props
Prop | Description | Default |
---|---|---|
autoFocus | Calendar Open on load | false |
keepOpenOnDateSelect | Keep calendar open on date select | false |
isDayBlocked | Specific day blocked | |
isDayWarning | Specific day warning | |
dayStatuss | Events | |
onDateChange | Date change handler | |
screenReaderInputMessage | Screen reader message |