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

built create event UI

Browse Source
This commit is contained in:
ajdj100
2025-10-11 14:04:27 -04:00
parent e158427c93
commit b268ee46e1
3 changed files with 318 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import { X, Clock, MapPin, User, ListTodo, ChevronLeft, ChevronRight, Plus } from 'lucide-vue-next'
import CreateCalendarEvent from '@/components/calendar/CreateCalendarEvent.vue'
const monthLabels = [
'January', 'February', 'March', 'April', 'May', 'June',
@@ -63,16 +64,19 @@ function onEventClick(arg: any) {
panelOpen.value = true
}
const dialogRef = ref<any>(null)
// NEW: handle day/time slot clicks to start creating an event
function onDateClick(arg: { dateStr: string }) {
dialogRef.value?.openDialog();
// For now, just open the panel with a draft payload.
activeEvent.value = {
id: '__draft__',
title: 'New event',
start: arg.dateStr,
extendedProps: { draft: true }
}
panelOpen.value = true
// activeEvent.value = {
// id: '__draft__',
// title: 'New event',
// start: arg.dateStr,
// extendedProps: { draft: true }
// }
// panelOpen.value = true
}
const calendarOptions = ref({
@@ -127,6 +131,8 @@ const calendarOptions = ref({
},
})
//@ts-ignore (shhh)
calendarOptions.value.datesSet = onDatesSet
watch(panelOpen, async () => {
@@ -165,6 +171,8 @@ const ext = computed(() => activeEvent.value?.extendedProps ?? {})
</script>
<template>
<CreateCalendarEvent ref="dialogRef"></CreateCalendarEvent>
<div class="flex">
<div class="flex-1 min-h-0 mt-5">
<div class="h-[80vh] min-h-0">
@@ -196,20 +204,20 @@ const ext = computed(() => activeEvent.value?.extendedProps ?? {})
<!-- Right: nav + today + create -->
<div class="flex items-center gap-2">
<button
class="inline-flex h-8 w-8 items-center justify-center rounded-md border hover:bg-muted/40"
class="cursor-pointer inline-flex h-8 w-8 items-center justify-center rounded-md border hover:bg-muted/40"
aria-label="Previous month" @click="goPrev">
<ChevronLeft class="h-4 w-4" />
</button>
<button
class="inline-flex h-8 w-8 items-center justify-center rounded-md border hover:bg-muted/40"
class="cursor-pointer inline-flex h-8 w-8 items-center justify-center rounded-md border hover:bg-muted/40"
aria-label="Next month" @click="goNext">
<ChevronRight class="h-4 w-4" />
</button>
<button class="ml-1 rounded-md border px-3 py-1.5 text-sm hover:bg-muted/40" @click="goToday">
<button class="cursor-pointer ml-1 rounded-md border px-3 py-1.5 text-sm hover:bg-muted/40" @click="goToday">
Today
</button>
<button
class="ml-1 inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:opacity-90"
class="cursor-pointer ml-1 inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:opacity-90"
@click="onCreateEvent">
<Plus class="h-4 w-4" />
Create