diff --git a/aleksis/apps/chronos/frontend/components/calendar_feeds/details/LessonDetails.vue b/aleksis/apps/chronos/frontend/components/calendar_feeds/details/LessonDetails.vue
index 2f014dceda872564f1d120cbccd1c6b8fe404399..6fb7e652857d46f68ba418f92455a1a8b5ead9c2 100644
--- a/aleksis/apps/chronos/frontend/components/calendar_feeds/details/LessonDetails.vue
+++ b/aleksis/apps/chronos/frontend/components/calendar_feeds/details/LessonDetails.vue
@@ -100,6 +100,18 @@
           </v-list-item-title>
         </v-list-item-content>
       </v-list-item>
+      <template v-for="detail in additionalDetails">
+        <v-divider inset />
+        <v-list-item>
+          <v-list-item-content>
+            <component
+              :is="detail.component"
+              :key="detail.key"
+              :lesson="selectedEvent"
+            />
+          </v-list-item-content>
+        </v-list-item>
+      </template>
       <v-card-actions class="flex-wrap" style="gap: 0.5em">
         <amend-lesson
           v-if="selectedEvent"
@@ -149,6 +161,11 @@ export default {
         (action) => action.shouldDisplay.call(this, this.selectedEvent),
       );
     },
+    additionalDetails() {
+      return collections.chronosLessonEventCalendarAdditionalDetails.items.filter(
+        (detail) => detail.shouldDisplay.call(this, this.selectedEvent),
+      );
+    },
   },
 };
 </script>
diff --git a/aleksis/apps/chronos/frontend/components/calendar_feeds/mixins/lessonEventAdditionalDetailsMixin.js b/aleksis/apps/chronos/frontend/components/calendar_feeds/mixins/lessonEventAdditionalDetailsMixin.js
new file mode 100644
index 0000000000000000000000000000000000000000..b08c58d1b5cd85c93dc21f25306e1872232f1929
--- /dev/null
+++ b/aleksis/apps/chronos/frontend/components/calendar_feeds/mixins/lessonEventAdditionalDetailsMixin.js
@@ -0,0 +1,8 @@
+export default {
+  props: {
+    lesson: {
+      type: Object,
+      required: true,
+    },
+  },
+};
diff --git a/aleksis/apps/chronos/frontend/index.js b/aleksis/apps/chronos/frontend/index.js
index 2333a2d64b36c12e60e2f9288dada8a8aa889336..6d7b59e5347e41ad7016da500847efed502a7fbd 100644
--- a/aleksis/apps/chronos/frontend/index.js
+++ b/aleksis/apps/chronos/frontend/index.js
@@ -24,6 +24,26 @@ export const collections = [
     name: "lessonEventCalendarAdditionalActions",
     type: Object,
   },
+  /**
+   * List of components that show additional details for Lessons
+   * and Substitutions in the timetable/calendar.
+   *
+   * An object in this list looks like this:
+   * ```js
+   * {
+   *     component: () => import("foo.vue"),
+   *     shouldDisplay: (lessonEvent) => true || false,
+   *     key: "shouldBeUnique",
+   * }
+   * ```
+   *
+   * Please use the lessonEventAdditionalDetailsMixin
+   * as a base for the component.
+   */
+  {
+    name: "lessonEventCalendarAdditionalDetails",
+    type: Object,
+  },
 ];
 
 export default {