React Add to Calendar HOC
What is This?
React Add to Calendar HOC is a very lightweight and flexible higher order component that allows you to add add to calendar functionality to your own components. Use your own button component and either dropdown component or modal component.
Why Should I Use This?
If you want to add “add to calendar” functionality to your application, this is the lightest-weight and most flexibly library that does this. Other libraries that provide this functionality are over 21x the bundle size and don’t give you the flexibility of using your own components. There are also no external dependencies to worry about.
In your project you most likely already have reusable button components to other styles. Rather than dictating what your Add to Calendar component looks like, you provide your own components for this library to add functionality to. You can style your components with CSS in JS, CSS Modules or anything else. This library doesn’t care what you use or dictate changes to how you do things.
It also doesn’t have a bundled date library with it either, giving you the flexibility to use whatever library you want. MomentJS is the most popular, but it’s incredibly large. You’re in charge of formatting the dateTime string and providing it to this lib. It doesn’t care what date lib you use.
Examples
View examples here.
Installation
Using npm
npm install react-add-to-calendar-hoc --save
yarn add react-add-to-calendar-hoc
Then, using a module bundler that supports either CommonJS or ES2015 modules, such as webpack:
// Using an ES6 transpiler like Babel
import AddToCalendarHOC from 'react-add-to-calendar-hoc';
// Not using an ES6 transpiler
var AddToCalendarHOC = require('react-add-to-calendar-hoc');
Props
The component takes the following props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| buttonProps | object | {} |
Spread props to the button component you pass in to the HOC | |
| buttonText | string | Add to Calendar |
Text to render in the button | |
| className | string | null |
className to use on AddToCalendar container | |
| dropdownProps | object | {} |
Spread props to the dropdown or modal component you pass in to the HOC | |
| event | object | Yes | Event object we use to create calendar links | |
| items | array of enums | [GOOGLE, ICAL, OUTLOOK, YAHOO] |
By default AddToCalendar renders all of these calendar links. To render a subset of these or to list them in a different order, provide a list of items using the enum SHARE_SITES, which is a named import from the library | |
| linkProps | object | {} |
Spread props to the link components we render for each calendar item |
Event Object Shape
All of these properties are required.
| Prop | Type | Description |
|---|---|---|
| description | string | Description of event. Put in the notes or body section of event. |
| duration | string or number | Duration of event in hours. If string, must be four digits, e.g. '0200' or '0130'. If number, must represent hours in decimal form, i.e. 2 or 2.15. This is only used for Yahoo. |
| endDatetime | string | End date time of event. Must be formatted in YYYYMMDDTHHmmssZ format or YYYYMMDDTHHmmss if timezone is also provided. Use any date lib you want, but the format must match this. |
| location | string | Location of event. Use an address for best specificity and for Google Maps to populate a Map. Sometimes a location name will also populate a map. |
| startDatetime | string | Start date time of event. Must be formatted in YYYYMMDDTHHmmssZ format or YYYYMMDDTHHmmss if timezone is also provided. Use any date lib you want, but the format must match this. |
| timezone | string | Valid TZ env variable. See list of valid options here. |
| title | string | Name of your event. |
Helper functions
| Function | Arguments | Description |
|---|---|---|
| onRequestClose | event | Handles closing of the modal or dropdown. Can be applied to the Button in the provided Overlay to return to previous view. |
Dependencies
React Add to Calendar HOC has zero external dependencies.
Edge Cases
Because this library aims to be extremely unopinionated and lightweight it doesn’t handle most edge cases, instead letting you handle them as you’d like. Here are some common edge cases and recommendations for what to do.
Open in Outlook doesn’t work on iOS
The option to download an ICS file to open in Outlook won’t work on iOS because iOS devices don’t let you choose which app to open certain files in. iOS devices will always open any ics in the default calendar overlay.
You can handle this case by checking if the user’s device is iOS and then customizing the list of items. There’s an example in the docs to handle this exact edge case. Look for the section “Handle iPhone Options”.
How do I specify an event in a specific timezone
Instead of passing startDatetime and endDatetime as UTC values pass in local time formats, i.e. YYYYMMDDTHHmmss and also provide a valid timezone property. (For a list of valid properties see the TZ column here).
Doing this will ensure that regardless of the user’s local timezone the event created will always be in the correct time for the timezone you specified. It will also include a timezone property in the created event so the user knows what timezone the event is in.
Reporting Issues
If you believe you’ve found an issue, please report it along with any relevant details to reproduce it.
Contributions
Coming Soon
Compatibility
This component is expected to work on modern browsers, but if it breaks on a particular browser please file an issue. We can check the problem using browserstack - a great service for cross-browser testing. They also support open source projects like this one.
License
MIT