beat calendar styling into submission to support multi day events

api/src/services/calendarService.ts

@@ -65,7 +65,7 @@ export async function cancelEvent(eventID: number) {
 
 export async function getShortEventsInRange(startDate: string, endDate: string): Promise<CalendarEventShort[]> {
     const sql = `
-        SELECT id, name, start, end, color, cancelled
+        SELECT id, name, start, end, color, cancelled, full_day
         FROM calendar_events
         WHERE start BETWEEN ? AND ?
         ORDER BY start ASC

shared/types/calendar.ts

@@ -35,4 +35,5 @@ export interface CalendarEventShort {
     end: Date;
     color: string;
     cancelled: boolean;
+    full_day: boolean;
 }

ui/src/components/calendar/CreateCalendarEvent.vue

@@ -44,7 +44,6 @@ function roundToNextHour(d = new Date()) {
     return t
 }
 
-
 import { calendarEventSchema, parseLocalDateTime } from '@shared/schemas/calendarEventSchema'
 import { createCalendarEvent } from "@/api/calendar"
 const formSchema = toTypedSchema(calendarEventSchema)

ui/src/pages/Calendar.vue

@@ -264,7 +264,7 @@ onMounted(() => {
     filter: grayscale(100%);
 }
 
-.calendar-card {
+:global(.calendar-card) {
     background: var(--color-card);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-xl);
@@ -292,7 +292,9 @@ onMounted(() => {
     /* no internal scroll for month grid */
 }
 
-
+:global(.fc-daygrid:hover) {
+    cursor: pointer;
+}
 
 /* Subtle borders everywhere */
 :global(.fc .fc-scrollgrid),
@@ -355,6 +357,7 @@ onMounted(() => {
     font-weight: 600;
     font-size: 12px;
     text-decoration: none;
+    height: 26px;
 }
 
 /* Today: soft background + stronger number */
@@ -378,7 +381,6 @@ onMounted(() => {
     background: transparent;
     color: var(--color-foreground);
     border-radius: 4px;
-    padding: 4px 8px;
     margin: 2px 6px;
     text-decoration: none;
     transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
@@ -389,14 +391,7 @@ onMounted(() => {
     border-color: color-mix(in oklab, var(--color-foreground) 12%, var(--color-border));
 }
 
-/* One-line custom pill content (our renderer) */
-:global(.ev-pill) {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    min-width: 0;
-    color: inherit;
-}
+
 
 :global(.ev-dot) {
     width: 8px;
@@ -423,16 +418,14 @@ onMounted(() => {
 }
 
 /* One-line custom pill */
-.ev-pill {
+:global(.ev-pill) {
     display: flex;
     align-items: center;
     gap: 6px;
     min-width: 0;
     padding: 4px 8px;
-    border-radius: 14px;
-    border: 1px solid var(--color-border);
-    background: color-mix(in oklab, var(--color-primary) 14%, transparent);
-    color: var(--color-foreground);
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--ev-color) 15%, transparent);
     text-decoration: none;
     transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
 }
@@ -469,15 +462,17 @@ onMounted(() => {
     color: var(--color-primary-foreground);
 }
 
+:global(.fc-daygrid-top) {
+    margin-bottom: 2px;
+}
+
 /* --- Replace the default today highlight with a round badge --- */
 :global(.fc .fc-daygrid-day.fc-day-today) {
     background: transparent;
 }
 
 :global(.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number) {
-    display: inline-block;
-    padding: 2px 8px;
-    border-radius: 9999px;
+    border-radius: 6px;
     background: color-mix(in oklab, var(--color-primary) 100%, transparent);
     font-weight: 700;
     text-decoration: none;