Welcome to the StepOne components documentation
StepOne Fundation
StepOne Modules
Calendars
The Calendars component is used when we want to render a styled calendar.This component has props to control its different states and variants.
Calendar Props
| Name | Use | Type | Definition |
| defaultDate | optional | number | The timestamp value of any of the days of the month we want to display. |
| minDate | optional | number | The timestamp value of the minimum date we will can selected. |
| maxDate | optional | number | The timestamp value of the maximum date we will can selected. |
| selectedDates | optional | number | The timestamp values array of the dates selected. |
| activeDates | optional | number | The timestamp values of the dates between two selected dates. |
| disabledDates | optional | number | The timestamp values of the disabled dates. |
Examples
Simple Calendar
Example of a simple Calendar with no properties.
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Default Date Calendar
Example of a Calendar with defaultDate props passed to our calendar.
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Minimun Date Calendar
Example of a Calendar with minDate props passed to our calendar.
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Maximum Date Calendar
Example of a Calendar with maxDate props passed to our calendar.
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Selected Dates Calendar
Example of a Calendar with selectedDates props passed to our calendar.
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Active Dates Calendar
Example of a Calendar with activeDates props passed to our calendar.
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Disabled Dates Calendar
Example of a Calendar with disabledDates props passed to our calendar.
Mon
Tue
Wed
Thu
Fri
Sat
Sun