Déplace calendrier des événements vers page séparée

AEDIROUM · Sep 30, 2024 · 056849b · 056849b
1 parent dd49642
commit 056849b
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 58 deletions.
diff --git a/content/_index.md b/content/_index.md
@@ -24,10 +24,6 @@ Elle représente les étudiants des programmes suivants au [Département d'Infor
 * [Maîtrise en informatique](//diro.umontreal.ca/programmes-cours/cycles-superieurs/maitrise-en-informatique)
 * [Doctorat en informatique](//diro.umontreal.ca/programmes-cours/cycles-superieurs/doctorat-en-informatique)
 
-### Événements à venir
-
-<div id="events-calendar"></div>
-
 ### Nous rejoindre
 
 <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon" height="16"><path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path></svg> **Local:** 3190 [Pav. André-Aisenstadt](https://goo.gl/maps/YWSDwqFxJw72)

diff --git a/content/calendrier/_index.md b/content/calendrier/_index.md
@@ -0,0 +1,11 @@
+---
+title: Calendrier des événements
+menu:
+  main:
+    parent: evenements
+    weight: 2
+sitemap:
+  changefreq: daily
+  priority: 0.7
+---
+
diff --git a/themes/aediroum/layouts/index.html b/themes/aediroum/layouts/index.html
@@ -5,39 +5,3 @@
 {{ define "main" }}
   {{ .Content }}
 {{ end }}
-
-{{ define "scripts" }}
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/ical.min.js" integrity="sha256-uotVKltUv5neKsIlZxrxUccba0PaptusFj6p+w8Sons=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js" integrity="sha256-ZztCtsADLKbUFK/X6nOYnJr0eelmV2X3dhLDB/JK6fM=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/index.global.min.js" integrity="sha256-4zHPHslCgpks0gXVzHuFcF3aL1y674HH8L9s3vQiJK4=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/locales-all.global.min.js" integrity="sha256-lzem0W8FCaLegnCNhEQnF4bMnpq9Du4IiUDonSOXCA8=" crossorigin="anonymous"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", () => {
-    const calendarEl = document.getElementById("events-calendar");
-    const calendar = new FullCalendar.Calendar(calendarEl, {
-      initialView: "dayGridFourDay",
-      headerToolbar: {
-        center: "dayGridFourDay,dayGridMonth",
-      },
-      locale: "fr",
-      contentHeight: 400,
-      events: {
-        url: "https://bot.aediroum.ca/events.ics",
-        format: "ics",
-      },
-      views: {
-        dayGridFourDay: {
-          type: "dayGrid",
-          duration: { days: 4 },
-          buttonText: "À venir"
-        },
-      },
-      navLinks: true,
-      navLinkDayClick: function(date, jsEvent) {
-        calendar.changeView("dayGridFourDay", date);
-      },
-    });
-    calendar.render();
-  });
-</script>
-{{ end }}
diff --git a/themes/aediroum/layouts/section/calendrier.html b/themes/aediroum/layouts/section/calendrier.html
@@ -0,0 +1,83 @@
+{{ define "main" }}
+  <h3>{{ .Title }}</h3>
+
+  {{ .Content }}
+
+  <p>
+    <strong>Abonnement via</strong>
+    <a href="webcal://bot.aediroum.ca/events.ics">Calendrier iCal</a>
+  </p>
+
+  <p>
+    <button class="btn btn-dark" id="events-fullscreen">Passer en plein écran</button>
+  </p>
+
+  <div id="events-calendar"></div>
+{{ end }}
+
+{{ define "scripts" }}
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/ical.min.js" integrity="sha256-uotVKltUv5neKsIlZxrxUccba0PaptusFj6p+w8Sons=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js" integrity="sha256-ZztCtsADLKbUFK/X6nOYnJr0eelmV2X3dhLDB/JK6fM=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/index.global.min.js" integrity="sha256-4zHPHslCgpks0gXVzHuFcF3aL1y674HH8L9s3vQiJK4=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/locales-all.global.min.js" integrity="sha256-lzem0W8FCaLegnCNhEQnF4bMnpq9Du4IiUDonSOXCA8=" crossorigin="anonymous"></script>
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      const calendarEl = document.getElementById("events-calendar");
+      const fullscreenEl = document.getElementById("events-fullscreen");
+
+      fullscreenEl.addEventListener("click", () => {
+        calendarEl.requestFullscreen();
+      });
+
+      const calendar = new FullCalendar.Calendar(calendarEl, {
+        /* Paramètres de langue. */
+        locale: "fr",
+        firstDay: 0,
+
+        /* Configuration des vues de calendrier. */
+        contentHeight: 500,
+        initialView: "dayGridNextDays",
+        headerToolbar: {
+          center: "dayGridNextDays,dayGridMonth",
+        },
+        views: {
+          dayGridNextDays: {
+            type: "dayGrid",
+            duration: { days: 4 },
+            buttonText: "À venir"
+          },
+        },
+
+        /* Charge le contenu depuis le flux ICS externe. */
+        events: {
+          url: "https://bot.aediroum.ca/events.ics",
+          format: "ics",
+        },
+
+        /* Navigue vers la vue par journée lors du clic sur une date du mois. */
+        navLinks: true,
+        navLinkDayClick: function(date, jsEvent) {
+          calendar.changeView("dayGridNextDays", date);
+        },
+
+        /* Change le rendu des événements pour ajouter la localisation. */
+        eventContent: function(info, createElement) {
+          const time = document.createElement("div");
+          time.className = "fc-event-time";
+          time.textContent = info.timeText;
+
+          const title = document.createElement("div");
+          title.className = "fc-event-title";
+          title.textContent = info.event.title;
+
+          const location = document.createElement("div");
+          location.className = "fc-event-location";
+          location.textContent = info.event.extendedProps.location;
+
+          return {domNodes: [time, title, location]};
+        },
+      });
+      calendar.render();
+    });
+</script>
+{{ end }}
diff --git a/themes/aediroum/static/css/style.css b/themes/aediroum/static/css/style.css
@@ -27,7 +27,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #1E1E1E;
-    --background-highlight: #3E3E3E;
+    --background-highlight: #2B2B2B;
     --foreground: #FAFAFA;
     --foreground-muted: #A0A0A0;
 
@@ -217,6 +217,24 @@ button {
 
 /* Calendrier */
 
+.fc:fullscreen {
+  padding: 4em;
+  background-color: var(--background);
+}
+
+.fc-view {
+  overflow: scroll;
+}
+
+.fc-scrollgrid {
+  min-width: 696px;
+}
+
+/** En-tête **/
+.fc .fc-toolbar {
+  flex-flow: row wrap;
+}
+
 .fc .fc-toolbar-title {
   font-size: 1.4em;
 }
@@ -249,31 +267,37 @@ button {
   background-color: var(--background-highlight);
 }
 
-.fc-daygrid-dot-event {
-  align-items: start;
+.fc-event .fc-event-time::before {
+  display: inline-block;
+  content: "";
+  border: calc(var(--fc-daygrid-event-dot-width)/2) solid var(--fc-event-border-color);
+  border-radius: calc(var(--fc-daygrid-event-dot-width)/2);
+  box-sizing: content-box;
+  height: 0px;
+  margin: 0px 4px;
+  width: 0px;
 }
 
-.fc-daygrid-event-dot {
-  margin: .5em .25em;
+/** Affichage par mois **/
+.fc-dayGridMonth-view .fc-event .fc-event-location {
+  display: none;
 }
 
-.fc-dayGridFourDay-view .fc-daygrid-dot-event {
+/** Affichage par journées **/
+.fc-dayGridNextDays-view .fc-daygrid-dot-event {
   flex-flow: row wrap;
+  font-size: 1em;
+  padding: .5em;
 }
 
-.fc-dayGridFourDay-view .fc-event::before {
-  order: 1;
-  content: "";
+.fc-dayGridNextDays-view .fc-event .fc-event-time,
+.fc-dayGridNextDays-view .fc-event .fc-event-title,
+.fc-dayGridNextDays-view .fc-event .fc-event-location {
+  padding: 0 .25em;
+  white-space: normal;
   width: 100%;
 }
 
-.fc-dayGridFourDay-view .fc-event .fc-daygrid-event-dot,
-.fc-dayGridFourDay-view .fc-event .fc-event-time {
-  order: 1;
-}
-
-.fc-dayGridFourDay-view .fc-event .fc-event-title {
-  order: 2;
-  padding: 0 .25em;
-  white-space: normal;
+.fc-dayGridNextDays-view .fc-event .fc-event-location {
+  font-style: italic;
 }