Calendar
A general-purpose calendar component supporting day, month, and year views — useful for date selection and scheduling interfaces.
Usage
Sun
Mon
Tue
Wed
Thu
Fri
Sat
function CalendarUsage() {
const [date, setDate] = useState<Date | undefined>()
return (
<View>
<Calendar
selectedDate={date}
onDateChange={(value?: Date) => setDate(value)}
/>
</View>
)
}
Props
| Prop | Data Type | Default Value | Description |
|---|---|---|---|
| Extends | BaseUIProps | -- | Inherits properties from BaseUIProps |
| selectedDate | string | Date | -- | The default selected date.Can be a string (formatted date) or a Date object. |
| disableDates | (string | Date)[] | -- | An array of disabled dates of string (in outputDateFormat) or a Date object.Make sure to provide the outputDateFormat prop too if passing date as string |
| onDateChange | (date?: Date, displayDate?: string, outputDate?: string) => void | -- | Callback triggered when a date is selected. |
| yearListProps | Pick<YearListProps, "minYear" | "maxYear"> | -- | Props for configuring the year list (min and max year). |
| containerStyle | StyleProp<ViewStyle> | -- | The outer most container style for the calendar.This can be used to set padding, margin, etc. |
| status | BlossomStatus | primary | -- |
| size | BlossomSize | medium | -- |
| minDate | string | Date | -- | minimum selectable date inclusive.Can be a string (in `outputDateFormat`) or a Date object. |
| maxDate | string | Date | -- | maximum selectable date inclusive.Can be a string (in `outputDateFormat`) or a Date object. |
| disableFutureDates | boolean | -- | Disable future dates |
| disablePastDates | boolean | -- | Disable past dates |
| displayDateFormat | string | 'D MMM YYYY' | The format in which the date should be displayed inside the input valueCheckout the dayjs docs for all available formats - https://day.js.org/docs/en/display/format |
| outputDateFormat | string | 'DD-MM-YYYY' | The format in which the selected date should give outputAnd this format should be used whenever you are passing any date to this component Checkout the dayjs docs for all available formats - https://day.js.org/docs/en/display/format |