Controlled Mode
By default, the Calendar is in an uncontrolled state.
The Calendar provides options for:
- Setting default values for the uncontrolled state
- Controlling the state
- Programmatically changing the selected value
Setting Default Values
The Calendar enables you to provide the initial values without the need to fully control its state by using the defaultValue, focusedDate, and defaultActiveView properties.
Controlling the State
To manage the state of the Calendar, use its value and onChange properties.
The following demo shows how you can control the value of the Calendar and display it.
Programmatically Changing the Value
Each time the user selects a date, the Calendar calls the onChange handler to update its value. To programmatically change the selected value based on external user interaction, set the new value through the state of the Calendar component.
The following demo lets you select the next or the previous Friday through external buttons by managing the state of the Calendar.