diff --git a/ui/src/components/calendar/EventItem.vue b/ui/src/components/calendar/EventItem.vue
index d699a84..f179de0 100644
--- a/ui/src/components/calendar/EventItem.vue
+++ b/ui/src/components/calendar/EventItem.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { DateTime } from "luxon";
+import { DateTime, DurationLikeObject } from "luxon";
 import Event from "./event";
 import EventDate from "./EventDate.vue";
 
@@ -48,8 +48,24 @@ export default class EventItem extends Vue {
       DateTime.DATETIME_MED_WITH_WEEKDAY
     );
 
-    // TODO: if applicable, include days and/or minutes.
-    const duration_string = this.event.duration.shiftTo("hours").toHuman();
+    // decide which duration units to include
+    let units: Array<keyof DurationLikeObject> = ["hours"];
+
+    if (this.event.duration.as("days") >= 1) {
+      // include days if duration is at least one day
+      units.push("days");
+    }
+
+    if (!Number.isInteger(this.event.duration.as("hours"))) {
+      // include minutes if duration in hours is not a whole number
+      units.push("minutes");
+    }
+
+    const duration_string = this.event.duration
+      // "..." is the spread operator
+      .shiftTo(...units)
+      .mapUnits((x) => Math.round(x))
+      .toHuman();
 
     return locale_string + " (" + duration_string + ")";
   }