React Calendar

A lightweight but complete calendar picker react component.

API

Name	Type	Default	Description
value	Dayjs	undefined	Represents the selected date by the component, in order to use it as a controlled component. This prop is parsed by dayjs, so it is possible to use a date string or a dayjs object.
initialValue	Dayjs	undefined	Represents the selected date for the component to use it as a uncontrolled component. This prop is parsed by Dayjs, so it is possible to use a date string or a dayjs object. If you need to set the selected date programmatically after the picker is initialized, please use the value prop instead.
initialViewMode	string	day	The default view to display when the picker is shown for the first time ('year', 'month', 'day', 'time'). If you want to set the view mode after the component has been initialize see the imperative API.
showInput	boolean	true	Whether to show an input field to edit the date manually.
open	boolean	undefined	Whether to open or close the picker. If not set react-calendar will open the datepicker on input focus and close it on click outside.
onChange	function	empty function	Callback trigger when the date changes. The callback receives the selected dayjs object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback receives the value of the input (a string).
onOpen	function	empty function	Callback trigger for when the user opens the calendar.
onClose	function	empty function	Callback trigger for when the calendar get closed. The callback receives the selected dayjs object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback returns the value in the input.
closeOnSelect	boolean	false	When true, once the day has been selected, the datepicker will be automatically closed.
onNavigate	function	empty function	Callback trigger when the view mode changes. The callback receives the selected view mode string (year, month, day or time) as only parameter.
onBeforeNavigate	function	( nextView, currentView, viewDate ) => nextView	Allows to intercept a change of the calendar view. The accepted function receives the view that it's supposed to navigate to, the view that is showing currently and the date currently shown in the view. Return a viewMode ( default ones are year, month, day or time) to navigate to it. If the function returns a "falsy" value, the navigation is stopped and we will remain in the current view.
onNavigateBack	function	empty function	Callback trigger when the user navigates to the previous month, year or decade. The callback receives the amount and type ('month', 'year') as parameters.
onNavigateForward	function	empty function	Callback trigger when the user navigates to the next month, year or decade. The callback receives the amount and type ('month', 'year') as parameters.
className	string or string[]	''	Extra class name for the outermost markup element.
inputProps	object	undefined	Defines additional attributes for the input element of the component. For example: onClick, placeholder, disabled, required, name and className (className sets the class attribute for the input element). See Customize the Input Appearance.
isValidDate	function	() => boolean	Define the dates that can be selected. The function receives (currentDate, selectedDate) and shall return a true or false whether the currentDate is valid or not. See selectable dates.
dateFormat	boolean or string	true	Defines the format for the date. It accepts any dayjs time format. If true the date will be displayed using the defaults for the current locale. If false the datepicker is disabled and the component can be used as timepicker.
timeFormat	boolean or string	true	Defines the format for the time. It accepts any dayjs time format. If true the time will be displayed using the defaults for the current locale. If false the timepicker is disabled and the component can be used as datepicker.
closeOnClickOutside	boolean	true	When the calendar is open and closeOnClickOutside is true (its default value), clickin outside of the calendar or input closes the calendar. If false the calendar stays open.

How to use

Develop

pnpm i

npm run dev

Test

npm run test

npm run coverage

LICENSE

This repository is published under MIT license