diff --git a/aleksis/core/frontend/components/calendar/BaseCalendarFeedDetails.vue b/aleksis/core/frontend/components/calendar/BaseCalendarFeedDetails.vue
index 1d0fdd7adb5f7459cb30dce1cc219780c5b9d33e..a9dc64fdb9bfd5713d68d2ebf926b78ad255ea51 100644
--- a/aleksis/core/frontend/components/calendar/BaseCalendarFeedDetails.vue
+++ b/aleksis/core/frontend/components/calendar/BaseCalendarFeedDetails.vue
@@ -14,16 +14,9 @@
         </v-toolbar-title>
         <v-spacer></v-spacer>
         <slot name="badge" :selected-event="selectedEvent">
-          <v-chip
+          <cancelled-calendar-status-chip
             v-if="selectedEvent.status === 'CANCELLED' && !withoutBadge"
-            color="error"
-            label
-          >
-            <v-avatar left>
-              <v-icon>mdi-cancel</v-icon>
-            </v-avatar>
-            {{ $t("calendar.cancelled") }}
-          </v-chip>
+          />
         </slot>
       </v-toolbar>
       <slot name="time" :selected-event="selectedEvent">
@@ -64,9 +57,11 @@
 
 <script>
 import calendarFeedDetailsMixin from "../../mixins/calendarFeedDetails.js";
+import CancelledCalendarStatusChip from "./CancelledCalendarStatusChip.vue";
 
 export default {
   name: "BaseCalendarFeedDetails",
+  components: { CancelledCalendarStatusChip },
   mixins: [calendarFeedDetailsMixin],
 };
 </script>
diff --git a/aleksis/core/frontend/components/calendar/CalendarStatusChip.vue b/aleksis/core/frontend/components/calendar/CalendarStatusChip.vue
new file mode 100644
index 0000000000000000000000000000000000000000..679749135dd12e302f18a797af4d8fb169a44470
--- /dev/null
+++ b/aleksis/core/frontend/components/calendar/CalendarStatusChip.vue
@@ -0,0 +1,24 @@
+<script>
+export default {
+  name: "CalendarStatusChip",
+  props: {
+    color: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <v-chip :color="color" label>
+    <v-avatar left>
+      <v-icon>{{ icon }}</v-icon>
+    </v-avatar>
+    <slot></slot>
+  </v-chip>
+</template>
diff --git a/aleksis/core/frontend/components/calendar/CancelledCalendarStatusChip.vue b/aleksis/core/frontend/components/calendar/CancelledCalendarStatusChip.vue
new file mode 100644
index 0000000000000000000000000000000000000000..00b816943654453690f32da1db95e14f57b7dce7
--- /dev/null
+++ b/aleksis/core/frontend/components/calendar/CancelledCalendarStatusChip.vue
@@ -0,0 +1,14 @@
+<script>
+import CalendarStatusChip from "./CalendarStatusChip.vue";
+
+export default {
+  name: "CancelledCalendarStatusChip",
+  components: { CalendarStatusChip },
+};
+</script>
+
+<template>
+  <calendar-status-chip icon="mdi-cancel" color="error">
+    {{ $t("calendar.cancelled") }}
+  </calendar-status-chip>
+</template>