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 😅