-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
76 lines (61 loc) · 2.96 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Modern iCal Calendar Embed</title>
<meta name="description" content="Takes any ical link and displays a beautiful calendar that can be embedded onto any website. Works in agenda view and month view.">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-69563847-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-69563847-5');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<h1>Modern iCal Calendar Embed</h1>
<span id="about">Handcrafted by <a href="https://bengrant.dev" target="_blank">Ben Grant</a> using <a href="https://github.com/mozilla-comm/ical.js/" target="_blank">ical.js</a>. Visit the <a href="https://github.com/GRA0007/modern-cal-embed" target="_blank">Github repo</a>.</span>
<main>
<div id="settings">
<h2>Settings</h2>
<label for="ical">iCal URL</label> <button type="button" id="add_cors">Add cors proxy to url</button><br>
<input type="url" id="ical" placeholder="https://example.com/calendar.ical" value="https://gra0007.github.io/modern-cal-embed/example.ics"><br><br>
<input type="checkbox" checked id="show_title">
<label for="show_title">Title</label><br>
<input type="checkbox" checked id="show_nav">
<label for="show_nav">Navigation buttons</label><br>
<input type="checkbox" checked id="show_date">
<label for="show_date">Date</label><br>
<input type="checkbox" checked id="show_view">
<label for="show_view">View selector</label><br>
<input type="checkbox" id="show_details">
<label for="show_details">Always show details</label><br>
<input type="checkbox" id="monday_start">
<label for="monday_start">Start week on Monday</label><br><br>
<label for="default_view">Default view</label><br>
<select id="default_view">
<option value="0" selected>Agenda</option>
<option value="1">Month</option>
</select><br><br>
<label for="colorbg">Background color</label><br>
<input id="colorbg" type="color" value="#FFFFFF"><br>
<label for="colortxt">Text color</label><br>
<input id="colortxt" type="color" value="#000000"><br>
<label for="color">Theme color</label><br>
<input id="color" type="color" value="#1A73E8"><br>
<label for="colorsecondarytxt">Theme text color</label><br>
<input id="colorsecondarytxt" type="color" value="#FFFFFF"><br>
</div>
<div id="embed">
<label for="embed_link">Embed</label>
<button type="button" id="copy_url">Copy</button><br>
<input type="url" readonly id="embed_link">
<iframe src="./iframe.html" id="iframe" height="450px"></iframe>
</div>
</main>
<script src="script.js"></script>
</body>
</html>