mirror of
https://github.com/encounter/react-add-to-calendar.git
synced 2026-07-10 21:18:44 -07:00
91 lines
3.8 KiB
Markdown
91 lines
3.8 KiB
Markdown
|
# React Add to Calendar Button
|
|||
|
|
|
|||
|
|
[](https://badge.fury.io/js/react-add-to-calendar)
|
|||
|
|
[](https://travis-ci.org/jasonsalzman/react-add-to-calendar)
|
|||
|
|
[](https://david-dm.org/jasonsalzman/react-add-to-calendar)
|
|||
|
|
[](https://codecov.io/gh/jasonsalzman/react-add-to-calendar)
|
|||
|
|
[](https://npmjs.org/package/react-add-to-calendar)
|
|||
|
|
|
|||
|
|
A simple and reusable Add to Calendar component for React ([Demo](https://jasonsalzman.github.io/react-add-to-calendar/))
|
|||
|
|
|
|||
|
|
## Installation
|
|||
|
|
|
|||
|
|
The package can be installed via NPM:
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
npm install react-add-to-calendar --save
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
You’ll need to install React separately since it's not included in the package. Below is a simple example on how to use the Add to Calendar button in a React view.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
var React = require('react');
|
|||
|
|
var AddToCalendar = require('react-add-to-calendar');
|
|||
|
|
|
|||
|
|
var Example = React.createClass({
|
|||
|
|
displayName: 'Example',
|
|||
|
|
|
|||
|
|
getInitialState: function() {
|
|||
|
|
return {
|
|||
|
|
event: {
|
|||
|
|
title: 'Sample Event',
|
|||
|
|
description: 'This is the sample event provided as an example only',
|
|||
|
|
location: 'Portland, OR',
|
|||
|
|
startTime: '2016-09-16T20:15:00-04:00',
|
|||
|
|
endTime: '2016-09-16T21:45:00-04:00'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
render: function() {
|
|||
|
|
return <AddToCalendar event={this.state.event}/>;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Configuration
|
|||
|
|
|
|||
|
|
The most basic use of the Add to Calendar button can be described with:
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
let event = {
|
|||
|
|
title: 'Sample Event',
|
|||
|
|
description: 'This is the sample event provided as an example only',
|
|||
|
|
location: 'Portland, OR',
|
|||
|
|
startTime: '2016-09-16T20:15:00-04:00',
|
|||
|
|
endTime: '2016-09-16T21:45:00-04:00'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
<AddToCalendar event={event} />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
See [here](https://github.com/jasonsalzman/react-add-to-calendar/blob/master/docs/ReactAddToCalendar.md) for a full list of props that may be passed to the component. Examples are given on the [main website](https://jasonsalzman.github.io/react-add-to-calendar).
|
|||
|
|
|
|||
|
|
## Compatibility
|
|||
|
|
|
|||
|
|
### React
|
|||
|
|
|
|||
|
|
I'll do my best to stay compatible with the latest version of React. I can't guarantee support for all older versions of React.
|
|||
|
|
|
|||
|
|
Latest compatible versions:
|
|||
|
|
- React 15.0.0 or newer
|
|||
|
|
|
|||
|
|
### Browser Support
|
|||
|
|
|
|||
|
|
The Add to Calendar button is compatible with the latest versions of Chrome, Firefox, Safari, and IE10+.
|
|||
|
|
|
|||
|
|
Unfortunately it is difficult to support legacy browsers while maintaining the ability to develop new features in the future. For IE9 support, it is known that the [classlist polyfill](https://www.npmjs.com/package/classlist-polyfill) is needed, but this may change or break at any point in the future.
|
|||
|
|
|
|||
|
|
## Local Development
|
|||
|
|
|
|||
|
|
The `master` branch contains the latest version of the Add to Calendar component. To start your example app, you can run `npm start`. This starts a simple webserver on http://localhost:8080.
|
|||
|
|
|
|||
|
|
You can run `npm test` to execute the test suite and linters. To help you develop the component I’ve set up some tests that covers the basic functionality (can be found in `/tests`). I highly recommend you add tests when you’re adding new functionality.
|
|||
|
|
|
|||
|
|
### The examples
|
|||
|
|
The examples are hosted within the docs folder and are ran in the simple add that loads the Add to Calendar button. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
|
|||
|
|
|
|||
|
|
## License
|
|||
|
|
|
|||
|
|
Copyright (c) 2016 Jason Salzman. Licensed under MIT license, see [LICENSE](LICENSE) for the full license.
|