17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 22 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

beat calendar styling into submission to support multi day events

Browse Source
This commit is contained in:
ajdj100
2025-11-27 15:19:05 -05:00
parent 0b3a95cdc0
commit 33fcb16427
4 changed files with 16 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
api/src/services/calendarService.ts
View File

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

1
shared/types/calendar.ts
View File

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

1
ui/src/components/calendar/CreateCalendarEvent.vue
View File

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

33
ui/src/pages/Calendar.vue
View File

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