/react-micro-calendar

Simple react calendar and date picker component

Primary LanguageJavaScriptMIT LicenseMIT

react-micro-calendar

Simple react calendar and date picker component

Getting started

Installation

npm install react-micro-calendar

Usage

Here's an example of basic usage

import MicroCalendar from 'react-micro-calendar'

const App = () => {
  const handleDate = date => {
    console.log(date)
  }
  
  return (
    <div className="App">
      <MicroCalendar onDateSelected={date => handleDate(date)} />
    </div>
  );
}

export default App;

Options

Props

Name Description Default
locale dates locale "default"
monthDisplayLength Month length to display "long"
weekdays Array with week days to display ['L', 'M', 'X', 'J', 'V', 'S', 'D']
prevButton Prev month button label "<"
nextButton Next month button label ">"
applySelectionButtonLabel Apply date selection button label "OK"
selectedClassName Class name for selected day(s) "selected"
todayClassName Class name today "today"
pastClassName Class name for past days "past"
futureClassName Class name for future days "future"

Callback

Name Description Example
onDateSelected Function to be fired when date selection is completed onDateSelected={date => handleDate(date)}

Styling

The calendar component has no built-in CSS, so it can be styled as you want.

License

The MIT License.

Contributing

As this package is in a very basic form, all contributions are welcome 😅