diff --git a/ui/src/timespan/calendar/CalendarPage.tsx b/ui/src/timespan/calendar/CalendarPage.tsx
index 00a2048..6543084 100644
--- a/ui/src/timespan/calendar/CalendarPage.tsx
+++ b/ui/src/timespan/calendar/CalendarPage.tsx
@@ -366,14 +366,19 @@ const getElementContent = (event: EventApi, stop: () => void): string => {
     }
     const clamp = (amount: number) =>
         `<span class="ellipsis" title="${event.title}" style="-webkit-line-clamp: ${amount}">${event.title}</span>`;
+
+    const running = hasEnd ? `<span style="float: right">${timeRunningCalendar(start, end)}</span>` : '';
+    const date = `${start.format('LT')} - ${hasEnd ? end.format('LT') : 'now'} ${running}`;
     if (lines < 2) {
-        return `<span class="ellipsis-single" title="${event.title}">${event.title}</span>${stopButton}`;
+        return event.title ? `<span class="ellipsis-single" title="${event.title}">${event.title}</span>${stopButton}` : date;
     }
     if (lines === 2) {
-        return `${clamp(2)}${stopButton}`;
+        if (hasEnd) {
+            return `${date}<span class="ellipsis-single" title="${event.title}">${event.title}</span>${stopButton}`;
+        } else {
+            return `${clamp(2)}${stopButton}`;
+        }
     }
 
-    const running = hasEnd ? `<span style="float: right">${timeRunningCalendar(start, end)}</span>` : '';
-    const date = `${start.format('LT')} - ${hasEnd ? end.format('LT') : 'now'} ${running}`;
     return `${date}<br/>${clamp(lines - 1)}${stopButton}`;
 };
diff --git a/ui/src/timespan/timeutils.ts b/ui/src/timespan/timeutils.ts
index 172508f..24876ba 100644
--- a/ui/src/timespan/timeutils.ts
+++ b/ui/src/timespan/timeutils.ts
@@ -13,7 +13,7 @@ export const timeRunningCalendar = (date: moment.Moment, now: moment.Moment) =>
         return '<1m';
     }
 
-    return prettyMs(d * 1000, {compact: true}).substring(1);
+    return prettyMs(d * 1000, {unitCount: d < 60 * 24 ? 1 : 2}).substring(1);
 };
 
 export const uglyConvertToLocalTime = (m: moment.Moment): moment.Moment => {