Skip to content

Commit 913555f

Browse files
blackheavenblackheaven
committed
feat: replace Google Calendar by ToastUI (#24)
1 parent 1297128 commit 913555f

7 files changed

+151
-14
lines changed

‎astro.config.mjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { defineConfig } from 'astro/config';
22

33
// https://astro.build/config
44
export default defineConfig({
5-
ntegrations: [],
5+
integrations: [],
66
site: 'https://www.lyontechhub.org',
77
base: '/',
88
});

‎public/css/toastui-calendar.min.css

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/js/main.js

+109-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
function dynamicFilter(inputId) {
1+
const dynamicFilter = inputId => {
22
// Declare variables
33
var input, filter, items, i, txtValue;
44
input = document.getElementById(inputId);
@@ -13,7 +13,7 @@ function dynamicFilter(inputId) {
1313
items[i].style.display = 'none';
1414
}
1515
}
16-
}
16+
};
1717

1818
const toDescription = component => {
1919
const description = component.getFirstPropertyValue('description');
@@ -64,23 +64,117 @@ const filterForPeriod = (minDate, maxDate) => event => event.startDate >= minDat
6464

6565
const listVEventComponents = raw => new ICAL.Component(ICAL.parse(raw)).getAllSubcomponents('vevent');
6666

67-
const fetchEvents = (patterns, minDate, maxDate) => fetch('https://www.lyontechhub.org/Lyon-Tech-Hub-Calendar/calendar.ics').then((response) => response.text()).then((raw) =>
67+
const calendarICSUrl = 'https://www.lyontechhub.org/Lyon-Tech-Hub-Calendar/calendar.ics';
68+
69+
const fetchEvents = (patterns, minDate, maxDate) => fetch(calendarICSUrl).then((response) => response.text()).then((raw) =>
6870
listVEventComponents(raw)
6971
.map(toEvent)
7072
.filter(filterForPeriod(minDate, maxDate))
7173
.filter(matchForPatterns(patterns)));
7274

73-
function displayEvents(template, element, events) {
75+
const displayEvents = (template, element, events) => {
7476
if (element) {
7577
element.innerHTML = template({
76-
paneTitle: element.getAttribute('data-pane-title')
77-
, noEventCaption: element.getAttribute('data-no-event-caption')
78-
, events: events
79-
, hasEvents: events.length > 0
80-
, noEvent: events.length == 0
78+
paneTitle: element.getAttribute('data-pane-title'),
79+
noEventCaption: element.getAttribute('data-no-event-caption'),
80+
events: events,
81+
hasEvents: events.length > 0,
82+
noEvent: events.length == 0
8183
});
8284
}
83-
}
85+
};
86+
87+
const loadCommunities = () =>
88+
fetch('/communities.json')
89+
.then((response) => response.text())
90+
.then((body) => JSON.parse(body));
91+
92+
const loadCalendar = async () => {
93+
const communities = await loadCommunities();
94+
const communitiesCalendars =
95+
communities
96+
.map((community) => {
97+
var color = '#';
98+
for (var i = 0; i < 6; i++) {
99+
color += (Math.floor(Math.random() * 100) % 16).toString(16);
100+
}
101+
console.log(community.key, color);
102+
return { id: community.key, name: community.name, backgroundColor: color };
103+
});
104+
105+
const Calendar = tui.Calendar;
106+
const calendar = new Calendar('#calendar', {
107+
usageStatistics: false,
108+
defaultView: 'month',
109+
isReadOnly: true,
110+
useDetailPopup: true,
111+
month: {
112+
dayNames: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
113+
startDayOfWeek: 1,
114+
},
115+
timezone: {
116+
zones: [
117+
{
118+
timezoneName: 'Europe/Paris',
119+
},
120+
],
121+
},
122+
calendars: [
123+
{
124+
id: 'default',
125+
name: 'Default',
126+
// backgroundColor: '#03bd9e',
127+
},
128+
...communitiesCalendars
129+
],
130+
});
131+
132+
fetch(calendarICSUrl)
133+
.then((response) => response.text())
134+
.then((raw) => listVEventComponents(raw).map(toEvent))
135+
.then((items) => {
136+
calendar.createEvents(
137+
items.map((item) => {
138+
var title = item.title;
139+
var calendarId = 'default';
140+
const match = title.match(/^\[(.*?)\] (.+)$/);
141+
if (match) {
142+
for (var i = 0; i < communities.length; i++) {
143+
const patterns = communities[i].patternsGoogleCalendar;
144+
if (patterns) {
145+
for (var j = 0; j < patterns.length; j++) {
146+
if (match[1].localeCompare(patterns[j], 'en', { sensitivity: 'base' }) === 0) {
147+
// console.log(match[2], communities[i].key);
148+
title = match[2];
149+
calendarId = communities[i].key;
150+
break;
151+
}
152+
}
153+
}
154+
}
155+
}
156+
157+
return {
158+
calendarId: calendarId,
159+
id: item.id,
160+
title: title,
161+
body: item.description,
162+
start: item.startDate,
163+
end: item.endDate,
164+
location: item.location,
165+
raw: { url: item.url },
166+
}
167+
})
168+
);
169+
})
170+
;
171+
172+
document.querySelector('#calendar').style.height = '800px';
173+
document.querySelector('#calendarToday').onclick = () => { calendar.today(); };
174+
document.querySelector('#calendarNext').onclick = () => { calendar.next(); };
175+
document.querySelector('#calendarPrevious').onclick = () => { calendar.prev(); };
176+
177+
};
84178

85179
window.onload = () => {
86180
var communityDetailsEventsElement = document.getElementById('communityDetails');
@@ -116,4 +210,9 @@ window.onload = () => {
116210
});
117211
});
118212
}
213+
214+
var calendarElement = document.getElementById('calendar');
215+
if (calendar) {
216+
loadCalendar();
217+
}
119218
}

‎public/js/toastui-calendar.min.js

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/layouts/Layout.astro

+2
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@ interface Props {
1414
<title>Lyon Tech Hub</title>
1515
<link rel="icon" type="image/png" href="/imgs/logo/LyonTechHub-32-red.png" />
1616
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
17+
<link href="/css/toastui-calendar.min.css" rel="stylesheet"/>
1718
<link href="/css/main.css" rel="stylesheet"/>
1819
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js" integrity="sha512-E1dSFxg+wsfJ4HKjutk/WaCzK7S2wv1POn1RRPGh8ZK+ag9l244Vqxji3r6wgz9YBf6+vhQEYJZpSjqWFPg9gg==" crossorigin="anonymous" referrerpolicy="no-referrer" is:inline></script>
1920
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer" is:inline></script>
2021
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha512-oBTprMeNEKCnqfuqKd6sbvFzmFQtlXS3e0C/RGFV0hD6QzhHV+ODfaQbAlmY6/q0ubbwlAM/nCJjkrgA3waLzg==" crossorigin="anonymous" referrerpolicy="no-referrer" is:inline></script>
2122
<script src="/js/ical.es5.min.cjs" is:inline></script>
23+
<script src="/js/toastui-calendar.min.js" is:inline></script>
2224
<script src="/js/main.js" is:inline></script>
2325
</head>
2426
<body>

‎src/pages/calendar.astro

+14-3
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,20 @@ import Layout from '../layouts/Layout.astro';
1414
href="https://www.lyontechhub.org/Lyon-Tech-Hub-Calendar/calendar.ics">au
1515
format ical</a> ou sur Google via le bouton en bas à droite du calendrier)</p>
1616
<p><span class="fa fa-flash fa-lg"></span>Ajouter une alerte Google Calendar pour ne plus en manquer un!</p>
17-
<iframe
18-
src="https://calendar.google.com/calendar/embed?height=600&wkst=2&ctz=Europe%2FParis&bgcolor=%23ffffff&showTitle=0&hl=fr&src=Y2sycnVxNmNxZmNoM3Q0Z3NoYmQ2dmRuZDRAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&src=N2EyNW9yNW8yMHA1aGJmMWZ0OHQ4ZGVwb2RwY2pqbHBAaW1wb3J0LmNhbGVuZGFyLmdvb2dsZS5jb20&color=%23AD1457&color=%23E67C73"
19-
style="border: solid 1px #777;" width="800" height="600" frameborder="0" scrolling="no"></iframe>
17+
18+
<header class="header">
19+
<nav class="navbar">
20+
<button type="button" class="btn btn-default today" id ="calendarToday">Today</button>
21+
<button type="button" class="btn btn-default prev" id ="calendarPrevious">
22+
<i class="fa fa-chevron-left"></i>
23+
</button>
24+
<button type="button" class="btn btn-default next" id ="calendarNext">
25+
<i class="fa fa-chevron-right"></i>
26+
</button>
27+
<span class="navbar--range"></span>
28+
</nav>
29+
</header>
30+
<div id="calendar"></div>
2031
</div>
2132
</div>
2233
</main>

‎src/pages/communities.json.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { APIRoute } from 'astro';
2+
import { getList } from '../lib/communities.ts';
3+
4+
export const GET: APIRoute = async () => {
5+
try {
6+
return new Response(JSON.stringify(getList()));
7+
} catch (error) {
8+
throw new Error('Something went wrong in communities.json route!');
9+
}
10+
};

0 commit comments

Comments
 (0)