-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcalendar-select.njk
130 lines (110 loc) · 5.69 KB
/
calendar-select.njk
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
123
124
125
126
127
---
layout: layout.njk
title: NYSDS Calendar Select
url: nysds.dev/calendar-select
domain: nysds.dev
---
<style>
.nysds-linklist {
display: flex;
flex-direction: column;
align-items:center;
justify-content: center;
margin:15px 0px 35px;
}
.nysds-linklist_label {
font-weight: bold;
}
.nysds-linklist_label::before {
content: '\f133';
font-weight: 600;
padding-left: 0em;
margin-right: 10px;
font-family: 'Font Awesome 6 Free';
color: #000;
}
.nysds-linklist-row {
margin: 20px auto;
}
.nysds-linklist_select {
border: 1px solid #62666a;
padding: 15px;
width: 100%;
background: #fff;
border-radius: 10px;
border: 2px solid #62666a;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 7% center;
}
.nysds-linklist_button {
background: #154973;
padding: 20px;
font-family: "Proxima Nova", sans-serif;
font-weight: bold;
font-size: 13px;
line-height: 15px;
letter-spacing: 2px;
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
border-radius: 15px;
border: none;
width: 90%;
margin-top: 30px;
}
.nysds-linklist_button:disabled {
background: #62666a;
}
.nysds-linklist_button:disabled:hover {
background: #62666a;
}
.nysds-linklist_button:hover {
background: #000;
}
.nysds-linklist_button:focus {
background: #000;
}
@media (min-width: 768px) {
.nysds-linklist_button {
width: fit-content;
margin-top: 0;
}
.nysds-linklist_select {
width: 300px;
margin-right: 30px;
}
}
</style>
<section class="nysds-linklist">
<div>
<label class="nysds-linklist_label" for="nysds-add-to-calendar">Choose a provider to add Governor Hochul's State of the State Address to your calendar <span class="sr-only">Select an calendar provider from the list </span></label>
</div>
<div class="nysds-linklist-row">
<select
class="nysds-linklist_select"
name="Select your calendar provider"
id="nysds-add-to-calendar">
<option disabled selected hidden>Choose your calendar</option>
<option class="nysds-calendar-option" value="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20250114T180000Z%2F20250114T190000Z&details=On%20January%2014%2C%202025%2C%20Governor%20Hochul%20is%20delivering%20her%202025%20State%20of%20the%20State%20Address%21%20Tune%20in%20at%20governor.ny.gov%20to%20hear%20the%20governor%27s%20plans%20to%20put%20money%20in%20New%20Yorkers%27%20pockets%20and%20make%20our%20state%20safer.&location=Virtual&text=Gov.%20Hochul%27s%202025%20State%20of%20the%20State%20Address">Add to Google Calendar</option>
<option class="nysds-calendar-option" value="https://ogs-digital-service.github.io/calendar/SOTS2025.ics">Add to Apple (iOS) Calendar</option>
<option class="nysds-calendar-option" value="https://outlook.live.com/calendar/0/action/compose?allday=false&body=On%20January%2014%2C%202025%2C%20Governor%20Hochul%20is%20delivering%20her%202025%20State%20of%20the%20State%20Address%21%20Tune%20in%20at%20governor.ny.gov%20to%20hear%20the%20governor%27s%20plans%20to%20put%20money%20in%20New%20Yorkers%27%20pockets%20and%20make%20our%20state%20safer.&enddt=2025-01-14T14%3A00%3A00&location=Virtual&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2025-01-14T13%3A00%3A00&subject=Gov.%20Hochul%27s%202025%20State%20of%20the%20State%20Address">Add to Outlook</option>
<option class="nysds-calendar-option" value="https://outlook.office.com/calendar/0/action/compose?allday=false&body=On%20January%2014%2C%202025%2C%20Governor%20Hochul%20is%20delivering%20her%202025%20State%20of%20the%20State%20Address%21%20Tune%20in%20at%20governor.ny.gov%20to%20hear%20the%20governor%27s%20plans%20to%20put%20money%20in%20New%20Yorkers%27%20pockets%20and%20make%20our%20state%20safer.&enddt=2025-01-14T14%3A00%3A00&location=Virtual&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2025-01-14T13%3A00%3A00&subject=Gov.%20Hochul%27s%202025%20State%20of%20the%20State%20Address">Add to Office 365</option>
</select>
<button class="nysds-linklist_button" id="nysds-calendar-submit" disabled> Select a Calendar </button>
</div>
</section>
<script>
var translateOptions = document.getElementsByClassName("nysds-calendar-option");
var optList = Array.from(translateOptions);
var translateList = document.getElementById("nysds-add-to-calendar");
translateList.addEventListener("change", () => {
translateSubmit.removeAttribute('disabled');
translateSubmit.innerText = "Add to Calendar"
});
var translateSubmit = document.getElementById("nysds-calendar-submit");
translateSubmit.onclick = function(){
window.location = translateList.value;
}
</script>