diff --git a/_includes/components/add_to_calendar.njk b/_includes/components/add_to_calendar.njk
index a568d4f..766d7df 100644
--- a/_includes/components/add_to_calendar.njk
+++ b/_includes/components/add_to_calendar.njk
@@ -1,3 +1,3 @@
-<a class="fr-btn" href="/calendar/{{ title | slugify }}-{{ date | htmlDateString }}.ics">
+<a class="fr-btn" href="/calendar/{{ collections.events | findBySlug(page.fileSlug) | slugifyEvent }}.ics">
   {{ "add_to_calendar" | i18n }}
 </a>
\ No newline at end of file
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index e651589..16bd2fd 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -29,6 +29,8 @@
   <title>{{ title or metadata.title }}</title>
 </head>
 <body id="top">
+{% getBundle "js", "top" %}
+
 {% include "templates/header.njk" %}
 
 <main id="content">
@@ -42,6 +44,18 @@
 
 <!-- Current page: {{ page.url | htmlBaseUrl }} -->
 
+{% js "top" %}
+  <script>
+      // Fix FOUC in dark mode
+      setDarkBeforeRender = () => {
+          const localScheme = localStorage.getItem('scheme')
+          if (localScheme === 'dark' || (localScheme === 'system' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+              document.documentElement.setAttribute('data-fr-theme', 'dark');
+          }
+      }
+      setDarkBeforeRender();
+  </script>
+{% endjs %}
 {% js "body" %}
   <script>
       const SEARCH_RESULTS_URL = "{{ "/search-results/" | locale_url(page.lang) | htmlBaseUrl }}";
diff --git a/content/calendar/calendar.njk b/content/calendar/calendar.njk
index 2b853ff..a99d459 100644
--- a/content/calendar/calendar.njk
+++ b/content/calendar/calendar.njk
@@ -1,29 +1,4 @@
 ---
 permalink: /calendar.ics
 ---
-{% set events %}
-  [
-  {% for event in collections.event %}
-    {% set year = event.data.date | getYear %}
-    {% set month = event.data.date | getMonth %}
-    {% set day = event.data.date | getDay %}
-    {% set hour = event.data.date | getHour %}
-    {% set minute = event.data.date | getMinute %}
-    {
-    {% if hour == 0 and minute == 0 %}
-      "start": [ {{ year }}, {{ month }}, {{ day }} ],
-      "end": [ {{ year }}, {{ month }}, {{ day + 1 }} ],
-    {% else %}
-      "start": [ {{ year }}, {{ month }}, {{ day }}, {{ hour }}, {{ minute }} ],
-      "duration": { "minutes": {{ event.data.duration or 60 }} },
-    {% endif %}
-    "title": "{{ event.data.title }}",
-    "description": "{{ event.data.description }}",
-    "location": "{{ event.data.location }}",
-    "organizer": { "name": "{{ metadata.author.name }}", "email": "{{ metadata.author.email }}" }
-    }
-    {% if not loop.last %},{% endif %}
-  {% endfor %}
-  ]
-{% endset %}
-{{ events | createEvents }}
+{{ collections.events | toCalendar }}
diff --git a/content/calendar/event.njk b/content/calendar/event.njk
index ce3d8a3..3cb74f1 100644
--- a/content/calendar/event.njk
+++ b/content/calendar/event.njk
@@ -1,25 +1,7 @@
 ---
 pagination:
-  data: collections.event
+  data: collections.events
   size: 1
-permalink: "calendar/{{ pagination.items[0].data.title | slugify }}-{{ pagination.items[0].data.date | htmlDateString }}.ics"
+permalink: "calendar/{{ pagination.items[0] | slugifyEvent }}.ics"
 ---
-{% set event %}
-  {% set currentEvent = pagination.items[0] %}
-  {% set year = currentEvent.data.date | getYear %}
-  {% set month = currentEvent.data.date | getMonth %}
-  {% set day = currentEvent.data.date | getDay %}
-  {% set hour = currentEvent.data.date | getHour %}
-  {% set minute = currentEvent.data.date | getMinute %}
-  {
-  "start": [
-  {{ year }}, {{ month }}, {{ day }}, {{ hour }}, {{ minute }}
-  ],
-  "duration": { "minutes": {{ currentEvent.data.duration or 0 }} },
-  "title": "{{ currentEvent.data.title }}",
-  "description": "{{ currentEvent.data.description }}",
-  "location": "{{ currentEvent.data.location }}",
-  "organizer": { "name": "{{ metadata.author.name }}", "email": "{{ metadata.author.email }}" }
-  }
-{% endset %}
-{{ event | createEvent }}
+{% set currentEvent = pagination.items[0] %}{{ currentEvent | toCalendarEvent }}
diff --git a/content/fr/blog/posts/calendrier.md b/content/fr/blog/posts/calendrier.md
deleted file mode 100644
index f0b5e8e..0000000
--- a/content/fr/blog/posts/calendrier.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Calendrier
-description: Comment utiliser le calendrier d'événements d'eleventy-dsfr ?
-date: git Last Modified
-tags:
-  - fonctionnalité
----
-
-La présence des fichiers de template dans [`content/calendar`](https://github.com/codegouvfr/eleventy-dsfr/tree/main/content/calendar) assure la création d'un fichier de calendrier global [`calendar.ics`](/calendar.ics) à la racine du site, et des fichiers de calendrier `.ics` correspondants aux événements.
-
-Les articles libellés avec `event` sont automatiquement ajoutés au calendrier, et leurs fichiers d'événement de calendrier `.ics` correspondants sont automatiquement créés.
-
-Il existe un composant bouton `add_to_calendar` qui contient un lien vers le téléchargement du fichier d'événement.
-
-[Voir un exemple d'événement](/fr/blog/evenement/){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}
\ No newline at end of file
diff --git a/content/fr/blog/posts/evenement.md b/content/fr/blog/posts/evenement.md
index f8f369a..4011463 100644
--- a/content/fr/blog/posts/evenement.md
+++ b/content/fr/blog/posts/evenement.md
@@ -1,25 +1,17 @@
 ---
 title: Événement exemple
 description: Comment ajouter un événement au calendrier ?
-date: 2023-09-10T09:00:00.0Z
-duration: 50
-location: online
+date: git Last Modified
 tags:
-- event
+  - events
+  - fonctionnalité
+start: 2023-09-10
 ---
 Voici un exemple d'événement qui sera ajouté au calendrier global accessible à l'adresse [/calendar.ics](/calendar.ics), et dont on peut télécharger l'événement de calendrier correspondant à l'adresse [/calendar/evenement-exemple-2023-09-10.ics](/calendar/evenement-exemple-2023-09-10.ics).
 
-## Variables du template
+Ce calendrier est généré via le plugin `eleventy-plugin-calendar`.
 
-```json
-{
-  "title": "string",
-  "description": "string",
-  "date": "date", // ex. 2001-12-15T02:59:43.1Z
-  "duration": "number",
-  "location": "string"
-}
-```
+[Voir la documentation du plugin](https://github.com/codegouvfr/eleventy-plugin-calendar){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}
 
 ## Exemple d'utilisation du composant bouton `add_to_calendar`
 
@@ -33,5 +25,3 @@ Voici un exemple d'événement qui sera ajouté au calendrier global accessible
 <p>
     {% include "components/add_to_calendar.njk" %}
 </p>
-
-[Voir la section sur la fonctionnalité de calendrier](/fr/blog/fonctionnalités/#calendrier){.fr-link .fr-fi-arrow-right-line .fr-link--icon-right}
diff --git a/content/fr/blog/posts/navigation.md b/content/fr/blog/posts/navigation.md
index d00b23a..3227169 100644
--- a/content/fr/blog/posts/navigation.md
+++ b/content/fr/blog/posts/navigation.md
@@ -8,7 +8,7 @@ tags:
 
 `eleventy-dsfr` utilise le [système de navigation d'Eleventy](https://www.11ty.dev/docs/plugins/navigation/).
 
-## Mise en place d'une navigation de niveau 2
+## Navigation de niveau 2
 
 Pour mettre en place une navigation de niveau 2, positionner la variable `parent` avec la valeur de la `key` du parent.
 Par exemple, dans le fichier [`content/fr/about/index.md`](https://github.com/codegouvfr/eleventy-dsfr/tree/main/content/fr/about/index.md) :
diff --git a/eleventy-dsfr.png b/eleventy-dsfr.png
index 47b681c..73a2cf7 100644
Binary files a/eleventy-dsfr.png and b/eleventy-dsfr.png differ
diff --git a/eleventy.config.calendar.js b/eleventy.config.calendar.js
deleted file mode 100644
index 4c39bc6..0000000
--- a/eleventy.config.calendar.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const {DateTime} = require("luxon");
-const ics = require('ics');
-
-const compareEventDate = (event) => {
-    const eventTime = DateTime.fromJSDate(event.data.date, {zone: "utc"}).toMillis();
-    const currentTime = DateTime.now().toMillis();
-    return eventTime - currentTime;
-}
-
-module.exports = eleventyConfig => {
-    eleventyConfig.addFilter("createEvents", (jsonEvents) => {
-        const {error, value} = ics.createEvents(JSON.parse(jsonEvents));
-        return value;
-    });
-
-    eleventyConfig.addFilter("createEvent", (jsonEvent) => {
-        const {error, value} = ics.createEvent(JSON.parse(jsonEvent));
-        return value;
-    });
-
-    eleventyConfig.addFilter("previousEvents", (events) => {
-        return (events || []).filter(event => compareEventDate(event) < 0);
-    });
-
-    eleventyConfig.addFilter("nextEvents", (events) => {
-        return (events || []).filter(event => compareEventDate(event) > 0);
-    });
-}
\ No newline at end of file
diff --git a/eleventy.config.js b/eleventy.config.js
index 36fccf8..9f73e90 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -10,6 +10,7 @@ const pluginNavigation = require("@11ty/eleventy-navigation");
 const {EleventyHtmlBasePlugin} = require("@11ty/eleventy");
 const {EleventyI18nPlugin} = require("@11ty/eleventy");
 const i18n = require("@codegouvfr/eleventy-plugin-i18n");
+const pluginCalendar = require("@codegouvfr/eleventy-plugin-calendar");
 
 const customMarkdownContainers = require("./markdown-custom-containers");
 
@@ -37,7 +38,6 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}");
 
     // App plugins
-    eleventyConfig.addPlugin(require("./eleventy.config.calendar.js"));
     eleventyConfig.addPlugin(require("./eleventy.config.drafts.js"));
     eleventyConfig.addPlugin(require("./eleventy.config.i18n.js"));
     eleventyConfig.addPlugin(require("./eleventy.config.images.js"));
@@ -61,6 +61,7 @@ module.exports = function (eleventyConfig) {
             "en": "fr"
         }
     });
+    eleventyConfig.addPlugin(pluginCalendar);
 
     // Custom collections
     eleventyConfig.addCollection("allSortedByPathAsc", function(collectionApi) {
@@ -134,6 +135,10 @@ module.exports = function (eleventyConfig) {
             .indexOf(tag) === -1);
     });
 
+    eleventyConfig.addFilter("findBySlug", function find(collection = [], slug = "") {
+        return collection.find(post => post.fileSlug === slug);
+    });
+
     // Customize Markdown library settings:
     eleventyConfig.amendLibrary("md", mdLib => {
         mdLib.use(markdownItAnchor, {
diff --git a/package.json b/package.json
index c78fdf3..3c97d4b 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@11ty/eleventy-plugin-bundle": "^1.0.4",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
+    "@codegouvfr/eleventy-plugin-calendar": "^3.0.4",
     "@codegouvfr/eleventy-plugin-i18n": "^0.1.3",
     "@gouvfr/dsfr": "^1.9.3",
     "chalk": "^4.1.2",
