-
Notifications
You must be signed in to change notification settings - Fork 0
/
Calendar.html
122 lines (98 loc) · 5.8 KB
/
Calendar.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
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calendar - ACNH Apps</title>
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
<link rel="manifest" href="site.webmanifest" />
<link rel="stylesheet" href="Style/Style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Satisfy&display=swap" rel="stylesheet" />
<script src="Scripts/universalScripts/header.js" defer type="text/javascript"></script>
<script src="Scripts/universalScripts/time.js" defer type="text/javascript"></script>
<script src="Scripts/universalScripts/addSubtractDays.js" defer type="text/javascript"></script>
<script src="Scripts/universalScripts/eventsFunctions.js" defer type="text/javascript"></script>
<script src="Scripts/otherCode/bunnyDay.js" defer type="text/javascript"></script>
<script src="Scripts/lists/materials.js" defer type="text/javascript"></script>
<script src="Scripts/lists/birthdays.js" defer type="text/javascript"></script>
<script src="Scripts/lists/events.js" defer type="text/javascript"></script>
<script src="Scripts/Calendar/fillCalendar.js" defer type="text/javascript"></script>
<script src="Scripts/Calendar/showCalendar.js" defer type="text/javascript"></script>
<script src="Scripts/Calendar/dayClicked.js" defer type="text/javascript"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S7H31G1T9W"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-S7H31G1T9W');
</script>
</head>
<body class="backImage">
<header class="flex align" id="header"></header>
<main class="mainContent flexVertical">
<h3>How to Use:</h3>
<p>
Click on "Show Events" to see the Events.<br>
Click on "Show Birthdays" to see the Birthdays.<br>
Specify your Hemisphere. By default always North.<br><br>
Click the arrows to go to next or previous months.<br>
Click on any day to see the specifics of that day. Including events, seasonal materials and birthdays.<br>
Click on the month to jump back to the current date.<br><br>
</p>
<div style="align-self: center; font-size: 1.2em;">
<div>
<input type="checkbox" name="events" id="showEvents" value="showEvents" checked onclick="showCalendar(getSelectedMonth(), getSelectedYear())">
<label for="showEvents">Show Events</label>
</div>
<div>
<input type="checkbox" name="birthdays" id="showBirthdays" value="showBirthdays" onclick="showCalendar(getSelectedMonth(), getSelectedYear())">
<label for="showBirthdays">Show Birthdays</label>
</div>
</div>
<div style="align-self: center; font-size: 1.2em;">
<div>
<input type="radio" name="hemisphere" id="northHem" value="northHem" checked onclick="showCalendar(getSelectedMonth(), getSelectedYear())">
<label for="northHem">Northern Hemisphere</label>
</div>
<div>
<input type="radio" name="hemisphere" id="southHem" value="southHem" onclick="showCalendar(getSelectedMonth(), getSelectedYear())">
<label for="southHem">Southern Hemisphere</label>
</div>
</div>
<div class="flex" style="width: 100%; justify-content: space-between; align-items: center;">
<button style="width: 65px; background-color: transparent; border: none;"><img src="Images/back.png" alt="" style="width: 100%;" onclick="back()"></button>
<h3 id="monthName" style="font-size: 1.5em; flex-grow: 1;" onclick="backToCurrentDay()"></h3>
<button style="width: 65px; background-color: transparent; border: none;"><img src="Images/next.png" alt="" style="width: 100%;" onclick="next()"></button>
</div>
<table id="tableContainer"></table>
</main>
<div id="currentDay" class="mainContent flexVertical" style="display: none"></div>
<footer class="flex bottomLinks">
<p>DA: DA-9419-3603-8052<br>Creator ID: MA-4116-4314-7050<br>HHN ID: RA-7852-3149-7307</p>
</footer>
</body>
<script>
if ('serviceWorker' in navigator) {
// Register a service worker after the load event
addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js').then(console.log('Service worker successfully installed.'));
if (!matchMedia('(display-mode: standalone)').matches) { // only execute if app is not already installed
console.log('Executing app install reminder.'),
// reminds the user they can install the app
alert('Consider installing the app!\nDesktop Browser - click install button in top-right of address bar\nMobile Browser - click Add To Homescreen after clicking share button');
};
});
};
onappinstalled = event => {
console.log('Thank you for installing the app!');
};
</script>
</html>