Skip to content

Commit 5d9a12f

Browse files
jasonsalzmanjasonsalzman
committed
adding more examples and updating the docs
1 parent 91a74e9 commit 5d9a12f

20 files changed

+22743
-14995
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
[![npm version](https://badge.fury.io/js/react-add-to-calendar.svg)](https://badge.fury.io/js/react-add-to-calendar)
44
[![Build Status](https://travis-ci.org/jasonsalzman/react-add-to-calendar.svg?branch=master)](https://travis-ci.org/jasonsalzman/react-add-to-calendar)
5-
[![Dependency Status](https://david-dm.org/jasonsalzman/react-add-to-calendar.svg)](https://david-dm.org/jasonsalzman/react-add-to-calendar)
5+
[![Dependency Status](https://img.shields.io/david/peer/webcomponents/generator-element.svg?maxAge=2592000)](https://david-dm.org/jasonsalzman/react-add-to-calendar)
66
[![codecov](https://codecov.io/gh/jasonsalzman/react-add-to-calendar/branch/master/graph/badge.svg)](https://codecov.io/gh/jasonsalzman/react-add-to-calendar)
77
[![Downloads](http://img.shields.io/npm/dm/react-add-to-calendar.svg)](https://npmjs.org/package/react-add-to-calendar)
88

9-
A simple and reusable Add to Calendar component for React ([Demo](https://jasonsalzman.github.io/react-add-to-calendar/))
9+
A simple, customizable, and reusable Add to Calendar button component for React ([Demo](https://jasonsalzman.github.io/react-add-to-calendar/))
1010

1111
## Installation
1212

‎docs-site/bundle.js

+22,251-14,864
Large diffs are not rendered by default.

‎docs-site/index.html

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

‎docs-site/src/example_components.jsx

+74-37
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,89 @@
11
import React from 'react'
22
import hljs from 'highlight.js'
33
import Default from './examples/default'
4+
import ChangeLabel from './examples/changeLabel'
5+
import ChangeTemplate from './examples/changeTemplate'
6+
import TextOnlyTemplate from './examples/textOnlyTemplate'
7+
import TextOnlyDropdown from './examples/textOnlyDropdown'
8+
import ChangeDropdownOrder from './examples/changeDropdownOrder'
9+
import RemoveDropdownItem from './examples/removeDropdownItem'
10+
import ChangeDropdownLabels from './examples/changeDropdownLabels'
411
import CodeExampleComponent from './code_example_component'
512

613
import 'react-add-to-calendar/dist/react-add-to-calendar.css'
714
import './style.scss'
815

916
export default React.createClass({
10-
displayName: 'exampleComponents',
17+
displayName: 'exampleComponents',
1118

12-
componentDidMount () {
13-
hljs.initHighlightingOnLoad()
14-
},
19+
componentDidMount () {
20+
hljs.initHighlightingOnLoad()
21+
},
1522

16-
examples: [
17-
{
18-
title: 'Default',
19-
component: <Default />
20-
}
21-
],
23+
examples: [
24+
{
25+
title: 'Default',
26+
component: <Default />
27+
},
28+
{
29+
title: 'Change Button Label',
30+
component: <ChangeLabel />
31+
},
32+
{
33+
title: 'Change Button Template',
34+
component: <ChangeTemplate />
35+
},
36+
{
37+
title: 'Text Only Button Template',
38+
component: <TextOnlyTemplate />
39+
},
40+
{
41+
title: 'Text Only Dropdown Items',
42+
component: <TextOnlyDropdown />
43+
},
44+
{
45+
title: 'Change Dropdown Order',
46+
component: <ChangeDropdownOrder />
47+
},
48+
{
49+
title: 'Remove Dropdown Item',
50+
component: <RemoveDropdownItem />
51+
},
52+
{
53+
title: 'Change Dropdown Labels',
54+
component: <ChangeDropdownLabels />
55+
}
56+
],
2257

23-
renderExamples () {
24-
return this.examples.map((example, index) =>
25-
<CodeExampleComponent key={`example-${index}`} id={index} title={example.title}>
26-
{example.component}
27-
</CodeExampleComponent>
28-
)
29-
},
58+
renderExamples () {
59+
return this.examples.map((example, index) =>
60+
<CodeExampleComponent key={`example-${index}`} id={index} title={example.title}>
61+
{example.component}
62+
</CodeExampleComponent>
63+
)
64+
},
3065

31-
renderLeftColumn () {
32-
return this.examples.map((example, index) =>
33-
<li className="examples__navigation-item" key={`link-${index}`}>
34-
<a href={`#example-${index}`}>
35-
{example.title}
36-
</a>
37-
</li>
38-
)
39-
},
66+
renderLeftColumn () {
67+
return this.examples.map((example, index) =>
68+
<li className="examples__navigation-item" key={`link-${index}`}>
69+
<a href={`#example-${index}`}>
70+
{example.title}
71+
</a>
72+
</li>
73+
)
74+
},
4075

41-
render () {
42-
return <div>
43-
<h1>Examples</h1>
44-
<ul className="examples__navigation">
45-
{this.renderLeftColumn()}
46-
</ul>
47-
<div className="examples">
48-
{this.renderExamples()}
49-
</div>
50-
</div>
51-
}
76+
render () {
77+
return (
78+
<div>
79+
<h1>Examples</h1>
80+
<ul className="examples__navigation">
81+
{this.renderLeftColumn()}
82+
</ul>
83+
<div className="examples">
84+
{this.renderExamples()}
85+
</div>
86+
</div>
87+
)
88+
}
5289
})

‎docs-site/src/examples/changeDropdownLabels.jsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react'
2+
import AddToCalendar from 'react-add-to-calendar'
3+
4+
export default React.createClass({
5+
displayName: 'Change Dropdown Labels',
6+
7+
render () {
8+
let event = {
9+
title: 'Sample Event',
10+
description: 'This is the sample event provided as an example only',
11+
location: 'Portland, OR',
12+
startTime: '2016-09-16T20:15:00-04:00',
13+
endTime: '2016-09-16T21:45:00-04:00'
14+
};
15+
16+
let items = [
17+
{ outlook: 'Outlook' },
18+
{ apple: 'iCal' },
19+
{ yahoo: 'Yahoo!' },
20+
{ google: 'Google' }
21+
];
22+
23+
return (
24+
<div className="row">
25+
<pre className="column example__code">
26+
<code className="js">
27+
{"let items = ["}<br/>
28+
&nbsp;&nbsp;&nbsp;
29+
{"\{ outlook: 'Outlook' \}"}<br/>
30+
&nbsp;&nbsp;&nbsp;
31+
{"\{ apple: 'iCal' \}"}<br/>
32+
&nbsp;&nbsp;&nbsp;
33+
{"\{ yahoo: 'Yahoo!' \}"}<br/>
34+
&nbsp;&nbsp;&nbsp;
35+
{"\{ google: 'Google' \}"}<br/>
36+
{"];"}<br/><br/>
37+
</code>
38+
<code className="jsx">
39+
{"<AddToCalendar"}<br/>
40+
&nbsp;&nbsp;&nbsp;
41+
{"event={event}"}<br/>
42+
&nbsp;&nbsp;&nbsp;
43+
{"listItems=\{items\} />"}
44+
</code>
45+
</pre>
46+
<div className="column">
47+
<AddToCalendar event={event} listItems={items} />
48+
</div>
49+
</div>
50+
);
51+
}
52+
})

‎docs-site/src/examples/changeDropdownOrder.jsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react'
2+
import AddToCalendar from 'react-add-to-calendar'
3+
4+
export default React.createClass({
5+
displayName: 'Change Dropdown Order',
6+
7+
render () {
8+
let event = {
9+
title: 'Sample Event',
10+
description: 'This is the sample event provided as an example only',
11+
location: 'Portland, OR',
12+
startTime: '2016-09-16T20:15:00-04:00',
13+
endTime: '2016-09-16T21:45:00-04:00'
14+
};
15+
16+
let items = [
17+
{ outlook: 'Outlook' },
18+
{ apple: 'Apple Calendar' },
19+
{ yahoo: 'Yahoo' },
20+
{ google: 'Google' }
21+
];
22+
23+
return (
24+
<div className="row">
25+
<pre className="column example__code">
26+
<code className="js">
27+
{"let items = ["}<br/>
28+
&nbsp;&nbsp;&nbsp;
29+
{"\{ outlook: 'Outlook' \}"}<br/>
30+
&nbsp;&nbsp;&nbsp;
31+
{"\{ apple: 'Apple Calendar' \}"}<br/>
32+
&nbsp;&nbsp;&nbsp;
33+
{"\{ yahoo: 'Yahoo' \}"}<br/>
34+
&nbsp;&nbsp;&nbsp;
35+
{"\{ google: 'Google' \}"}<br/>
36+
{"];"}<br/><br/>
37+
</code>
38+
<code className="jsx">
39+
{"<AddToCalendar"}<br/>
40+
&nbsp;&nbsp;&nbsp;
41+
{"event={event}"}<br/>
42+
&nbsp;&nbsp;&nbsp;
43+
{"listItems=\{items\} />"}
44+
</code>
45+
</pre>
46+
<div className="column">
47+
<AddToCalendar event={event} listItems={items} />
48+
</div>
49+
</div>
50+
);
51+
}
52+
})

‎docs-site/src/examples/changeLabel.jsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react'
2+
import AddToCalendar from 'react-add-to-calendar'
3+
4+
export default React.createClass({
5+
displayName: 'ChangeLabel',
6+
7+
render () {
8+
let event = {
9+
title: 'Sample Event',
10+
description: 'This is the sample event provided as an example only',
11+
location: 'Portland, OR',
12+
startTime: '2016-09-16T20:15:00-04:00',
13+
endTime: '2016-09-16T21:45:00-04:00'
14+
};
15+
16+
return (
17+
<div className="row">
18+
<pre className="column example__code">
19+
<code className="jsx">
20+
{"<AddToCalendar"}<br/>
21+
&nbsp;&nbsp;&nbsp;
22+
{"event={event}"}<br/>
23+
&nbsp;&nbsp;&nbsp;
24+
{"buttonLabel=\"Put on my calendar\" />"}
25+
</code>
26+
</pre>
27+
<div className="column">
28+
<AddToCalendar event={event} buttonLabel="Put on my calendar" />
29+
</div>
30+
</div>
31+
);
32+
}
33+
})

‎docs-site/src/examples/changeTemplate.jsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react'
2+
import AddToCalendar from 'react-add-to-calendar'
3+
4+
export default React.createClass({
5+
displayName: 'ChangeTemplate',
6+
7+
render () {
8+
let event = {
9+
title: 'Sample Event',
10+
description: 'This is the sample event provided as an example only',
11+
location: 'Portland, OR',
12+
startTime: '2016-09-16T20:15:00-04:00',
13+
endTime: '2016-09-16T21:45:00-04:00'
14+
};
15+
16+
let icon = { 'calendar-plus-o': 'left' };
17+
18+
return (
19+
<div className="row">
20+
<pre className="column example__code">
21+
<code className="js">
22+
{"let icon = \{ 'calendar-plus-o': 'left' \};"}<br/><br/>
23+
{"/*"}<br/>
24+
&nbsp;&nbsp;&nbsp;
25+
{"object property can be any Font Awesome icon"}<br/>
26+
&nbsp;&nbsp;&nbsp;
27+
{"and value can be 'left' or 'right'"}<br/>
28+
{"*/"}<br/><br/>
29+
</code>
30+
<code className="jsx">
31+
{"<AddToCalendar"}<br/>
32+
&nbsp;&nbsp;&nbsp;
33+
{"event={event}"}<br/>
34+
&nbsp;&nbsp;&nbsp;
35+
{"buttonTemplate=\{icon\} />"}
36+
</code>
37+
</pre>
38+
<div className="column">
39+
<AddToCalendar event={event} buttonTemplate={icon} />
40+
</div>
41+
</div>
42+
);
43+
}
44+
})

‎docs-site/src/examples/default.jsx

+43-13
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,48 @@ import React from 'react'
22
import AddToCalendar from 'react-add-to-calendar'
33

44
export default React.createClass({
5-
displayName: 'Default',
5+
displayName: 'Default',
66

7-
render () {
8-
return <div className="row">
9-
<pre className="column example__code">
10-
<code className="jsx">
11-
{"<AddToCalendar/>"}
12-
</code>
13-
</pre>
14-
<div className="column">
15-
<AddToCalendar/>
16-
</div>
17-
</div>
18-
}
7+
render () {
8+
let event = {
9+
title: 'Sample Event',
10+
description: 'This is the sample event provided as an example only',
11+
location: 'Portland, OR',
12+
startTime: '2016-09-16T20:15:00-04:00',
13+
endTime: '2016-09-16T21:45:00-04:00'
14+
};
15+
16+
return (
17+
<div className="row">
18+
<pre className="column example__code">
19+
<code className="js">
20+
{"let event = \{"}<br/>
21+
&nbsp;&nbsp;&nbsp;
22+
{" title: 'Sample Event',"}<br/>
23+
&nbsp;&nbsp;&nbsp;
24+
{" description: 'This is the sample event provided as an example only',"}<br/>
25+
&nbsp;&nbsp;&nbsp;
26+
{" location: 'Portland, OR',"}<br/>
27+
&nbsp;&nbsp;&nbsp;
28+
{" startTime: '2016-09-16T20:15:00-04:00',"}<br/>
29+
&nbsp;&nbsp;&nbsp;
30+
{" endTime: '2016-09-16T21:45:00-04:00'"}<br/>
31+
{"\};"}<br/><br/>
32+
{"/*"}<br/>
33+
&nbsp;&nbsp;&nbsp;
34+
{"startTime and endTime can use any datetime"}<br/>
35+
&nbsp;&nbsp;&nbsp;
36+
{"string that is acceptable by MomentJS"}<br/>
37+
{"*/"}
38+
</code>
39+
<code className="jsx">
40+
{"<AddToCalendar event={event} />"}
41+
</code>
42+
</pre>
43+
<div className="column">
44+
<AddToCalendar event={event} />
45+
</div>
46+
</div>
47+
);
48+
}
1949
})

0 commit comments

Comments
 (0)