Gregory

React calendar component.

Name

There is no good and vacant names, so: calendar → Gregorian calendar → Gregory.

Examples

var React = require('react');
var Calendar = require('gregory');

function onDatePicked(date) {
  console.log(date);
}

React.render(
  <Calendar CLASSNAME="cldr"
            UI_HAS_SIX_ROWS={false}
            ON_SELECT={onDatePicked} />,
  document.getElementById('calendar')
);

Compatibility

In theory: IE9+ now, IE8+ with polyfills (shims alter environment, so that they aren't included).

In practice: tested on modern browsers only.

Installation

Gregory is available as an npm package:

npm install gregory

Options

There are three categories of options

Base options

• CLASSNAME sets prefix for all elements classnames
• ON_SELECT is callback on clicked/selected cell with enabled date

Date options

• DATE_CURRENT is default/current date for calendar
• All dates above DATE_MAX are disabled/unselectable
• All dates behind DATE_MIN are disabled/unselectable

UI options

• UI_DAY_CLASSNAME sets function for adding classNames to day-cell
• UI_DAY_RENDER sets middleware function for day-cell render
• UI_FORMAT_MONTH sets format of current month at header (See moment.js documentation)
• UI_HAS_SIX_ROWS sets showing of six rows always even for February
• UI_HAS_WEEKDAYS sets visibility of header with weekdays captions
• UI_MONTHS_NUMBER sets number of months
• UI_TEXT_NEXT sets caption for next-month button
• UI_TEXT_PREV sets caption for prev-month button
• UI_WEEKDAYS is array of weekdays captions

Contributing

npm install
npm start # build examples and start server
QT_QPA_PLATFORM='' npm test # tests and linting

See gulpfile for more usefull tasks.

• 4 spaces for indentation
• No classes or prototypes, just functions
• If function should use this.props, pass it as first argument
• Priority: simplicity > consistency > performance

License

MIT