goueliou: add to calendar button

JBBailly · JBBailly · commit d56390ed1bc6 · 2025-04-13T15:59:24.000+02:00
diff --git a/frugal.css b/frugal.css
@@ -343,6 +343,8 @@ p {
 }
 
 .gouel-title {
+    width: 101%;
+    z-index: 10;
     position: sticky;
     top: 0px;
     background-color: var(--lite-bkg);
@@ -351,6 +353,11 @@ p {
     border-bottom: 1px solid var(--main-color);
 }
 
+#gouel-fest-header {
+    display: flex;
+    justify-content: space-between;
+}
+
 span.gouel-ville {
     font-weight: bold;
 }
@@ -522,8 +529,22 @@ span.gouel-ville-proche {
     .goueliou-page #question {
         font-size: 20px;
     }
-}
 
+    /* add-to-calendar-button  */
+
+    add-to-calendar-button#goueliou-calendar-button::part(.atcb-button) {
+        color: unset;
+        background: unset;
+    }
+
+    add-to-calendar-button#goueliou-calendar-button::part(.atcb-icon) {
+        margin-left: 20px;
+        margin-right: 20px;
+        flex-grow: 1;
+        flex-shrink: 1;
+        width: auto;
+    }
+}
 
 @media screen and (min-width: 800px)
 /*DESKTOP*/
diff --git a/goueliou/index.html b/goueliou/index.html
@@ -66,6 +66,7 @@
         })();
     </script>
     <!-- End Matomo Code -->
+    <script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>
 </head>
 
 <body class="goueliou-page">
@@ -104,9 +105,13 @@ <h1>Kerlandrier.cc</h1>
         }, {})
         const goueliouElement = document.getElementById("goueliou");
         // Grist Timestamp to Readable Date
-            const date_formatted = new Date(timestamp * 1000);
-            const options = { weekday: 'long', day: 'numeric', month: 'short' };
-            return date_formatted.toLocaleDateString('fr-FR', options);
+        function formatDate(timestamp, options) {
+            const date = new Date(timestamp * 1000);
+            const style = { weekday: 'long', day: 'numeric', month: 'short' };
+            if (options == "calendar") {
+                return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+            }
+            return date.toLocaleDateString('fr-FR', style);
         }
         Object.entries(goueliou).forEach(([month, fest]) => {
             // Creation des colonnes Mois
@@ -143,7 +148,31 @@ <h1>Kerlandrier.cc</h1>
 
                 // Nom du festival
                 div.innerHTML = `
-                    <h2 id="gouel-title">${fest[i].Nom}</h2>
+                    <div id="gouel-fest-header">
+                        <h2 id="gouel-title">${fest[i].Nom}</h2>
+
+                        <add-to-calendar-button
+                            styleLight="--btn-background: unset; 
+                                        --btn-text: unset; 
+                                        --font: "Barlow Condensed", sans-serif; 
+
+                            id="goueliou-calendar-button"
+                            name="[Festival] ${fest[i].Nom}"
+                            description=
+                            "<p>Ajouté depuis https://kerlandrier.cc/goueliou/\nWebsite: ${fest[i].Website}\nDescription: ${fest[i].Mots_cles}"
+                            startDate="${formatDate(fest[i].Date_debut, "calendar")}"
+                            endDate="${formatDate(fest[i].Date_fin, "calendar")}"
+                            location="${fest[i].Ville}"
+                            options="['Apple','Google','iCal']"
+                            timeZone="Europe/Paris"
+                            trigger="click"
+                            hideBackground="true"
+                            iCalFileName="Reminder-Event"
+                            hideTextLabelButton	= "true"
+                            size="3"
+                            language="fr"
+                        />
+                    </div>
                 `;
                 // Lien vers le site du festival
                 if (fest[i].Website) {
