diff --git a/src/components/event-dialog.tsx b/src/components/event-dialog.tsx index 8d00959..64ea250 100644 --- a/src/components/event-dialog.tsx +++ b/src/components/event-dialog.tsx @@ -1,5 +1,6 @@ "use client"; +import { addHours, addMinutes, isValid, parseISO } from "date-fns"; import { LucideMapPin } from "lucide-react"; import { DateTimePicker } from "@/components/date-time-picker"; import { RecurrencePicker } from "@/components/recurrence-picker"; @@ -68,6 +69,26 @@ export const EventDialog = ({ onOpenChange(val); }; + const DURATIONS = [ + { label: "+15 min", minutes: 15 }, + { label: "+30 min", minutes: 30 }, + { label: "+1 hour", minutes: 60 }, + { label: "+3 hours", minutes: 180 }, + ]; + + const handleApplyDuration = (minutes: number) => { + if (!start) return; + const base = parseISO(start); + if (!isValid(base)) return; + const next = + minutes < 60 ? addMinutes(base, minutes) : addHours(base, minutes / 60); + const pad = (n: number) => String(n).padStart(2, "0"); + const result = allDay + ? `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}` + : `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}T${pad(next.getHours())}:${pad(next.getMinutes())}:00`; + setEnd(result); + }; + return ( @@ -146,6 +167,21 @@ export const EventDialog = ({ allDay={allDay} placeholder="Start date" /> + {!allDay && ( +
+ {DURATIONS.map(({ label, minutes }) => ( + + ))} +
+ )}