forked from commonpike/add-to-calendar-buttons
-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
114 lines (93 loc) · 4.47 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<script src="add-to-calendar.min.js"></script>
<style>
html, body {
font-family:sans-serif;
}
xmp {
background-color:#ccc;
width:90%;
margin:0 5%;
overflow:auto;
}
</style>
<title>OUICal2 Add to Calendar Example</title>
</head>
<body>
<h1>OUICal2 Add to Calendar</h1>
<h3>Widget from javascript input</h3>
<p>
The example below created a calendar from javascript data. Check the source to see how that's done.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="ouical-button"></div>
</p>
<script>
// create a calendar by hand
var ouical = addToCalendar({
options: {
class: 'my-class',
id: 'my-id' // If you don't pass an id, one will be generated for you.
},
data: {
title: 'Get on the front page of \'HN\'', // Event title
start: new Date('June 15, 2013 19:00'), // Event start date
// timezone: America/Los_Angeles, // converts the time to the IANA timezone
end: new Date('June 15, 2013 23:00'), // If an end time is set, this will take precedence over duration
// duration: 120, // Event duration (IN MINUTES)
// allday: true, // Override end time, duration and timezone, triggers 'all day'
address: 'The internet',
description: 'Get on the front page of "HN", then prepare for World Domination.'
}
});
document.querySelector('.ouical-button').appendChild(ouical);
</script>
<hr>
<h3>Widget from HTML input</h3>
<p>
The example below created a calendar from html content. Check the source to see how that's done.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div title="Add to Calendar" class="add-to-calendar">
<span class="start">12/18/2018 08:00 AM</span>
<span class="timezone">America/Los_Angeles</span>
<!--span class="end">12/18/2018 10:00 AM</span-->
<!--span class="duration">60</span-->
<!--span class="allday">true</span-->
<span class="title">Summary of the event</span>
<span class="description">Description of the event</span>
<span class="location">Location of the event</span>
</div>
</p>
<hr>
<h3>Generating javascript data as output</h3>
<p>
The example below created the calendar links from javascript data
and returned it as a javascript object. Check the source to see how that's done.
<xmp class="ouical-data"></xmp>
</p>
<script>
// create a calendar by hand
var ouicalData = addToCalendarData({
options: {
class: 'my-class',
id: 'my-id' // If you don't pass an id, one will be generated for you.
},
data: {
title: 'Get on the front page of \'HN\'', // Event title
start: new Date('June 15, 2013 19:00'), // Event start date
// timezone: America/Los_Angeles, // converts the time to the IANA timezone
end: new Date('June 15, 2013 23:00'), // If an end time is set, this will take precedence over duration
// duration: 120, // Event duration (IN MINUTES)
// allday: true, // Override end time, duration and timezone, triggers 'all day'
address: 'The internet',
description: 'Get on the front page of "HN", then prepare for World Domination.'
}
});
var ouicalNode = document.createTextNode(JSON.stringify(ouicalData,null,'\t'));
document.querySelector('.ouical-data').appendChild(ouicalNode);
</script>
</body>
</html>