react-nice-calendar

About
Getting Started
props
useCalendarBind
ClassNameKeys

About

It is a calendar that aims to be simple and efficient for anyone using. Using CalendarProvider to display years, months and days.

Everything you will see here refers to all calendars in the repository, if there is a question about the calendar for a specific framework / library click on one of the buttons above (Available to).

Live demo

Getting Started

Install:

yarn add react-nice-calendar

Usage

const [selectedDate, setSelectedDate] = useState()
 
return (
  <Calendar
    selectedDate={selectedDate}
    onChangeSelectedDate={setSelectedDate}
  />
)

Props

Name	Type	Description	Default value
pick	'single' \| 'multiple' \| 'range'	Select the type of capture. See examples here.	single'
pickLimit	Non-negative integer	Use when the "pick" prop is "multiple". It defines the maximum number of dates that can be selected.	Infinity
rangeSize	{ min: Non-negative integer, max: Non-negative integer }	Use when the "pick" prop is "range". Defines the minimum and maximum number of the range.	{ min: 1, max: Infinity }
onChangeSelectedDate	When "pick" prop is "single": (date: Date	null) => void When "pick" prop is "multiple" or "range": (date: Date[]) => void	Function called when the user clicks on a date.
selectedDate	When "pick" prop is "single": Date \| null When "pick" prop is "multiple" or "range": Date[]		n/a
monthsDictionary	string[]	Each index in the array represents the month 0 through 11.	[ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]
daysDictionary	string[]	Each index in the array represents the day 0 through 6.	[ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ]
classNames	{ [key in classNameKeys]: string }	It receives the classes of each element of the calendar. See the ClassNameKeys type here.	n/a
startDate	Date	The date that the calendar should display on the first render.	n/a
filterInvalidDates	(date: Date) => boolean	A function that will be called the date iteration. The "true" return indicates that the date is invalid, so it should not be selected by the user.	n/a
bind	CalendarBind	It is an object that is returned by "useCalendarBind". Click here to learn more.	n/a
HeaderProps	HTMLDivElement props.	Example: className, id & etc...	n/a
PrevButtonProps	HTMLButtonElement props with custom onClick event.	See custom events event here.	n/a
NextButtonProps	HTMLButtonElement props with custom onClick event.	See custom events event here.	n/a
HeaderTextProps	HTMLButtonElement props with custom onClick event.	See custom events event here.	n/a
DaysProps	HTMLDivElement props.	Example: className, id & etc...	n/a
DayProps	HTMLDivElement props.	Example: className, id & etc...	n/a
BodyProps	HTMLDivElement props.	Example: className, id & etc...	n/a
CellsProps	HTMLDivElement props.	Example: className, id & etc...	n/a
DateProps	HTMLButtonElement props with custom onClick, mouseEnter & mouseLeave event.	See custom events event here.	n/a
MonthProps	HTMLButtonElement props with custom onClick event.	See custom events event here.	n/a
YearProps	HTMLButtonElement props with custom onClick event.	See custom events event here.	n/a

Custom events

When the element already has an event handler and you want to apply one more: The function returns the original handler and the original event object. Example:

  dateProps={{
    onClick: ({ originalEvent, originalHandler ) => {
      console.log(originalEvent.target)
      originalHandler()
    }
  }}

useCalendarBind

A hook to connect the calendars. The props, events and styles will be shared between them. Example:

import Calendar, { useCalendarBind } from 'react-nice-calendar'
 
const myComponent = () => {
  const [selectedDate, setSelectedDate] = useState()
  const bind = useCalendarBind()
 
  return (
    <>
      <Calendar
        selectedDate={selectedDate}
        onChangeSelectedDate={setSelectedDate}
        bind={bind}
      />
      <Calendar bind={bind} />
    </>
  )
}

Result:

ClassNameKeys

'Container'
'CalendarBinded'
'Header'
'HeaderMonth'
'HeaderYear'
'HeaderYearsRange'
'Days'
'Day'
'PrevButton'
'NextButton'
'HeaderText'
'Body'
'BodyDays'
'BodyMonths'
'BodyYears'
'Cells'
'Cell'
'DayCell'
'MonthCell'
'YearCell'
'ValidDate'
'InvalidDate'
'DayBelongCurrentMonth'
'CurrentDate'
'SelectedDate'
'BetweenRange'
'BetweenSelectedRange'
'UnderMinRange'
'OverMaxRange'
'InvalidDateBetweenRange'
'StartRangeDate'
'EndRangeDate'
'MouseOverEndRange'

The 'Calendar' class (which is the same element as the 'Container') is useful for knowing the order of this calendar when using the "bind" prop.

return (
  <Calendar
    selectedDate={selectedDate}
    onChangeSelectedDate={setSelectedDate}
    bind={bind}
  /> // Has the Calendar1 class
  <Calendar bind={bind} /> // Has the Calendar2 class
  <Calendar bind={bind} /> // Has the Calendar3 class
)

react-nice-calendar