🚧
Under Construction This component is a work-in-progress.
Calendar
Calendar is a primitive to be used by the Date Pick component. Displays an interactive calendar.
Current Status
- Built with date-fns, Radix UI Select, and Tailwind CSS
- Intended to be used within the Date Pick component
Future
- Add animations
- Improve responsive design for all common device sizes
- Add darkmode support
- Standardize color design token
Examples
TBD
How to use
Install date-fns library
npm install date-fnsIt's used for date formatting.
Install Radix UI Select
npm install @radix-ui/react-selectUsed to build the year dropdown.
Create component
Copy the code from the sandbox above and paste it into a new file (e.g. Calendar.tsx)
Use it with Date Pick
Import it into Date Pick
Component API
| Required Prop | Type | Description |
|---|---|---|
| name | string | Date Pick's input name |
| startYearRange | Number | Sets earliest year in Date Pick's Calendar |
| endYearRange | Number | Sets latest year in Date Pick's Calendar |
| selectedDay | Date | The currently selected day. |
| setSelectedDay | (value: Date) => void | Updates selectedDay |
| setShowCalendar | (value: "CalendarClosed" | "CalendarOpen") => void | Determines if Date Pick's Accordion should be open/closed. Can't be a boolean to match with Radix UI's props. |
| handleSelectedDayChange | (name: string, selectedDay: Date) => void | Handles logic whenever a Calendar day (aka button) is clicked |
| Optional Prop | Type | Description |
|---|---|---|
| defaultValue | Date | Passed from Field to Date Pick to Calendar. Determines the day the calendar selects by default. |