Calendar
Datepicker component enables users to enter a date either through text input or selecting a date from the Calendar dropdown.
- At Contentful calendar is used to ask user's input to set, edit, or view schedule actions.
- The component is built on top of React Day Picker ver 8.10.1, see full documentation: https://daypicker.dev (opens in a new tab)
Usage
import { Calendar } from "@momo-webplatform/mobase";<Calendar
mode="single"
fromDate={today}
selected={date}
onSelect={setDate}
enableLunaDate
/>NOTE: Because Calendar uses Button and Checkbox component, please install the Button component and the Checkbox component before using the Calendar component.
Examples
Only day
Day and luna day
Use the enableLunaDate prop to enable the luna date.
Day - luna day - custom content day
Use the cusContentDay prop to customize the content of the day. cusContentDay is a function that takes a date as a parameter and returns a ReactNode.
Range calendar
API Reference
Calendar
| Prop | Type | Default | Required |
mode | enumdefault | single | multiple | range | -- | false |
className | string | -- | false |
classNames | Partial<StyledElement<string>> | -- | false |
modifiersClassNames | ModifiersClassNames | -- | false |
style | CSSProperties | -- | false |
styles | Partial<Omit<StyledElement<CSSProperties>, InternalModifiersElement>> | -- | false |
modifiersStyles | ModifiersStyles | -- | false |
id | string | -- | false |
defaultMonth | Date | -- | false |
month | Date | -- | false |
onMonthChange | MonthChangeEventHandler | -- | false |
numberOfMonths | number | -- | false |
fromDate | Date | -- | false |
toDate | Date | -- | false |
fromMonth | Date | -- | false |
toMonth | Date | -- | false |
fromYear | number | -- | false |
toYear | number | -- | false |
disableNavigation | enumboolean | -- | false |
pagedNavigation | enumboolean | -- | false |
reverseMonths | enumboolean | -- | false |
captionLayout | enumCaptionLayout | -- | false |
fixedWeeks | enumboolean | -- | false |
hideHead | enumboolean | -- | false |
showOutsideDays | enumboolean | false | false |
showWeekNumber | enumboolean | -- | false |
weekStartsOn | enum0 | 1 | 2 | 3 | 4 | 5 | 6 | -- | false |
firstWeekContainsDate | enum1 | 4 | -- | false |
ISOWeek | enumboolean | -- | false |
components | CustomComponents | -- | false |
footer | enumReactNode | -- | false |
initialFocus | enumboolean | -- | false |
disabled | enumMatcher | Matcher[] | -- | false |
hidden | enumMatcher | Matcher[] | -- | false |
selected | enumMatcher | Matcher[] | -- | false |
today | Date | -- | false |
modifiers | DayModifiers | -- | false |
locale | Locale | -- | false |
labels | Partial<Labels> | -- | false |
formatters | Partial<Formatters> | -- | false |
dir | string | -- | false |
nonce | string | -- | false |
title | string | -- | false |
lang | enumvi | en | vi | false |
onNextClick | MonthChangeEventHandler | -- | false |
onPrevClick | MonthChangeEventHandler | -- | false |
onWeekNumberClick | WeekNumberClickEventHandler | -- | false |
onDayClick | DayClickEventHandler | -- | false |
onDayFocus | DayFocusEventHandler | -- | false |
onDayBlur | DayFocusEventHandler | -- | false |
onDayMouseEnter | DayMouseEventHandler | -- | false |
onDayMouseLeave | DayMouseEventHandler | -- | false |
onDayKeyDown | DayKeyboardEventHandler | -- | false |
onDayKeyUp | DayKeyboardEventHandler | -- | false |
onDayKeyPress | DayKeyboardEventHandler | -- | false |
onDayPointerEnter | DayPointerEventHandler | -- | false |
onDayPointerLeave | DayPointerEventHandler | -- | false |
onDayTouchCancel | DayTouchEventHandler | -- | false |
onDayTouchEnd | DayTouchEventHandler | -- | false |
onDayTouchMove | DayTouchEventHandler | -- | false |
onDayTouchStart | DayTouchEventHandler | -- | false |
enableLunaDate | enumboolean | false | false |
cusContentDay | (date: Date) => void | -- | false |
onSelect | enumSelectSingleEventHandler | SelectMultipleEventHandler | SelectRangeEventHandler | -- | false |
required | enumboolean | -- | false |
min | number | -- | false |
max | number | -- | false |