React.js Calendar Component
Clone or download
Latest commit d625a47 Nov 28, 2017
Permalink
Failed to load latest commit information.
examples add redux-events example Nov 28, 2017
src fix tests Nov 13, 2017
.babelrc Upgrade babel Sep 23, 2016
.gitignore Add eslint config Nov 7, 2017
.npmignore Use prop-types package May 6, 2017
.travis.yml Add eslint config Nov 7, 2017
CHANGELOG.md update changelog Nov 13, 2017
LICENSE.md Initial commit. May 30, 2014
README.md update readme Nov 19, 2017
package.json 2.0.0 Nov 13, 2017
yarn.lock fix tests Nov 13, 2017

README.md

react-calendar

React calendar component inspired by CLNDR.js.

$ npm install react-calendar-component

Note: the npm name is react-calendar-component!

This is a low-level component for rendering monthly calendars using React. The component will call renderDay and renderHeader functions provided by you to make a calendar for the month of the given Date. Very basic default implementations are provided for both, but they can be overridden to fit your use case. This example shows how to create a regular grid calendar.

Live Demo

http://hanse.github.io/react-calendar/

Usage

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Calendar } from 'react-calendar-component';
import moment from 'moment';
import 'moment/locale/nb';

class CalendarExample extends Component {
  state = {
    date: moment()
  };

  render() {
    return (
      <Calendar
        onChangeMonth={date => this.setState({ date })}
        date={this.state.date}
        onPickDate={date => console.log(date)}
        renderDay={({ day, classNames, onPickDate }) => (
          <div
            key={day.format()}
            className={cx(
              'Calendar-grid-item',
              day.isSame(moment(), 'day') && 'Calendar-grid-item--current',
              classNames
            )}
            onClick={e => onPickDate(day)}
          >
            {day.format('D')}
          </div>
        )}
        renderHeader={({ date, onPrevMonth, onNextMonth }) => (
          <div className="Calendar-header">
            <button onClick={onPrevMonth}>«</button>
            <div className="Calendar-header-currentDate">
              {date.format('MMMM YYYY')}
            </div>
            <button onClick={onNextMonth}>»</button>
          </div>
        )}
      />
    );
  }
}

render(<CalendarExample />, document.getElementById('calendar'));

License

MIT