React-plain-calendar NPM

react-plain-calendar

React Calendar Component

Installation

npm i -S react-plain-calendar

Usage

The plugin ships with a default styling available at this location in the installed package:

node_modules/react-plain-calendar/lib/styles.css

You will need Webpack or other build system, that supports requiring css files.

import React, { Component } from 'react';
import Calendar from 'react-plain-calendar';
import 'react-plain-calendar/lib/styles.css';

export default class AwesomeComponent extends Component {
  onDateSelect(date) {
    /* do something */
  }

  render() {
    return (
      <div>
        <Calendar onDateSelect={this.onDateSelect} />
      </div>
    )
  }
}

Props

theme - Object of CSS classes with the following keys.
- calendar - CSS class for Calendar component.
- rangeSelect - CSS class for calendar controls.
- rangeSelectCaption - CSS class for caption of current range.
- rangeSelectPrev - CSS class for prev button.
- rangeSelectNext - CSS class for next button.
- gridDecade - CSS class for dates grid of decade range.
- gridYear - CSS class for dates grid of the yearly range.
- gridMonth - CSS class for dates grid of the monthly range.
- gridWeekdays - CSS class for weekdays labels.
- gridItem - CSS class for item of dates grid.
- gridDate - CSS class for date.
- gridDateOutside - CSS class for date out of the range.
- gridDateActive - CSS class for date with active state.
locale - The locale (by default is used "window.navigator.language" or "en" if not defined).
startOfWeek - First day of week. It must be a number from 0 (sunday) to 6 (saturday) (by default "0").
activeDate - Date with active state (by default is current date).
prevLabel - Label on a button "previous". Can be a string or React element (by default "〈").
nextLabel - Label on a button "next". Can be a string or React element (by default "〉").
renderYearEntry, renderMonthEntry, renderDateEntry - You can rewrite default render methods
```
renderEntry(label, date, onSelect, options)
```
- label - Label for the entry.
- date - Date object.
- onSelect - Callback. You must call onSelect method with date as a parameter when entry selected.
- options - Object, that contains theme, isOutside, isActive parameters.
By default method look as:
```
(label, date, onSelect, { theme, isOutside, isActive }) => (
  <button
    className={isOutside ? theme.gridDateOutside
      : isActive ? theme.gridDateActive : theme.gridDate}
    onClick={() => onSelect(date)}
  >
    {label}
  </button>
)
```
onDateSelect - A callback which is triggered whenever the entry is selected.
```
onDateSelect(date)
```
- date - Date object.