adding more examples and updating the docs

README.md

@@ -2,11 +2,11 @@
 
 [![npm version](https://badge.fury.io/js/react-add-to-calendar.svg)](https://badge.fury.io/js/react-add-to-calendar)
 [![Build Status](https://travis-ci.org/jasonsalzman/react-add-to-calendar.svg?branch=master)](https://travis-ci.org/jasonsalzman/react-add-to-calendar)
-[![Dependency Status](https://david-dm.org/jasonsalzman/react-add-to-calendar.svg)](https://david-dm.org/jasonsalzman/react-add-to-calendar)
+[![Dependency Status](https://img.shields.io/david/peer/webcomponents/generator-element.svg?maxAge=2592000)](https://david-dm.org/jasonsalzman/react-add-to-calendar)
 [![codecov](https://codecov.io/gh/jasonsalzman/react-add-to-calendar/branch/master/graph/badge.svg)](https://codecov.io/gh/jasonsalzman/react-add-to-calendar)
 [![Downloads](http://img.shields.io/npm/dm/react-add-to-calendar.svg)](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/))
+A simple, customizable, and reusable Add to Calendar button component for React ([Demo](https://jasonsalzman.github.io/react-add-to-calendar/))
 
 ## Installation
 

docs-site/index.html

@@ -4,7 +4,7 @@
     <link rel="stylesheet" type="text/css" href="style.css">
     <title>React Add to Calendar Button crafted by Jason Salzman</title>
     <meta charset="UTF-8">
-    <meta name="description" content="A simple and reusable Add to Calendar component for React.">
+    <meta name="description" content="A simple, customizable, and reusable Add to Calendar button component for React.">
     <meta name="keywords" content="React, HTML, CSS, JavaScript, JSX, date, calendar, add to calendar, event">
   </head>
 

docs-site/src/example_components.jsx

@@ -1,6 +1,13 @@
 import React from 'react'
 import hljs from 'highlight.js'
 import Default from './examples/default'
+import ChangeLabel from './examples/changeLabel'
+import ChangeTemplate from './examples/changeTemplate'
+import TextOnlyTemplate from './examples/textOnlyTemplate'
+import TextOnlyDropdown from './examples/textOnlyDropdown'
+import ChangeDropdownOrder from './examples/changeDropdownOrder'
+import RemoveDropdownItem from './examples/removeDropdownItem'
+import ChangeDropdownLabels from './examples/changeDropdownLabels'
 import CodeExampleComponent from './code_example_component'
 
 import 'react-add-to-calendar/dist/react-add-to-calendar.css'
@@ -17,6 +24,34 @@ export default React.createClass({
         {
           title: 'Default',
           component: <Default />
+        },
+        {
+            title: 'Change Button Label',
+            component: <ChangeLabel />
+        },
+        {
+            title: 'Change Button Template',
+            component: <ChangeTemplate />
+        },
+        {
+            title: 'Text Only Button Template',
+            component: <TextOnlyTemplate />
+        },
+        {
+            title: 'Text Only Dropdown Items',
+            component: <TextOnlyDropdown />
+        },
+        {
+            title: 'Change Dropdown Order',
+            component: <ChangeDropdownOrder />
+        },
+        {
+            title: 'Remove Dropdown Item',
+            component: <RemoveDropdownItem />
+        },
+        {
+            title: 'Change Dropdown Labels',
+            component: <ChangeDropdownLabels />
         }
     ],
 
@@ -39,7 +74,8 @@ export default React.createClass({
     },
 
     render () {
-    return <div>
+        return (
+            <div>
                 <h1>Examples</h1>
                 <ul className="examples__navigation">
                     {this.renderLeftColumn()}
@@ -48,5 +84,6 @@ export default React.createClass({
                     {this.renderExamples()}
                 </div>
             </div>
+        )
     }
 })

docs-site/src/examples/changeDropdownLabels.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'Change Dropdown Labels',
+
+    render () {
+        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'
+        };
+
+        let items = [
+            { outlook: 'Outlook' },
+            { apple: 'iCal' },
+            { yahoo: 'Yahoo!' },
+            { google: 'Google' }
+        ];
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="js">
+                        {"let items = ["}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ outlook: 'Outlook' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ apple: 'iCal' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ yahoo: 'Yahoo!' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ google: 'Google' \}"}<br/>
+                        {"];"}<br/><br/>
+                    </code>
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"listItems=\{items\} />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} listItems={items} />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/examples/changeDropdownOrder.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'Change Dropdown Order',
+
+    render () {
+        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'
+        };
+
+        let items = [
+            { outlook: 'Outlook' },
+            { apple: 'Apple Calendar' },
+            { yahoo: 'Yahoo' },
+            { google: 'Google' }
+        ];
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="js">
+                        {"let items = ["}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ outlook: 'Outlook' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ apple: 'Apple Calendar' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ yahoo: 'Yahoo' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ google: 'Google' \}"}<br/>
+                        {"];"}<br/><br/>
+                    </code>
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"listItems=\{items\} />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} listItems={items} />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/examples/changeLabel.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'ChangeLabel',
+
+    render () {
+        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'
+        };
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"buttonLabel=\"Put on my calendar\" />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} buttonLabel="Put on my calendar" />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/examples/changeTemplate.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'ChangeTemplate',
+
+    render () {
+        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'
+        };
+
+        let icon = { 'calendar-plus-o': 'left' };
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="js">
+                        {"let icon = \{ 'calendar-plus-o': 'left' \};"}<br/><br/>
+                        {"/*"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"object property can be any Font Awesome icon"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"and value can be 'left' or 'right'"}<br/>
+                        {"*/"}<br/><br/>
+                    </code>
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"buttonTemplate=\{icon\} />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} buttonTemplate={icon} />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/examples/default.jsx

@@ -5,15 +5,45 @@ export default React.createClass({
     displayName: 'Default',
 
     render () {
-    return <div className="row">
+        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'
+        };
+
+        return (
+            <div className="row">
                 <pre className="column example__code">
+                    <code className="js">
+                        {"let event = \{"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"  title: 'Sample Event',"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"  description: 'This is the sample event provided as an example only',"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"  location: 'Portland, OR',"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"  startTime: '2016-09-16T20:15:00-04:00',"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"  endTime: '2016-09-16T21:45:00-04:00'"}<br/>
+                        {"\};"}<br/><br/>
+                        {"/*"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"startTime and endTime can use any datetime"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"string that is acceptable by MomentJS"}<br/>
+                        {"*/"}
+                    </code>
                     <code className="jsx">
-          {"<AddToCalendar/>"}
+                        {"<AddToCalendar event={event} />"}
                     </code>
                 </pre>
                 <div className="column">
-        <AddToCalendar/>
+                    <AddToCalendar event={event} />
                 </div>
             </div>
+        );
     }
 })

docs-site/src/examples/removeDropdownItem.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'Remove Dropdown Item',
+
+    render () {
+        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'
+        };
+
+        let items = [
+            { outlook: 'Outlook' },
+            { google: 'Google' }
+        ];
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="js">
+                        {"let items = ["}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ outlook: 'Outlook' \}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"\{ google: 'Google' \}"}<br/>
+                        {"];"}<br/><br/>
+                    </code>
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"listItems=\{items\} />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} listItems={items} />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/examples/textOnlyDropdown.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'TextOnlyDropdown',
+
+    render () {
+        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'
+        };
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"displayItemIcons=\{false\} />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} displayItemIcons={false} />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/examples/textOnlyTemplate.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import AddToCalendar from 'react-add-to-calendar'
+
+export default React.createClass({
+    displayName: 'TextOnlyTemplate',
+
+    render () {
+        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'
+        };
+
+        let icon = { textOnly: 'none' };
+
+        return (
+            <div className="row">
+                <pre className="column example__code">
+                    <code className="js">
+                        {"let icon = \{ textOnly: 'none' \};"}<br/><br/>
+                    </code>
+                    <code className="jsx">
+                        {"<AddToCalendar"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"event={event}"}<br/>
+                        &nbsp;&nbsp;&nbsp;
+                        {"buttonTemplate=\{icon\} />"}
+                    </code>
+                </pre>
+                <div className="column">
+                    <AddToCalendar event={event} buttonTemplate={icon} />
+                </div>
+            </div>
+        );
+    }
+})

docs-site/src/root.jsx

@@ -25,24 +25,21 @@ export default React.createClass({
         </div>
         <div className="wrapper">
           <h1>React Add to Calendar Button</h1>
-          { /* <p>
+          <p>
-            <a href="https://npmjs.org/package/react-datepicker">
+            <a href="https://npmjs.org/package/react-add-to-calendar">
-              <img src="https://badge.fury.io/js/react-datepicker.svg" className="badge" />
+              <img src="https://badge.fury.io/js/react-add-to-calendar.svg" className="badge" />
+            </a>&nbsp;&nbsp;
+            <a href="https://travis-ci.org/jasonsalzman/react-add-to-calendar">
+              <img src="https://travis-ci.org/jasonsalzman/react-add-to-calendar.svg?branch=master" className="badge" />
+            </a>&nbsp;&nbsp;
+            <a href="https://david-dm.org/jasonsalzman/react-add-to-calendar">
+              <img src="https://img.shields.io/david/peer/webcomponents/generator-element.svg?maxAge=2592000" className="badge" />
+            </a>&nbsp;&nbsp;
+            <a href={'https://npmjs.org/package/react-add-to-calendar'}>
+              <img src="https://img.shields.io/npm/dm/react-add-to-calendar.svg" className="badge" />
             </a>
-            <a href="https://travis-ci.org/Hacker0x01/react-datepicker">
+          </p>
-              <img src="https://travis-ci.org/Hacker0x01/react-datepicker.svg?branch=master" className="badge" />
+          <p>A simple, customizable, and reusable Add to Calendar button component for React.</p>
-            </a>
-            <a href="https://david-dm.org/Hacker0x01/react-datepicker">
-              <img src="https://david-dm.org/Hacker0x01/react-datepicker.svg" className="badge" />
-            </a>
-            <a href={'https://npmjs.org/package/react-datepicker' +
-              '?__hstc=72727564.ca821b01b5b29b1831f0936a681f0483.1428679773810.1435582678273.1438354735499.5' +
-              '&__hssc=72727564.1.1438354735499' +
-              '&__hsfp=2497064007'}>
-              <img src="https://img.shields.io/npm/dm/react-datepicker.svg" className="badge" />
-            </a>
-          </p> */}
-          <p>A simple and reusable Add to Calendar component for React.</p>
 
           <h2>Installation</h2>
           <p>The package can be installed via NPM:</p>

docs/0.md

@@ -1,48 +0,0 @@
-`0` (component)
-===============
-
-
-
-Props
------
-
-### `buttonLabel`
-
-type: `string`
-defaultValue: `'Add to My Calendar'`
-
-
-### `buttonTemplate`
-
-type: `object`
-defaultValue: `{ caret: 'right' }`
-
-
-### `displayItemIcons`
-
-type: `bool`
-defaultValue: `true`
-
-
-### `event` (required)
-
-type: `object`
-defaultValue: `{
-    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'
-}`
-
-
-### `listItems`
-
-type: `array`
-defaultValue: `[
-    { apple: 'Apple Calendar' },
-    { google: 'Google' },
-    { outlook: 'Outlook' },
-    { yahoo: 'Yahoo' }
-]`
-

docs/ReactAddToCalendar.md

@@ -1,11 +1,23 @@
-`ReactAddToCalendar` (component)
+`0` (component)
-================================
+===============
 
 
 
 Props
 -----
 
+### `buttonClassClosed`
+
+type: `string`
+defaultValue: `'react-add-to-calendar__button'`
+
+
+### `buttonClassOpen`
+
+type: `string`
+defaultValue: `'react-add-to-calendar__button--light'`
+
+
 ### `buttonLabel`
 
 type: `string`
@@ -18,12 +30,24 @@ type: `object`
 defaultValue: `{ caret: 'right' }`
 
 
+### `buttonWrapperClass`
+
+type: `string`
+defaultValue: `'react-add-to-calendar__wrapper'`
+
+
 ### `displayItemIcons`
 
 type: `bool`
 defaultValue: `true`
 
 
+### `dropdownClass`
+
+type: `string`
+defaultValue: `'react-add-to-calendar__dropdown'`
+
+
 ### `event` (required)
 
 type: `object`
@@ -46,3 +70,9 @@ defaultValue: `[
     { yahoo: 'Yahoo' }
 ]`
 
+
+### `rootClass`
+
+type: `string`
+defaultValue: `'react-add-to-calendar'`
+

package.json

@@ -2,7 +2,7 @@
   "author": "Jason Salzman",
   "name": "react-add-to-calendar",
   "description": "A simple and reusable add to calendar button component for React",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "license": "MIT",
   "homepage": "https://github.com/jasonsalzman/react-add-to-calendar",
   "repository": {

scripts/buildDocs.sh

@@ -25,6 +25,7 @@ process.stdin.on('end', function() {
 function buildDocs(api) {
   // api is an object keyed by filepath. We use the file name as component name.
   for (var filepath in api) {
+    process.stdout.write(filepath + '\n\n');
     var name = getComponentName(filepath);
     var markdown = generateMarkdown(name, api[filepath]);
     var outputLocation = './docs/';
@@ -37,6 +38,7 @@ function getComponentName(filepath) {
   var name = path.basename(filepath);
   var ext;
   while ((ext = path.extname(name))) {
+    process.stdout.write(name + '\n\n');
     name = name.substring(0, name.length - ext.length);
   }
   return name;

scripts/release.sh

@@ -7,7 +7,7 @@ git checkout .
 
 npm version $1
 
-react-docgen ./src/ReactAddToCalendar.js --resolver findAllComponentDefinitions | ./scripts/buildDocs.sh
+react-docgen ./src/*.js --resolver findAllComponentDefinitions | ./scripts/buildDocs.sh
 
 git add .
 

src/ReactAddToCalendar.js

@@ -2,7 +2,7 @@ import React, {
 	Component,
 } from 'react';
 
-import helpersClass from './helpers.js';
+import helpersClass from './helpers';
 const helpers = new helpersClass();
 
 export default class ReactAddToCalendar extends React.Component {
@@ -80,7 +80,7 @@ export default class ReactAddToCalendar extends React.Component {
         });
 
         return (
-            <div className="react-add-to-calendar__dropdown">
+            <div className={this.props.dropdownClass}>
                 <ul>
                     {items}
                 </ul>
@@ -119,11 +119,10 @@ export default class ReactAddToCalendar extends React.Component {
                 );
         }
 
-        let buttonClass = (this.state.optionsOpen) ? 'react-add-to-calendar__button react-add-to-calendar__button--light' :
+        let buttonClass = (this.state.optionsOpen) ? this.props.buttonClassClosed + ' ' + this.props.buttonClassOpen : this.props.buttonClassClosed;
-                                                    'react-add-to-calendar__button';
 
         return (
-            <div className="react-add-to-calendar__wrapper">
+            <div className={this.props.buttonWrapperClass}>
                 <a id={this.state.componentId} className={buttonClass}
                     onClick={this.toggleCalendarDropdown}>{buttonLabel}</a>
             </div>
@@ -142,7 +141,7 @@ export default class ReactAddToCalendar extends React.Component {
         }
 
         return (
-            <div className="react-add-to-calendar">
+            <div className={this.props.rootClass}>
                 {addToCalendarBtn}
                 {options}
             </div>
@@ -153,17 +152,32 @@ export default class ReactAddToCalendar extends React.Component {
 ReactAddToCalendar.displayName = 'Add To Calendar';
 
 ReactAddToCalendar.propTypes = {
+	buttonClassClosed: React.PropTypes.string,
+	buttonClassOpen: React.PropTypes.string,
 	buttonLabel: React.PropTypes.string,
     buttonTemplate: React.PropTypes.object,
+	buttonWrapperClass: React.PropTypes.string,
 	displayItemIcons: React.PropTypes.bool,
-	event: React.PropTypes.object.isRequired,
+	dropdownClass: React.PropTypes.string,
-    listItems: React.PropTypes.array
+	event: React.PropTypes.shape({
+		title: React.PropTypes.string,
+		description: React.PropTypes.string,
+		location: React.PropTypes.string,
+		startTime: React.PropTypes.string,
+		endTime: React.PropTypes.string
+	}).isRequired,
+    listItems: React.PropTypes.arrayOf(React.PropTypes.object),
+	rootClass: React.PropTypes.string
 };
 
 ReactAddToCalendar.defaultProps = {
+	buttonClassClosed: 'react-add-to-calendar__button',
+	buttonClassOpen: 'react-add-to-calendar__button--light',
 	buttonLabel: 'Add to My Calendar',
     buttonTemplate: { caret: 'right' },
+	buttonWrapperClass: 'react-add-to-calendar__wrapper',
 	displayItemIcons: true,
+	dropdownClass: 'react-add-to-calendar__dropdown',
 	event: {
 		title: 'Sample Event',
 		description: 'This is the sample event provided as an example only',
@@ -176,5 +190,6 @@ ReactAddToCalendar.defaultProps = {
         { google: 'Google' },
         { outlook: 'Outlook' },
         { yahoo: 'Yahoo' }
-    ]
+    ],
+	rootClass: 'react-add-to-calendar'
 };