Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/freiksenet/react-calendar
A modular toolkit to build calendar-related things in React
https://github.com/freiksenet/react-calendar
Last synced: 30 days ago
JSON representation
A modular toolkit to build calendar-related things in React
- Host: GitHub
- URL: https://github.com/freiksenet/react-calendar
- Owner: freiksenet
- License: mit
- Created: 2014-09-30T11:52:01.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-09-05T20:49:35.000Z (over 7 years ago)
- Last Synced: 2024-11-03T18:34:21.578Z (about 1 month ago)
- Language: JavaScript
- Homepage: http://freiksenet.github.io/react-calendar/
- Size: 1.17 MB
- Stars: 248
- Watchers: 8
- Forks: 46
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-calendar - A modular toolkit to build calendar-related things in React. (Uncategorized / Uncategorized)
- awesome-list - react-calendar
- awesome-list - react-calendar - A modular toolkit to build calendar-related things in React. (Demos / Form Components)
- awesome-react-components - react-calendar - A modular toolkit to build calendar-related things in React. (UI Components / Form Components)
- awesome-react-components - react-calendar - A modular toolkit to build calendar-related things in React. (UI Components / Form Components)
README
react-calendar
==============
[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][downloads-url]
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](http://freiksenet.github.io/react-calendar/)):
```html
weekNumbers={true}
size={12}
mods={
[
{
date: moment(),
classNames: [ 'current' ],
component: [ 'day', 'month', 'week' ]
}
]
}
/>
```
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.
```html
```
If a modifier is passed without date it modifies *all* components of this type in
the tree. Useful, for example, for passing callbacks.
```html
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:
```html
```
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.
- [x] ~~Utils to create range of components for modifying multiple components easier~~
- [ ] An example datepicker component using react-calendar
- [x] ~~Basic unit tests~~
- [ ] More Tests!
[npm-image]: https://img.shields.io/npm/v/react-calendar.svg?style=flat-square
[npm-url]: https://npmjs.org/package/react-calendar
[downloads-image]: https://img.shields.io/npm/dm/react-calendar.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/react-calendar