react-event-calendar
Version:
react-event-calendar
87 lines (59 loc) • 2.8 kB
Markdown
A Calendar component that will display supplied events in a given month.
Live demo: [dptoot.github.io/react-event-calendar](http://dptoot.github.io/react-event-calendar/)
To build the examples locally, run:
```
npm install
npm start
```
Then open [`localhost:8000`](http://localhost:8000) in a browser.
The easiest way to use react-event-calendar is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).
You can also use the standalone build by including `dist/react-event-calendar.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.
```
npm install react-event-calendar --save
```
## Usage
Use this component to display a month view of a calendar with supplied event duration indicators.
```
const EventCalendar = require('react-event-calendar');
const events = [
{
start: '2015-07-20',
end: '2015-07-02',
title: 'test event',
description: 'This is a test description of an event',
},
{
start: '2015-07-19',
end: '2015-07-25',
title: 'test event',
description: 'This is a test description of an event',
data: 'you can add what ever random data you may want to use later',
},
];
<EventCalendar
month={7}
year={2015}
events={events}
onEventClick={(ref, eventData) => console.log(eventData)/>
```
| Property | Type | Description |
| -------- | ---- | ----------- |
| events | array | Array of event objects to be represented on the calendar |
| month | int | Selected Month to display |
| year | int | Selected Year to display |
| onEventClick | func | Callback for user click on any event node |
| onEventMouseOver | func | Callback for user mouse over on any event node |
| onEventMouseOut | func | Callback for user mouse out on any event node |
Requires Array.prototype.find() and Array.prototype.some().
Please include ES6 Array polyfill for unsupported browsers.
**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.
To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).
## License
__PUT LICENSE HERE__
Copyright (c) 2015 James Lewis.