Skip to content
A modular toolkit to build calendar-related things in React
Branch: master
Clone or download
lolJS Merge pull request #35 from aray12/master
Added base css needed for examples
Latest commit 2dd32f3 Apr 23, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Added base css needed for examples Jul 19, 2016
dist update react version to 15.x Apr 12, 2016
less Added support for modifiers with date ranges. Mar 10, 2016
scripts gh-pages script and some build optimization. Oct 1, 2014
src Respect weekdayNames prop in Month.js component Aug 8, 2016
test Fixed test Mar 4, 2016
.babelrc Almost all features complete. Feb 21, 2016
.editorconfig Almost all features complete. Feb 21, 2016
.eslintignore Almost all features complete. Feb 21, 2016
.eslintrc Fixes #30; Updated eslintrc so it wouldn't be angry. Mar 4, 2016
.gitignore Clean up. Updated gitignore. Mar 7, 2016
.npmignore Refined build. Sep 25, 2014
LICENSE Initial commit. Sep 25, 2014
README.md Fix typo in README Oct 25, 2016
demo.js Added support for modifiers with date ranges. Mar 10, 2016
index.html update react version to 15.x Apr 12, 2016
package.json 1.1.0 Apr 12, 2016
react-calendar.js Clean up. Updated gitignore. Mar 7, 2016
webpack.config.js

README.md

react-calendar

NPM version Downloads

Calendars for React v15.

Not just calendar component, but a modular toolkit for building everything related to calendars in React, such as Datepickers.

In early alpha stage, documentation and features will arrive.

Example

npm install
npm run

One year calendar (Demo):

<Calendar startDate={ moment() }
          endDate={ moment().endOf('year') } <!-- Base calendar component -->
          weekNumbers={true}
          size={12}
          mods={
            [                           <!-- Pass modifier objects to change rendering -->
              {
                date: moment(),
                classNames: [ 'current' ],
                component: [ 'day', 'month', 'week' ] <!-- This shows the current day, week, and month. -->
              }
            ]
          }

          />

Each component can be used separately AND passed to other components to modify rendering. We have deprecated this in favor of passing a more flexible modifier object.

<Month date={moment()} />

If a modifier is passed without date it modifies all components of this type in the tree. Useful, for example, for passing callbacks.

<Calendar firstMonth={1}
          date={moment("2014-01-01")}
          weekNumbers={true}
          size={12}
          startDate={ moment() }
          endDate={ moment().endOf('year') } <!-- Base calendar compoment -->
          weekNumbers={true}
          size={12}
          mods={
            [
              {
                component: [ 'day' ],
                events: {
                  onClick: (date) => alert(date)
                }
              }
            ]
          } />

Events

All mouse and touch events are supported on all components with react style onCamelCase props (eg. onClick). Event handlers receives two arguments - date in moment.js format and the original react event.

Styling

There is no style by default, but an example theme using bootstrap is included in less/bootstrap-theme.less.

react-calendar uses SuitCSS style (a variant of BEM) to make default class hierarchy, if you want to add a class that is separate from that hierarchy just pass classes prop to any component. classes is an object with keys as class names and values as boolean-like values (this will be probably changed to just passing array of classes in future API). If you want to add SuitCSS modifier classes (eg rc-Day--current), pass similar object via modifiers prop (again this will probably become an array in next version of API).

For example:

<Day date={moment()} mods={[{bar: true}]} />

will yield the following classes: "rc-Day rc-Day--bar".

TODO

  • Merging of modifiers and classe
  • Docs
  • Calendar should be able to page
  • A component for Year - Calendar is supposed to be a 'controller' component for pageable stuff
  • A component that is on lower level that Day - for events.
  • Utils to create range of components for modifying multiple components easier
  • An example datepicker component using react-calendar
  • Basic unit tests
  • More Tests!
You can’t perform that action at this time.