6a:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 7b:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 7c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-yellow-border",":"]}]}] 53:["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f2b827"}] 54:["$","div","event-yellow-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-yellow-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fff0be"}]]}] 55:["$","div","event-green",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-green",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#027b27"}]]}] 56:["$","div","event-green-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-green-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#49ca81"}]]}] 57:["$","div","event-green-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-green-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#deffe3"}]]}] 58:["$","div","event-blue",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-blue",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006cbf"}]]}] 59:["$","div","event-blue-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-blue-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#32a5e5"}]]}] 5a:["$","div","event-blue-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-blue-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e2f9ff"}]]}] 5b:["$","div","event-purple",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-purple",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#7733d2"}]]}] 5c:["$","div","event-purple-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-purple-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#9950ff"}]]}] 5d:["$","div","event-purple-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-purple-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#feecff"}]]}] 5e:["$","div","event-gray",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-gray",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#5f6061"}]]}] 5f:["$","div","event-gray-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-gray-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#b3b4b4"}]]}] 60:["$","div","event-gray-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-gray-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f6f4f3"}]]}] 61:["$","div","calendar-weekend",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","calendar-weekend",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#fcfcfc"}]]}] 62:["$","div","calendar-current-week",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","calendar-current-week",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#edece9"}]]}] 63:["$","div","calendar-day-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","calendar-day-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#eeece8"}]]}] 64:["$","div","calendar-day-hover-current-week",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","calendar-day-hover-current-week",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e2e1dc"}]]}] 65:["$","$L6a",null,{"orientation":"horizontal"}] 66:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L51",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","event-red",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-red",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d85140"}]]}],["$","div","event-red-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-red-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d85140"}]]}],["$","div","event-red-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-red-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#6c2920"}]]}],["$","div","event-orange",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-orange",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e07040"}]]}],["$","div","event-orange-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-orange-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e07040"}]]}],["$","div","event-orange-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-orange-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#5f3524"}]]}],["$","div","event-yellow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-yellow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d4a83a"}]]}],["$","div","event-yellow-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-yellow-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d4a83a"}]]}],["$","div","event-yellow-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-yellow-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4e3f1b"}]]}],["$","div","event-green",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-green",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#52b577"}]]}],["$","div","event-green-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","event-green-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"$L6b"}]]}],"$L6c","$L6d","$L6e","$L6f","$L70","$L71","$L72","$L73","$L74","$L75","$L76","$L77","$L78","$L79"]}],"$L7a"]}]}]]}] 67:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L51",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","text-xxs",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","text-xxs",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0.625rem"}]]}]]}],["$","$L6a",null,{"orientation":"horizontal"}]]}]}]]}] 68:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L7b",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@utility scrollbar-hide {\n\t-ms-overflow-style: none;\n\tscrollbar-width: none;\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n}\n\n@layer base {\n\t[data-event-id], [data-event-id] * {\n\t\tcursor: var(--cursor, default);\n\t}\n}\n\n@keyframes column-highlight-fade {\n\tfrom {\n\t\tbackground-color: #602c2b;\n\t}\n\tto {\n\t\tbackground-color: transparent;\n\t}\n}\n\n.column-highlight {\n\tanimation: column-highlight-fade 2s ease-out forwards;\n}\n\n@keyframes calendar-loading-slide {\n\tfrom {\n\t\ttransform: translateX(-100%);\n\t}\n\tto {\n\t\ttransform: translateX(300%);\n\t}\n}\n\n.calendar-loading-bar {\n\twidth: 33.333%;\n\tanimation: calendar-loading-slide 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t.column-highlight {\n\t\tanimation: none;\n\t\tbackground-color: #602c2b;\n\t}\n\t.calendar-loading-bar {\n\t\twidth: 100%;\n\t\topacity: 0.5;\n\t\tanimation: none;\n\t}\n}"}]}]]}] 7d:T542e,import type React from "react"; import type { Locale } from "date-fns"; /** * Calendar view mode — "day" shows a single column, "week" shows 7 columns, * "month" a month grid and "agenda" a list of the coming days' events */ export type ViewType = "day" | "week" | "month" | "agenda"; /** * Views drawn by the hourly time grid: "day" (one column) and "week" * (`numberOfDays` columns) */ export type TimeGridView = Extract; /** * Day a week starts on, using the date-fns convention (0 = Sunday ... 6 = Saturday) */ export type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6; /** * Clock style for time labels: 12 ("3 PM", "3:30 PM") or 24 ("15:00") */ export type HourCycle = 12 | 24; /** * View settings for display preferences (toggleable from the view dropdown) */ export interface ViewSettings { showWeekends: boolean; showDeclinedEvents: boolean; showWeekNumbers: boolean; } /** * Represents a single day in the week view */ export interface WeekDay { /** The full Date object for this day */ date: Date; /** Short day name (e.g., "Sun", "Mon") */ dayName: string; /** Day of month (1-31) */ dayNumber: number; /** Whether this day is today */ isToday: boolean; } /** * Represents a single hour slot in the time axis */ export interface HourSlot { /** Hour in 24-hour format (0-23) */ hour: number; /** Formatted label (e.g., "12 AM", "1 PM") */ label: string; } /** * Represents an event reminder */ export interface EventReminder { amount: number; unit: "minutes" | "hours" | "days"; } /** * The fields the calendar needs to place and draw an event. Extend it with * your own fields and pass that type to `CalendarProvider` and * `useCalendar()` to get it back, fully typed, in every callback. */ export interface CalendarEvent { /** Unique identifier for the event */ id: string; /** Event title */ title: string; /** Start date and time */ start: Date; /** End date and time */ end: Date; /** Whether this is an all-day event */ isAllDay?: boolean; /** Event color (for styling) */ color?: EventColor; } /** * Event with the Notion Calendar-style details that the default event details * (popover body and detail panel) and the context menu read and edit. Every * detail is optional; a missing one shows a placeholder. */ export interface DetailedCalendarEvent extends CalendarEvent { /** Calendar ID this event belongs to */ calendarId?: string; /** Optional description */ description?: string; /** Optional location */ location?: string; /** Timezone string (e.g. "GMT-3 Sao Paulo") */ timezone?: string; /** Recurrence rule display string (e.g. "Every week on Thu") */ recurrence?: string; /** Reminders list */ reminders?: EventReminder[]; /** Busy/Free status */ status?: "busy" | "free"; /** Visibility setting */ visibility?: "default" | "public" | "private"; /** Calendar account email for display */ calendarEmail?: string; } /** * Predefined event colors */ export type EventColor = | "red" | "orange" | "yellow" | "green" | "blue" | "purple" | "gray"; /** * Represents a positioned event for rendering in the grid */ export interface PositionedEvent { /** The original event */ event: CalendarEvent; /** Top position as percentage from the day start */ top: number; /** Height as percentage of the day */ height: number; /** Left position as percentage (for overlap handling) */ left: number; /** Width as percentage (for overlap handling) */ width: number; /** Column index when events overlap */ column: number; /** Total columns when events overlap */ totalColumns: number; /** Segment position for multi-day timed events (controls corner rounding) */ segmentPosition?: "start" | "middle" | "end" | "full"; } /** * An event as listed under one day of the agenda. An event that spans * several days is listed under each of them. */ export interface AgendaEntry { /** The original event */ event: CalendarEvent; /** Which of the event's days this is, counting from 1 */ dayIndex: number; /** How many days the event spans (1 for a single-day event) */ dayCount: number; /** * Whether the event fills this whole day: an all-day event, or a day * between the first and last of a multi-day timed event */ isAllDayOnThisDay: boolean; } /** * A day in the agenda and the events listed under it */ export interface AgendaDay { /** Start of the day */ date: Date; /** Its events: whole-day entries first, then by start time */ entries: AgendaEntry[]; } /** * Drag variant for rendering events in different visual states during drag */ export type EventDragVariant = "default" | "ghost" | "dragging" | "placeholder"; /** * State of an in-progress event drag operation */ export interface EventDragState { /** ID of the event being dragged */ eventId: string; /** The original event being dragged (preserved across week navigations) */ event: CalendarEvent; /** Original start time before drag */ originalStart: Date; /** Original end time before drag */ originalEnd: Date; /** Current snapped start time during drag */ currentStart: Date; /** Current snapped end time during drag */ currentEnd: Date; /** Target day for the placeholder (decoupled from currentStart for cross-column drag) */ currentDate: Date; /** Whether the drag threshold has been met */ isDragging: boolean; /** Raw cursor Y position in px (unsnapped, for smooth dragging copy) */ cursorY: number; /** Raw cursor X position in px relative to grid container */ cursorX: number; /** Viewport clientX for fixed-position dragging copy */ clientX: number; /** Viewport clientY for fixed-position dragging copy */ clientY: number; } /** * State of an in-progress event resize operation */ export interface EventResizeState { /** ID of the event being resized */ eventId: string; /** The original event being resized */ event: CalendarEvent; /** Original start time before resize */ originalStart: Date; /** Original end time before resize */ originalEnd: Date; /** Current snapped start time during resize */ currentStart: Date; /** Current snapped end time during resize */ currentEnd: Date; /** Which edge was originally grabbed */ edge: "top" | "bottom"; /** Which edge the cursor is effectively on (flips when crossing anchor) */ effectiveEdge: "top" | "bottom"; /** Whether the drag threshold has been met */ isResizing: boolean; /** Target day column for the end during cross-day bottom resize */ currentEndDate: Date; /** Target day column for the start during cross-day top resize */ currentStartDate: Date; } /** * State of an in-progress all-day event resize operation */ export interface AllDayResizeState { /** ID of the event being resized */ eventId: string; /** The original event being resized */ event: CalendarEvent; /** Original start column index in the buffered days array */ originalStartColumn: number; /** Original end column index in the buffered days array */ originalEndColumn: number; /** Current start column index during resize */ currentStartColumn: number; /** Current end column index during resize */ currentEndColumn: number; /** Which edge is being dragged, or "move" for drag-and-drop */ edge: "left" | "right" | "move"; /** Whether the drag threshold has been met */ isResizing: boolean; /** Viewport-relative cursor X during move (for floating copy) */ clientX?: number; /** Viewport-relative cursor Y during move (for floating copy) */ clientY?: number; /** Offset from cursor to event left edge at mousedown (px) */ cursorOffsetX?: number; /** Offset from cursor to event top edge at mousedown (px) */ cursorOffsetY?: number; } /** * Where a press-to-drag gesture started: the pointerdown for mouse and pen, * the point where the long press completed for touch */ export interface PointerGestureStart { /** Viewport X of the pointer when the gesture started */ clientX: number; /** Viewport Y of the pointer when the gesture started */ clientY: number; /** Pointer that drives the gesture; events from other pointers are ignored */ pointerId: number; /** "mouse", "pen" or "touch" */ pointerType: string; /** Element the press began on (the pointerdown's `currentTarget`) */ element: HTMLElement; } /** * Start and end of a new event created by clicking an empty time slot */ export interface NewEventRange { /** Start of the clicked `snapMinutes` slot */ start: Date; /** * End time (start + NEW_EVENT_DURATION_MINUTES, kept inside the visible * hours and the clicked day) */ end: Date; } /** * Dates a view draws, passed to `onVisibleRangeChange` and returned as * `visibleRange` by `useCalendar()`. Both are local midnights and `end` is * exclusive, so an event is in range when `event.start < end` and * `event.end > start`. */ export interface VisibleRange { /** Midnight that starts the first visible day */ start: Date; /** Midnight after the last visible day (exclusive) */ end: Date; } /** * A calendar events can belong to (e.g. "Work"), listed by the event * context menu's "Block on calendar" submenu */ export interface CalendarInfo { /** Stored in the event's `calendarId` when picked */ id: string; /** Display name */ name: string; /** Swatch color shown beside the name */ color: EventColor; /** Account the calendar belongs to; calendars are grouped under it */ email?: string; } /** * Display and interaction settings set on CalendarProvider, read with * `useCalendarConfig()`. Every field has a default, listed on the matching * provider prop. */ export interface CalendarConfig { /** Minute step that timed-event drag, resize and click-to-create snap to */ snapMinutes: number; /** First hour (0-23) the time grid shows */ dayStartHour: number; /** Hour (1-24) the time grid ends at; the last row is `dayEndHour - 1` */ dayEndHour: number; /** Clock style for every time label */ hourCycle: HourCycle; /** date-fns locale for day names, month names and dates */ locale: Locale; /** Calendars offered by the event context menu */ calendars: CalendarInfo[]; } /** * Where an event's content is drawn. Each placement gives it a different * amount of room: * - "time-grid": a timed block in the day/week hour grid, as tall as the event * - "all-day": a 24px bar in the day/week all-day row * - "month-item": a 20px line for a timed event in a month cell * - "month-bar": a 20px bar for an all-day or multi-day event in month view * - "agenda": a row in the agenda list, as wide as the list */ export type EventContentPlacement = | "time-grid" | "all-day" | "month-item" | "month-bar" | "agenda"; /** * Props passed to `renderEventContent`. The calendar keeps drawing the * event's box (position, color, selection, drag and resize handles); the * returned content fills its inside. */ export interface EventContentProps< TEvent extends CalendarEvent = CalendarEvent, > { /** The event, with its in-progress start and end while dragged or resized */ event: TEvent; /** View the event is drawn in */ view: ViewType; /** Where the content is drawn, which sets how much room it has */ placement: EventContentPlacement; /** Whether the event is selected */ isSelected: boolean; /** Whether the event has already ended */ isPast: boolean; /** Whether this is the copy that follows the pointer while the event is dragged */ isDragging: boolean; /** Whether the event is being resized */ isResizing: boolean; /** * Whether there is room for one line only: true for time-grid blocks * under 40px tall, and always true for the single-line all-day and month * placements */ isCompact: boolean; /** * Time the default content shows: the range in the time grid and the * agenda ("10–11 AM"), the start in month cells and for all-day events * that have one ("9 AM"). Empty where the default content shows no time. */ timeLabel: string; } /** * Props passed to `renderEventDetails` */ export interface EventDetailsRenderProps< TEvent extends CalendarEvent = CalendarEvent, > { /** The selected event */ event: TEvent; /** Closes the popover (clears the selection) */ close: () => void; /** * Whether the event was just created by clicking an empty slot, so its * title should be focused. True on the first render after creation only. */ isNew: boolean; } /** * Custom renderers set on CalendarProvider. Each replaces only the content * it names; leave it out to keep the default. */ export interface CalendarRenderSlots< TEvent extends CalendarEvent = CalendarEvent, > { /** * Renders the inside of an event in the time grid, the all-day row, * month view and the agenda. Defaults to the title and time. */ renderEventContent?: (props: EventContentProps) => React.ReactNode; /** * Renders the body of the event details popover. Defaults to the * Notion-style detail panel, which reads `DetailedCalendarEvent` fields. */ renderEventDetails?: ( props: EventDetailsRenderProps, ) => React.ReactNode; } /** * The `createEvent` prop. Optional while the default event (id, title, * start, end) is a valid `TEvent`; required once `TEvent` adds required * fields, since only the app knows how to fill them. */ type CalendarCreateEventProps = CalendarEvent extends TEvent ? { /** * Builds the event created by clicking an empty time slot. Return * `null` to create nothing. Defaults to a "New event" with a random UUID. */ createEvent?: (range: NewEventRange) => TEvent | null; } : { /** * Builds the event created by clicking an empty time slot. Return * `null` to create nothing. Required because `TEvent` has required * fields the default "New event" can't fill. */ createEvent: (range: NewEventRange) => TEvent | null; }; /** * CalendarProvider props other than `createEvent` */ interface CalendarProviderBaseProps< TEvent extends CalendarEvent, > extends CalendarRenderSlots { /** Events to display (controlled) */ events?: TEvent[]; /** Initial events when `events` is not controlled. Defaults to none */ defaultEvents?: TEvent[]; /** Called with the full next list whenever events change (drag, resize, create, edit) */ onEventsChange?: (events: TEvent[]) => void; /** Active view (controlled) */ view?: ViewType; /** Initial view when `view` is not controlled. Defaults to "week" */ defaultView?: ViewType; /** Called when the view changes */ onViewChange?: (view: ViewType) => void; /** First day of the displayed period (controlled) */ date?: Date; /** * Initial first day when `date` is not controlled. Defaults to the start of * today's period (today in day and agenda views, the start of this week * otherwise). * Today is unknown during server rendering and hydration, so without * `date` or `defaultDate` the provider renders nothing until hydration ends. */ defaultDate?: Date; /** Called when the displayed date changes (navigation or scroll) */ onDateChange?: (date: Date) => void; /** Day the week starts on. Defaults to 0 (Sunday) */ weekStartsOn?: WeekStartsOn; /** * Number of days the week view shows (controlled). Below 7, the columns * start on the current day and prev/next move by that many days; from 7 * up they start on the week's first day and prev/next move by a week. */ numberOfDays?: number; /** Initial number of days when `numberOfDays` is not controlled. Defaults to 7 */ defaultNumberOfDays?: number; /** Called when the number of days changes */ onNumberOfDaysChange?: (numberOfDays: number) => void; /** * Initial display preferences. Unset fields default to showing weekends * and declined events, and hiding week numbers. */ defaultViewSettings?: Partial; /** Minute step that timed-event drag, resize and click-to-create snap to. Defaults to 15 */ snapMinutes?: number; /** * First hour (0-23) the day and week views show. Events before it are * clipped at the top edge (hidden when they end before it), and drag, * resize and click-to-create stay inside the range. Defaults to 0 */ dayStartHour?: number; /** * Hour (1-24) the day and week views end at, after `dayStartHour`. Events * after it are clipped at the bottom edge (hidden when they start after * it). Defaults to 24 */ dayEndHour?: number; /** Clock style for time labels: 12 ("3 PM") or 24 ("15:00"). Defaults to 12 */ hourCycle?: HourCycle; /** * date-fns locale for day names, month names, dates and week numbers. * Defaults to `enUS` */ locale?: Locale; /** * Calendars the event context menu offers under "Block on calendar". * The submenu is hidden when empty. Defaults to none */ calendars?: CalendarInfo[]; /** Called after a click-created event is added */ onEventCreate?: (event: TEvent) => void; /** Called after an event is changed (drag, resize, or an edit in the details) */ onEventUpdate?: (event: TEvent) => void; /** Called whenever an event is selected (clicked, or just created) */ onEventSelect?: (eventId: string) => void; /** * Called with the dates the view draws: once after it mounts, then each * time they change (navigation, a view switch, a settled scroll). Never * twice in a row for the same range. Use it to fetch events by range. */ onVisibleRangeChange?: (range: VisibleRange) => void; /** * Shows a thin progress bar under the day headers of every view, e.g. * while events for a new range load. The calendar stays usable. * Defaults to false */ loading?: boolean; children?: React.ReactNode; } /** * Props for CalendarProvider. Stateful values come in shadcn/Radix-style * pairs: pass `value` + `onValueChange` to control them, or `defaultValue` * (or nothing) to let the provider own them. `TEvent` is the app's event * type (`CalendarEvent` plus its own fields); callbacks receive it as-is. */ export type CalendarProviderProps< TEvent extends CalendarEvent = CalendarEvent, > = CalendarProviderBaseProps & CalendarCreateEventProps; /** * Calendar state and actions returned by `useCalendar()` */ export interface CalendarContextValue< TEvent extends CalendarEvent = CalendarEvent, > { /** All events */ events: TEvent[]; /** Active view */ view: ViewType; /** First day of the displayed period */ currentDate: Date; /** Day the week starts on */ weekStartsOn: WeekStartsOn; /** Number of days the week view shows */ numberOfDays: number; /** Display preferences toggled from the view menu */ viewSettings: ViewSettings; /** * Days the day/week view currently shows, updated live while it scrolls * horizontally, or the days the agenda covers. Empty in month view. */ visibleDays: Date[]; /** * First day of the month the month view shows (follows its vertical * scroll), or `null` before month view has rendered */ displayMonth: Date | null; /** * Dates the view draws (end exclusive): the visible days in day and week * view, the whole six-week grid in month view, trimmed to the first and * last weekday when month view hides weekends. Follows settled * navigation, so a horizontal scroll moves it once it snaps. */ visibleRange: VisibleRange; /** Whether the provider's `loading` prop is set */ loading: boolean; /** ID of the selected event, or `null` */ selectedEventId: string | null; /** The selected event, or `null` when nothing (or a missing event) is selected */ selectedEvent: TEvent | null; /** Day briefly highlighted after `showDay`, or `null` */ highlightedDate: Date | null; /** Month name for the header (e.g. "October") */ monthName: string; /** Four-digit year for the header (e.g. "2026") */ year: string; /** Week number of the displayed week */ weekNumber: number; /** Goes to the period that contains today */ goToToday: () => void; /** Goes back one period (day, week, month or agenda range, by view) */ goToPrev: () => void; /** Goes forward one period (day, week, month or agenda range, by view) */ goToNext: () => void; /** Sets the first displayed day as given (no snapping to a week start) */ goToDate: (date: Date) => void; /** Switches the view, snapping the date to the new view's period */ switchView: (view: ViewType) => void; /** Sets how many days the week view shows */ setNumberOfDays: (numberOfDays: number) => void; /** Selects an event */ selectEvent: (eventId: string) => void; /** Clears the selection (closes the event popover) */ clearSelection: () => void; /** * Creates an event for a clicked slot via `createEvent`, selects it and * focuses its title */ addEventFromRange: (range: NewEventRange) => void; /** Replaces the event with the same id */ updateEvent: (event: TEvent) => void; /** Toggles weekend columns */ toggleWeekends: () => void; /** Toggles declined events */ toggleDeclinedEvents: () => void; /** Toggles week numbers */ toggleWeekNumbers: () => void; /** Opens the week containing `date` and briefly highlights that day */ showDay: (date: Date) => void; } 7e:T2d52,import type React from "react"; import type { AllDayResizeState, CalendarEvent, CalendarProviderProps, EventDragState, EventDragVariant, EventResizeState, HourSlot, NewEventRange, PositionedEvent, TimeGridView, WeekDay, } from "./calendar-types"; // Re-export all shared types for backward compatibility export type { ViewType, TimeGridView, WeekStartsOn, HourCycle, ViewSettings, WeekDay, HourSlot, AgendaEntry, AgendaDay, EventReminder, CalendarEvent, DetailedCalendarEvent, EventColor, PositionedEvent, EventDragVariant, EventDragState, EventResizeState, AllDayResizeState, NewEventRange, PointerGestureStart, VisibleRange, CalendarInfo, CalendarConfig, EventContentPlacement, EventContentProps, EventDetailsRenderProps, CalendarRenderSlots, CalendarProviderProps, CalendarContextValue, } from "./calendar-types"; /** * Event popover options shared by the time grid views and MonthView */ export interface EventPopoverProps { /** * Whether the selected event opens a details popover beside it. Turn it * off when the details are shown elsewhere (e.g. a side panel). Defaults * to true. */ showEventPopover?: boolean; /** * Called by the popover's expand button (e.g. to move the details into a * side panel). The button is hidden when this is not set. */ onEventPopoverExpand?: () => void; } /** * Props for the DayView component. Date, events and selection come from the * surrounding CalendarProvider. */ export interface DayViewProps extends EventPopoverProps { /** * Hour the grid scrolls to when it mounts, so the first rows on screen * are the ones with events (e.g. `8` for 8 AM, `8.5` for 8:30). Applied * once; clamped to `dayStartHour`..`dayEndHour`. Unset starts at the top. */ scrollToHour?: number; /** Optional className for the root element */ className?: string; } /** * Props for the WeekView component. Date, events and selection come from the * surrounding CalendarProvider. */ export interface WeekViewProps extends DayViewProps { /** * Number of day columns. Defaults to the provider's `numberOfDays`. When * set, it fixes the column count, and the provider adopts it while its * `numberOfDays` is uncontrolled (so prev/next step by it below 7). */ numberOfDays?: number; } /** * Props for the TimeGrid component, the hourly grid behind DayView and * WeekView. Date, events and selection come from the surrounding * CalendarProvider. */ export interface TimeGridProps extends WeekViewProps { /** * "day" shows one column, "week" shows `numberOfDays` columns. While the * provider's `view` is uncontrolled, the provider adopts this type, so * navigation and header info follow it. */ view: TimeGridView; } /** * Props for the MonthView component. Date, events, selection and view * settings come from the surrounding CalendarProvider. */ export interface MonthViewProps extends EventPopoverProps { /** Optional className for the root element */ className?: string; } /** * Props for the AgendaView component. Date, events, selection and view * settings come from the surrounding CalendarProvider. */ export interface AgendaViewProps extends EventPopoverProps { /** Optional className for the root element */ className?: string; } /** * Props for the Calendar block: everything CalendarProvider takes (events, * view, date, configuration, render slots), plus options for its toolbar * and views. `children` render inside the provider, after the calendar. */ export type CalendarProps = CalendarProviderProps & { /** * Hour the time grid scrolls to when it mounts (e.g. `8` for 8 AM). * Defaults to 8. */ scrollToHour?: number; /** * Whether the single-key shortcuts (T, J, K, D, W, M, A, 2-9, Escape) are * on. They listen on `window`, so turn them off when several calendars * share a page. Defaults to true. */ shortcuts?: boolean; /** Optional className for the root element */ className?: string; }; /** * Event popover props passed from a view down to its event items */ export interface EventItemPopoverProps { /** Whether a selected event shows its details popover */ showEventPopover?: boolean; /** Callback for the popover's expand button (hidden when absent) */ onEventPopoverExpand?: () => void; /** * Callback to close the popover of the given event. Clears the selection * only while that event is still the selected one. */ onEventPopoverClose?: (eventId: string) => void; /** Navigate to the previous period (recurrence arrows in the details) */ onPrevWeek?: () => void; /** Navigate to the next period (recurrence arrows in the details) */ onNextWeek?: () => void; } /** * Props for the WeekViewDayColumns component */ export interface WeekViewDayColumnsProps { /** Array of days to display */ days: WeekDay[]; /** When true, renders without the timezone/grid wrapper (used in scroll container) */ standalone?: boolean; /** Date to highlight with a temporary background animation */ highlightedDate?: Date | null; /** Optional className */ className?: string; } /** * Props for the WeekViewTimeAxis component */ export interface WeekViewTimeAxisProps { /** Array of hour slots to display */ hours: HourSlot[]; /** Height of each hour row in pixels */ hourHeight: number; /** Optional className */ className?: string; } /** * Props for the WeekViewGrid component */ export interface WeekViewGridProps extends EventItemPopoverProps { /** Array of days for columns */ days: WeekDay[]; /** Array of hour slots for rows */ hours: HourSlot[]; /** Height of each hour row in pixels */ hourHeight: number; /** Events to display on the grid */ events?: CalendarEvent[]; /** Optional click handler for events */ onEventClick?: (event: CalendarEvent) => void; /** ID of the currently selected event */ selectedEventId?: string; /** Callback when an empty slot is clicked while no event is selected */ onEventCreate?: (range: NewEventRange) => void; /** Current drag state if an event is being dragged */ dragState?: EventDragState; /** Pointerdown handler to initiate event drag */ onEventDragPointerDown?: ( e: React.PointerEvent, event: CalendarEvent, ) => void; /** Current resize state if an event is being resized */ resizeState?: EventResizeState; /** Pointerdown handler to initiate event resize */ onEventResizePointerDown?: ( e: React.PointerEvent, event: CalendarEvent, edge: "top" | "bottom", ) => void; /** Callback when an event is changed (e.g. color change from context menu) */ onEventChange?: (event: CalendarEvent) => void; /** Callback when context menu open state changes */ onContextMenuOpenChange?: (open: boolean) => void; /** Date to highlight with a temporary background animation (for "+N more" navigation) */ highlightedDate?: Date | null; /** * Index in `days` of the first on-screen column. Columns outside the * on-screen range are scroll buffer: inert and hidden from assistive tech. */ visibleStartIndex?: number; /** Number of on-screen columns (defaults to all of `days`) */ visibleCount?: number; /** Optional className */ className?: string; } /** * Props for the WeekViewTimeIndicator component */ export interface WeekViewTimeIndicatorProps { /** Array of days in the current week view */ days: WeekDay[]; /** Height of each hour row in pixels */ hourHeight: number; /** Buffered days array for scroll-synchronized line rendering */ scrollDays?: WeekDay[]; /** Scroll transform style to apply to the lines */ scrollStyle?: React.CSSProperties; /** Whether to render behind selected events */ behindSelection?: boolean; /** Optional className */ className?: string; } /** * Props for the WeekViewAllDayRow component */ export interface WeekViewAllDayRowProps extends EventItemPopoverProps { /** Array of days to display */ days: WeekDay[]; /** All-day events to display */ allDayEvents?: CalendarEvent[]; /** Optional click handler for events */ onEventClick?: (event: CalendarEvent) => void; /** ID of the currently selected event */ selectedEventId?: string; /** Optional scroll transform style for horizontal scroll sync */ scrollStyle?: React.CSSProperties; /** Current all-day resize state */ allDayResizeState?: AllDayResizeState; /** Pointerdown handler to initiate all-day event resize or drag */ onAllDayResizePointerDown?: ( e: React.PointerEvent, event: CalendarEvent, edge: "left" | "right" | "move", startColumn: number, endColumn: number, ) => void; /** Callback when an event is changed */ onEventChange?: (event: CalendarEvent) => void; /** Callback when context menu open state changes */ onContextMenuOpenChange?: (open: boolean) => void; /** Ref to attach to the scroll content div for column measurements */ allDayScrollContentRef?: React.RefObject; /** Index of the first visible column (used to skip buffer-only events in day view) */ visibleStartIndex?: number; /** Number of visible columns (defaults to days.length when omitted) */ visibleCount?: number; /** Width of a single day column in pixels (for floating drag copy sizing) */ dayColumnWidth?: number; /** Date to highlight with a temporary background animation */ highlightedDate?: Date | null; /** Optional className */ className?: string; } /** * Props for the CalendarEventItem component */ export interface CalendarEventItemProps extends EventItemPopoverProps { /** The positioned event to render */ positionedEvent: PositionedEvent; /** Height of each hour in pixels */ hourHeight: number; /** * Overrides whether the event renders as past. Defaults to comparing * `event.end` with the shared clock (`useIsPast`), which is `false` during * server rendering and hydration. */ isPast?: boolean; /** Whether the event is currently selected */ isSelected?: boolean; /** Optional click handler */ onClick?: (event: CalendarEvent) => void; /** Drag variant for visual state during drag */ dragVariant?: EventDragVariant; /** Whether this block shows an in-progress resize (passed to `renderEventContent`) */ isResizing?: boolean; /** Override start time (for dragging/placeholder positioning) */ overrideStart?: Date; /** Override end time (for dragging/placeholder positioning) */ overrideEnd?: Date; /** Pointerdown handler to initiate drag */ onDragPointerDown?: ( e: React.PointerEvent, event: CalendarEvent, ) => void; /** Pointerdown handler to initiate resize */ onResizePointerDown?: ( e: React.PointerEvent, event: CalendarEvent, edge: "top" | "bottom", ) => void; /** Callback when an event is changed (e.g. color change from context menu) */ onEventChange?: (event: CalendarEvent) => void; /** Raw cursor Y position for smooth dragging copy */ cursorY?: number; /** Raw cursor X position for smooth dragging copy */ cursorX?: number; /** Fixed width in px (for free-floating dragging copy) */ fixedWidth?: number; /** Fixed height in px (for free-floating dragging copy) */ fixedHeight?: number; /** Callback when context menu open state changes */ onContextMenuOpenChange?: (open: boolean) => void; /** Optional className */ className?: string; } 7f:T7547,"use client"; import * as React from "react"; import { addDays, addMonths, startOfDay } from "date-fns"; import { enUS } from "date-fns/locale"; import { useControllableState } from "@/hooks/use-controllable-state"; import { useToday } from "@/hooks/use-now"; import { EventTitleFocusProvider } from "./event-title-focus-context"; import { AGENDA_DAYS, describeEventChange, describeEventCreated, getCalendarHeaderInfo, getPeriodStart, getVisibleDays, getVisibleRange, getWeekViewStepDays, } from "@/lib/event-utils"; import type { CalendarConfig, CalendarContextValue, CalendarEvent, CalendarInfo, CalendarProviderProps, CalendarRenderSlots, EventContentProps, HourCycle, NewEventRange, ViewSettings, ViewType, VisibleRange, WeekStartsOn, } from "./calendar-types"; /** Title of a click-created event when no `createEvent` factory is given */ const DEFAULT_NEW_EVENT_TITLE = "New event"; /** How long the day opened by `showDay` stays highlighted, in milliseconds */ const HIGHLIGHT_DURATION_MS = 2000; /** Days the week view shows when `numberOfDays` is not set */ const DEFAULT_NUMBER_OF_DAYS = 7; /** Minute step drag, resize and click-to-create snap to when `snapMinutes` is not set */ const DEFAULT_SNAP_MINUTES = 15; /** First hour the time grid shows when `dayStartHour` is not set (midnight) */ const DEFAULT_DAY_START_HOUR = 0; /** Hour the time grid ends at when `dayEndHour` is not set (next midnight) */ const DEFAULT_DAY_END_HOUR = 24; /** Clock style when `hourCycle` is not set */ const DEFAULT_HOUR_CYCLE: HourCycle = 12; /** Calendars offered by the context menu when `calendars` is not set (stable identity) */ const NO_CALENDARS: CalendarInfo[] = []; /** Config used outside a provider, and for every provider prop left unset */ const DEFAULT_CALENDAR_CONFIG: CalendarConfig = { snapMinutes: DEFAULT_SNAP_MINUTES, dayStartHour: DEFAULT_DAY_START_HOUR, dayEndHour: DEFAULT_DAY_END_HOUR, hourCycle: DEFAULT_HOUR_CYCLE, locale: enUS, calendars: NO_CALENDARS, }; /** View settings used for every field `defaultViewSettings` leaves unset */ const DEFAULT_VIEW_SETTINGS: ViewSettings = { showWeekends: true, showDeclinedEvents: true, showWeekNumbers: false, }; /** Initial events when uncontrolled without `defaultEvents` (stable identity) */ const NO_EVENTS: CalendarEvent[] = []; /** What a mounted view draws, as reported through `reportView` */ interface ReportedView { /** The view's type */ view: ViewType; /** * Day columns the view is fixed to, or `undefined` when it follows the * provider's `numberOfDays` */ numberOfDays?: number; } /** * Provider state just before a view switch, restored when the mounted view * keeps its own type instead of following the switch */ interface ViewSwitchSnapshot { view: ViewType; numberOfDays: number; date: Date; } /** Inputs of `getAdoptedViewDate` */ interface AdoptedViewDateOptions { /** Date the provider shows now */ currentDate: Date; /** View type being adopted */ view: ViewType; /** Day count being adopted */ numberOfDays: number; weekStartsOn: WeekStartsOn; /** State before the latest switch, if one is waiting for the view's report */ pendingSwitch: ViewSwitchSnapshot | null; /** Whether the provider still shows its untouched starting date (today's period) */ isOnStartingToday: boolean; } /** * Setters the views use to report what they currently show. Kept out of * `useCalendar()` because only the views write these values. */ interface CalendarViewSyncValue { /** * Any view: which view is mounted. Reported after every commit that * changes the view's props or the provider's state, so the provider can * adopt it (see CalendarProvider). */ reportView: (reported: ReportedView) => void; /** Day/week view: the days on screen, updated live while scrolling */ reportVisibleDays: (days: Date[]) => void; /** Month view: the month on screen, updated while scrolling */ reportDisplayMonth: (month: Date) => void; /** * Closes an event's details popover: clears the selection only while * that event is still selected. A press on another event selects it * before the popover's outside-press dismissal runs, and that new * selection must survive it. */ closeEventPopover: (eventId: string) => void; } /** Props for the internal EventContentSlot */ interface EventContentSlotProps extends EventContentProps { /** * Classes for the box around custom content: positions it above the event's * background layers and insets it like the default text */ className: string; /** Default content, drawn as-is when no `renderEventContent` is set */ fallback: React.ReactNode; } /** A message for the live region; `id` changes so a repeated text is read again */ interface Announcement { id: number; text: string; } /** Props of the stateful provider, once the starting date is known */ type CalendarStateProviderProps = CalendarProviderProps & { /** Starting date when `date` is not controlled */ initialDate: Date; }; const CalendarContext = React.createContext(null); const CalendarViewSyncContext = React.createContext(null); /** No custom renderers: every slot uses its default (stable identity) */ const NO_RENDER_SLOTS: CalendarRenderSlots = {}; const CalendarRenderSlotsContext = React.createContext(NO_RENDER_SLOTS); const CalendarConfigContext = React.createContext( DEFAULT_CALENDAR_CONFIG, ); /** Default `createEvent`: a "New event" covering the clicked slot */ function createDefaultEvent(range: NewEventRange): CalendarEvent { return { id: crypto.randomUUID(), title: DEFAULT_NEW_EVENT_TITLE, start: range.start, end: range.end, }; } /** * Moves `date` by `amount` periods of the given view: days, months, the * agenda's `AGENDA_DAYS`, or the week view's step (`numberOfDays` below a * week, a week otherwise) */ function shiftPeriod( date: Date, view: ViewType, amount: number, numberOfDays: number, ): Date { if (view === "day") return addDays(date, amount); if (view === "month") return addMonths(date, amount); if (view === "agenda") return addDays(date, amount * AGENDA_DAYS); return addDays(date, amount * getWeekViewStepDays(numberOfDays)); } /** * First day of the agenda when switching to it from `view`: today when the * period on screen contains it, since an agenda lists what's coming up, and * the period's first day otherwise */ function getAgendaStartFrom( date: Date, view: ViewType, numberOfDays: number, now: Date, ): Date { const periodEnd = shiftPeriod(date, view, 1, numberOfDays); if (now >= date && now < periodEnd) return startOfDay(now); return startOfDay(date); } /** * Date the provider moves to when it adopts a mounted view's type or day * count */ function getAdoptedViewDate({ currentDate, view, numberOfDays, weekStartsOn, pendingSwitch, isOnStartingToday, }: AdoptedViewDateOptions): Date { // The mounted view didn't follow the latest switch: undo it, date included if ( pendingSwitch?.view === view && pendingSwitch.numberOfDays === numberOfDays ) { return pendingSwitch.date; } // Still on the starting date picked before any view mounted: today's // period of the mounted view instead (today for a day view) if (isOnStartingToday) { return getPeriodStart(new Date(), view, weekStartsOn, numberOfDays); } // The app swapped in a view of another type: land like switchView if (view === "day") return startOfDay(new Date()); return getPeriodStart(currentDate, view, weekStartsOn, numberOfDays); } /** * Keeps the visible hours a valid range of whole hours: the start within * 0-23, the end after it and at most 24 */ function resolveDayHours( dayStartHour: number, dayEndHour: number, ): Pick { const start = Math.min(Math.max(Math.floor(dayStartHour), 0), 23); const end = Math.min(Math.max(Math.ceil(dayEndHour), start + 1), 24); return { dayStartHour: start, dayEndHour: end }; } /** * Owns calendar state (events, view, date, selection, view settings) and * navigation, and shares them with the views through `useCalendar()`. * * Without `date` or `defaultDate` the calendar starts on today's period. * Today is unknown during server rendering and hydration, so in that case * nothing is rendered until hydration finishes; server and client markup * always match. * * `TEvent` is the app's event type. It is usually inferred from `events` or * `defaultEvents`; read it back with `useCalendar()`. * * Navigation (`goToPrev`, `goToNext`, `goToToday`, the shortcuts), header * info (`monthName`, `weekNumber`) and `visibleDays` follow the provider's * `view` and `numberOfDays`. Render one view per provider: it reports what * it draws, and the provider lines up with it as follows. * * - Uncontrolled `view`: the provider adopts the mounted view's type * (DayView, WeekView, MonthView, AgendaView, or TimeGrid's `view`), so a * lone view just works. `defaultView` only applies until a view mounts. * - Controlled `view` always wins: the provider never changes it to match * the mounted view (development builds warn about a mismatch). Render the * view it names, e.g. ``. * - A view's `numberOfDays` prop (WeekView, TimeGrid) works the same way * against the provider's `numberOfDays`. Without it the view follows the * provider. * - Switches the mounted view doesn't follow (`switchView`, `showDay`, * `setNumberOfDays`, the D/W/M and 2-9 shortcuts while a lone WeekView * stays mounted) are undone, date included. To make switching work, * render the view from `view`, as the demo does with `TimeGrid`. * - Without `date` or `defaultDate`, the calendar starts on today's period * of the adopted view: today for DayView and AgendaView, this week for * WeekView. */ export function CalendarProvider( props: CalendarProviderProps, ) { // `null` on the server and during hydration const today = useToday(); const todayPeriodStart = today ? getPeriodStart( today, props.view ?? props.defaultView ?? "week", props.weekStartsOn ?? 0, props.numberOfDays ?? props.defaultNumberOfDays ?? DEFAULT_NUMBER_OF_DAYS, ) : null; const initialDate = props.defaultDate ?? todayPeriodStart ?? props.date; if (!initialDate) return null; // The state below works with base `CalendarEvent`s, because the context // holding it can't be generic. It only stores, moves and hands back the // app's own event objects, so every event it passes to these callbacks is // a `TEvent`; `useCalendar()` restores the type on the way out. const baseProps = props as CalendarProviderProps; return ; } function CalendarStateProvider({ initialDate, events: eventsProp, defaultEvents, onEventsChange, view: viewProp, defaultView = "week", onViewChange, date: dateProp, defaultDate, onDateChange, weekStartsOn = 0, numberOfDays: numberOfDaysProp, defaultNumberOfDays = DEFAULT_NUMBER_OF_DAYS, onNumberOfDaysChange, defaultViewSettings, snapMinutes = DEFAULT_SNAP_MINUTES, dayStartHour = DEFAULT_DAY_START_HOUR, dayEndHour = DEFAULT_DAY_END_HOUR, hourCycle = DEFAULT_HOUR_CYCLE, locale = enUS, calendars = NO_CALENDARS, createEvent, onEventCreate, onEventUpdate, onEventSelect, onVisibleRangeChange, loading = false, renderEventContent, renderEventDetails, children, }: CalendarStateProviderProps) { const [events, setEvents] = useControllableState({ prop: eventsProp, defaultProp: defaultEvents ?? NO_EVENTS, onChange: onEventsChange, }); const [view, setView] = useControllableState({ prop: viewProp, defaultProp: defaultView, onChange: onViewChange, }); const [currentDate, setCurrentDate] = useControllableState({ prop: dateProp, defaultProp: initialDate, onChange: onDateChange, }); const [numberOfDays, setNumberOfDays] = useControllableState({ prop: numberOfDaysProp, defaultProp: defaultNumberOfDays, onChange: onNumberOfDaysChange, }); const [viewSettings, setViewSettings] = React.useState(() => ({ ...DEFAULT_VIEW_SETTINGS, ...defaultViewSettings, })); const [selectedEventId, setSelectedEventId] = React.useState( null, ); const [highlightedDate, setHighlightedDate] = React.useState( null, ); /** Month the month view shows; kept after leaving it until it reports again */ const [displayMonth, setDisplayMonth] = React.useState(null); const [visibleDays, setVisibleDays] = React.useState(() => getVisibleDays(currentDate, view, numberOfDays), ); /** ID of a just-created event whose title input should be focused once */ const [titleFocusEventId, setTitleFocusEventId] = React.useState< string | null >(null); /** Latest move, resize or create, read out by the live region */ const [announcement, setAnnouncement] = React.useState( null, ); /** Latest events, so `updateEvent` can compare without depending on them */ const eventsRef = React.useRef(events); /** * State before the latest switch of view or day count, so a mounted view * that keeps its own type can undo it. Read and cleared by the next report. */ const pendingSwitchRef = React.useRef(null); /** Whether the controlled-view mismatch warning was already logged */ const hasWarnedViewConflictRef = React.useRef(false); /** The mounted view's latest report, or `null` while no view has reported */ const mountedViewRef = React.useRef(null); /** Latest `onVisibleRangeChange`, so a new callback alone doesn't report */ const onVisibleRangeChangeRef = React.useRef(onVisibleRangeChange); /** Start and end times last passed to `onVisibleRangeChange` */ const reportedRangeKeyRef = React.useRef(null); /** Whether the starting date is today's period (no `date` or `defaultDate`) */ const startsOnToday = dateProp === undefined && defaultDate === undefined; const initialTime = initialDate.getTime(); React.useEffect(() => { eventsRef.current = events; }, [events]); React.useEffect(() => { onVisibleRangeChangeRef.current = onVisibleRangeChange; }, [onVisibleRangeChange]); // The highlight from `showDay` is a brief flash, not a lasting state React.useEffect(() => { if (!highlightedDate) return; const timer = setTimeout( () => setHighlightedDate(null), HIGHLIGHT_DURATION_MS, ); return () => clearTimeout(timer); }, [highlightedDate]); // Month view shows no day range; consumers sync to `displayMonth` instead React.useEffect(() => { if (view !== "month") return; setVisibleDays([]); }, [view]); const selectedEvent = React.useMemo( () => events.find((e) => e.id === selectedEventId) ?? null, [events, selectedEventId], ); // Only honor the focus request while that event is still the selected one const pendingTitleFocusId = titleFocusEventId === selectedEventId ? titleFocusEventId : null; const clearTitleFocus = React.useCallback(() => { setTitleFocusEventId(null); }, []); const selectEvent = React.useCallback( (eventId: string) => { setSelectedEventId(eventId); onEventSelect?.(eventId); }, [onEventSelect], ); const clearSelection = React.useCallback(() => { setSelectedEventId(null); }, []); const announce = React.useCallback((text: string) => { setAnnouncement((prev) => ({ id: (prev?.id ?? 0) + 1, text })); }, []); const updateEvent = React.useCallback( (updatedEvent: CalendarEvent) => { const previous = eventsRef.current.find((e) => e.id === updatedEvent.id); setEvents((prev) => prev.map((e) => (e.id === updatedEvent.id ? updatedEvent : e)), ); onEventUpdate?.(updatedEvent); // Moves and resizes (drag, keyboard, or the details) are announced; // edits that keep the time, like the title, are not if (!previous) return; const message = describeEventChange( previous, updatedEvent, hourCycle, locale, ); if (message) announce(message); }, [setEvents, onEventUpdate, hourCycle, locale, announce], ); const addEventFromRange = React.useCallback( (range: NewEventRange) => { const newEvent = (createEvent ?? createDefaultEvent)(range); if (!newEvent) return; setEvents((prev) => [...prev, newEvent]); onEventCreate?.(newEvent); selectEvent(newEvent.id); setTitleFocusEventId(newEvent.id); announce(describeEventCreated(newEvent, hourCycle, locale)); }, [ createEvent, setEvents, onEventCreate, selectEvent, hourCycle, locale, announce, ], ); const goToToday = React.useCallback(() => { setCurrentDate( getPeriodStart(new Date(), view, weekStartsOn, numberOfDays), ); }, [view, weekStartsOn, numberOfDays, setCurrentDate]); const goToPrev = React.useCallback(() => { setCurrentDate((prev) => shiftPeriod(prev, view, -1, numberOfDays)); }, [view, numberOfDays, setCurrentDate]); const goToNext = React.useCallback(() => { setCurrentDate((prev) => shiftPeriod(prev, view, 1, numberOfDays)); }, [view, numberOfDays, setCurrentDate]); const goToDate = React.useCallback( (date: Date) => setCurrentDate(date), [setCurrentDate], ); const switchView = React.useCallback( (newView: ViewType) => { if (newView === view) return; pendingSwitchRef.current = { view, numberOfDays, date: currentDate }; setView(newView); if (newView === "day") { setCurrentDate(startOfDay(new Date())); return; } if (newView === "agenda") { setCurrentDate((prev) => getAgendaStartFrom(prev, view, numberOfDays, new Date()), ); return; } setCurrentDate((prev) => getPeriodStart(prev, newView, weekStartsOn, numberOfDays), ); }, [view, currentDate, weekStartsOn, numberOfDays, setView, setCurrentDate], ); const changeNumberOfDays = React.useCallback( (count: number) => { if (count !== numberOfDays) { pendingSwitchRef.current = { view, numberOfDays, date: currentDate }; } setNumberOfDays(count); if (view !== "week") return; // Going back to a full week starts on the week's first day again setCurrentDate((prev) => { const next = getPeriodStart(prev, "week", weekStartsOn, count); return next.getTime() === prev.getTime() ? prev : next; }); }, [ view, numberOfDays, currentDate, weekStartsOn, setNumberOfDays, setCurrentDate, ], ); const showDay = React.useCallback( (date: Date) => { if (view !== "week") { pendingSwitchRef.current = { view, numberOfDays, date: currentDate }; } setView("week"); setCurrentDate(getPeriodStart(date, "week", weekStartsOn, numberOfDays)); setHighlightedDate(date); }, [view, currentDate, weekStartsOn, numberOfDays, setView, setCurrentDate], ); const reportView = React.useCallback( (reported: ReportedView) => { mountedViewRef.current = reported; const pendingSwitch = pendingSwitchRef.current; pendingSwitchRef.current = null; // Controlled values always win over the mounted view const nextView = viewProp ?? reported.view; const nextNumberOfDays = numberOfDaysProp ?? reported.numberOfDays ?? numberOfDays; const conflictsWithControlled = reported.view !== nextView || (reported.numberOfDays !== undefined && reported.numberOfDays !== nextNumberOfDays); if ( conflictsWithControlled && process.env.NODE_ENV !== "production" && !hasWarnedViewConflictRef.current ) { hasWarnedViewConflictRef.current = true; console.warn( `CalendarProvider: the mounted ${reported.view} view doesn't match the controlled \`view\` / \`numberOfDays\` props, which navigation follows. Render the view they name, e.g. .`, ); } if (nextView === view && nextNumberOfDays === numberOfDays) return; const nextDate = getAdoptedViewDate({ currentDate, view: nextView, numberOfDays: nextNumberOfDays, weekStartsOn, pendingSwitch, isOnStartingToday: startsOnToday && currentDate.getTime() === initialTime, }); setView(nextView); setNumberOfDays(nextNumberOfDays); setCurrentDate(nextDate); // Header info reads the visible days: match them to the new date before // the first paint (the view reports its own after it). A controlled date // may not change, so it waits for the view's report. if (dateProp !== undefined) return; setVisibleDays( nextView === "month" ? [] : getVisibleDays(nextDate, nextView, nextNumberOfDays), ); }, [ viewProp, numberOfDaysProp, dateProp, view, numberOfDays, currentDate, startsOnToday, initialTime, weekStartsOn, setView, setNumberOfDays, setCurrentDate, ], ); const toggleWeekends = React.useCallback(() => { setViewSettings((prev) => ({ ...prev, showWeekends: !prev.showWeekends })); }, []); const toggleDeclinedEvents = React.useCallback(() => { setViewSettings((prev) => ({ ...prev, showDeclinedEvents: !prev.showDeclinedEvents, })); }, []); const toggleWeekNumbers = React.useCallback(() => { setViewSettings((prev) => ({ ...prev, showWeekNumbers: !prev.showWeekNumbers, })); }, []); // Week/day views name the month after the LAST visible day, so a week // crossing into the next month is labeled with the later month (Notion // Calendar's behavior). Month view labels its own month instead, and the // agenda the month it starts in. const headerDate = view === "month" ? (displayMonth ?? currentDate) : (visibleDays[0] ?? currentDate); const headerRangeEnd = view === "month" || view === "agenda" ? undefined : visibleDays[visibleDays.length - 1]; const { monthName, year, weekNumber } = getCalendarHeaderInfo( headerDate, weekStartsOn, locale, headerRangeEnd, ); // Derived from the provider's own period, not the live `visibleDays`, so a // horizontal scroll moves it once it snaps instead of at every day it passes const range = getVisibleRange( currentDate, view, numberOfDays, weekStartsOn, viewSettings.showWeekends, ); const rangeStartTime = range.start.getTime(); const rangeEndTime = range.end.getTime(); const visibleRange = React.useMemo( () => ({ start: new Date(rangeStartTime), end: new Date(rangeEndTime) }), [rangeStartTime, rangeEndTime], ); // Report each new range once. While the provider is still adopting the // mounted view (its first commit, or a switch the view is undoing), the // range belongs to a view that isn't on screen, so wait for the next one. // Same resolution as `reportView`: controlled values win. React.useEffect(() => { const mounted = mountedViewRef.current; if (mounted) { const adoptedView = viewProp ?? mounted.view; const adoptedNumberOfDays = numberOfDaysProp ?? mounted.numberOfDays ?? numberOfDays; if (adoptedView !== view || adoptedNumberOfDays !== numberOfDays) return; } const key = `${visibleRange.start.getTime()}-${visibleRange.end.getTime()}`; if (reportedRangeKeyRef.current === key) return; reportedRangeKeyRef.current = key; onVisibleRangeChangeRef.current?.(visibleRange); }, [visibleRange, view, numberOfDays, viewProp, numberOfDaysProp]); const value = React.useMemo( () => ({ events, view, currentDate, weekStartsOn, numberOfDays, viewSettings, visibleDays, displayMonth, visibleRange, loading, selectedEventId, selectedEvent, highlightedDate, monthName, year, weekNumber, goToToday, goToPrev, goToNext, goToDate, switchView, setNumberOfDays: changeNumberOfDays, selectEvent, clearSelection, addEventFromRange, updateEvent, toggleWeekends, toggleDeclinedEvents, toggleWeekNumbers, showDay, }), [ events, view, currentDate, weekStartsOn, numberOfDays, viewSettings, visibleDays, displayMonth, visibleRange, loading, selectedEventId, selectedEvent, highlightedDate, monthName, year, weekNumber, goToToday, goToPrev, goToNext, goToDate, switchView, changeNumberOfDays, selectEvent, clearSelection, addEventFromRange, updateEvent, toggleWeekends, toggleDeclinedEvents, toggleWeekNumbers, showDay, ], ); const closeEventPopover = React.useCallback((eventId: string) => { setSelectedEventId((prev) => (prev === eventId ? null : prev)); }, []); const viewSync = React.useMemo( () => ({ reportView, reportVisibleDays: setVisibleDays, reportDisplayMonth: setDisplayMonth, closeEventPopover, }), [reportView, closeEventPopover], ); const renderSlots = React.useMemo( () => ({ renderEventContent, renderEventDetails }), [renderEventContent, renderEventDetails], ); const config = React.useMemo( () => ({ snapMinutes: Math.max(1, Math.round(snapMinutes)), ...resolveDayHours(dayStartHour, dayEndHour), hourCycle, locale, calendars, }), [snapMinutes, dayStartHour, dayEndHour, hourCycle, locale, calendars], ); return ( {children} {/* Announces moves, resizes and creates to screen readers */}

{announcement && ( {announcement.text} )}

); } /** * Returns calendar state and actions from the nearest CalendarProvider. * Pass the event type given to the provider to get events and callbacks * typed with it. Throws when used outside a provider. */ export function useCalendar< TEvent extends CalendarEvent = CalendarEvent, >(): CalendarContextValue { const context = React.useContext(CalendarContext); if (!context) { throw new Error("useCalendar must be used within a CalendarProvider."); } // React context can't be generic, so the provider stores its value with // base `CalendarEvent` types. The events in it are the app's own objects, // so this restores the `TEvent` the caller gave the provider. `TEvent` is // both read (events) and written (updateEvent), so TypeScript sees the two // types as unrelated and the cast goes through `unknown`. return context as unknown as CalendarContextValue; } /** * Returns the display and interaction settings of the nearest * CalendarProvider (`snapMinutes`, `dayStartHour`, `dayEndHour`, * `hourCycle`, `locale`, `calendars`), e.g. to format times in a custom * `renderEventContent` the way the calendar does. Outside a provider it * returns the defaults. */ export function useCalendarConfig(): CalendarConfig { return React.useContext(CalendarConfigContext); } /** * Internal: the custom renderers set on the nearest CalendarProvider, for * the event items and popovers that draw them. Empty (all defaults) outside * a provider. */ export function useCalendarRenderSlots(): CalendarRenderSlots { return React.useContext(CalendarRenderSlotsContext); } /** * Internal: lets the views report what they show (visible days, displayed * month) back to the provider. Throws when used outside a CalendarProvider. */ export function useCalendarViewSync(): CalendarViewSyncValue { const context = React.useContext(CalendarViewSyncContext); if (!context) { throw new Error( "useCalendarViewSync must be used within a CalendarProvider.", ); } return context; } /** * Internal: draws an event item's content area. Renders `renderEventContent` * inside a positioned box when the provider has one, otherwise the item's * default content unchanged. As its own component, hooks called by the * custom renderer stay isolated from the event item's. */ export function EventContentSlot({ className, fallback, ...contentProps }: EventContentSlotProps) { const { renderEventContent } = useCalendarRenderSlots(); if (!renderEventContent) return fallback; return

{renderEventContent(contentProps)}

; } 80:Te24,"use client"; import * as React from "react"; import type { ViewType } from "./week-view-types"; /** * Context to provide the collision boundary element, header inset, * and current view type for event detail popovers. * - boundary: the outer calendar container (so popovers can position freely) * - headerHeight: the height of the weekday header + all-day row, * used as top collision padding so popovers never overlap the header. * - view: current calendar view ("day" | "week") — in day view, the collision * boundary is skipped so Radix uses the viewport for positioning. * - boundaryRight: the right-edge x-coordinate (in viewport px) of the * calendar boundary. Used in day view to place a fixed-position popover * anchor at the calendar's right edge so popovers match Notion Calendar. */ interface CalendarPopoverBoundaryValue { boundary: HTMLElement | null; headerHeight: number; view: ViewType; /** Right edge of the calendar boundary in viewport pixels. */ boundaryRight: number; /** * Bottom edge of the header (weekday + all-day row) in viewport pixels. * Used as collision padding top in day view so the popover never overlaps * the header area when the collision boundary is the viewport. */ headerBottom: number; } const CalendarPopoverBoundaryContext = React.createContext({ boundary: null, headerHeight: 0, view: "week", boundaryRight: 0, headerBottom: 0, }); export function CalendarPopoverBoundaryProvider({ boundaryRef, headerRef, view = "week", children, }: { boundaryRef: React.RefObject; headerRef: React.RefObject; view?: ViewType; children: React.ReactNode; }) { const [boundary, setBoundary] = React.useState(null); const [headerHeight, setHeaderHeight] = React.useState(0); const [boundaryRight, setBoundaryRight] = React.useState(0); const [headerBottom, setHeaderBottom] = React.useState(0); React.useEffect(() => { setBoundary(boundaryRef.current); }, [boundaryRef]); // Observe header height changes (all-day row can expand/collapse). // Also track the viewport-relative bottom edge of the header for day-view // collision padding — the popover must not overlap the header area. React.useEffect(() => { const el = headerRef.current; if (!el) return; const update = () => { setHeaderHeight(el.offsetHeight); setHeaderBottom(el.getBoundingClientRect().bottom); }; update(); const ro = new ResizeObserver(update); ro.observe(el); return () => ro.disconnect(); }, [headerRef]); // Track the right edge of the calendar boundary for day-view anchoring. // A ResizeObserver catches layout changes; we don't need scroll since the // boundary element itself doesn't scroll within the viewport. React.useEffect(() => { const el = boundaryRef.current; if (!el) return; const update = () => { setBoundaryRight(el.getBoundingClientRect().right); }; update(); const ro = new ResizeObserver(update); ro.observe(el); return () => ro.disconnect(); }, [boundaryRef]); const value = React.useMemo( () => ({ boundary, headerHeight, view, boundaryRight, headerBottom }), [boundary, headerHeight, view, boundaryRight, headerBottom], ); return ( {children} ); } export function useCalendarPopoverBoundary() { return React.useContext(CalendarPopoverBoundaryContext); } 81:T499,"use client"; import * as React from "react"; /** * Context that carries a one-shot request to focus an event's title input. * Set by CalendarProvider right after click-to-create so the user can type a * name immediately; the detail panel host that is actually visible (sidebar * or popover) consumes it and clears it. */ interface EventTitleFocusValue { /** ID of the event whose title input should be focused, or null */ pendingEventId: string | null; /** Clears the request once the title input has been focused */ clearPending: () => void; } const EventTitleFocusContext = React.createContext({ pendingEventId: null, clearPending: () => {}, }); export function EventTitleFocusProvider({ pendingEventId, clearPending, children, }: EventTitleFocusValue & { children: React.ReactNode }) { const value = React.useMemo( () => ({ pendingEventId, clearPending }), [pendingEventId, clearPending], ); return ( {children} ); } export function useEventTitleFocus() { return React.useContext(EventTitleFocusContext); } 82:T1319,import * as React from "react"; import { useCalendar } from "@/components/calendar-provider"; import type { CalendarContextValue } from "@/components/calendar-types"; interface UseCalendarShortcutsOptions { /** Whether the shortcuts are active. Defaults to true */ enabled?: boolean; } /** Calendar actions the shortcuts trigger */ type ShortcutActions = Pick< CalendarContextValue, | "goToToday" | "goToPrev" | "goToNext" | "switchView" | "setNumberOfDays" | "clearSelection" | "toggleWeekends" | "toggleDeclinedEvents" >; /** Keys 2-9: show that many days */ const NUMBER_OF_DAYS_KEY = /^[2-9]$/; /** Whether a key press is typed into a text field (single-key shortcuts skip those) */ export function isTypingTarget(target: EventTarget | null): boolean { if (!(target instanceof HTMLElement)) return false; return target.tagName === "INPUT" || target.tagName === "TEXTAREA"; } /** * Handles one key press. Returns early on the first match, in the same * order the demo has always checked them. */ function handleShortcut(e: KeyboardEvent, actions: ShortcutActions): void { // Escape deselects, even from inside a text field if (e.key === "Escape") { actions.clearSelection(); return; } const isCommand = e.metaKey || e.ctrlKey; const key = e.key.toLowerCase(); // Shift+Cmd+E / Shift+Cmd+D (Ctrl on Windows and Linux) toggle the view // settings, even from inside a text field if (isCommand && e.shiftKey && key === "e") { e.preventDefault(); actions.toggleWeekends(); return; } if (isCommand && e.shiftKey && key === "d") { e.preventDefault(); actions.toggleDeclinedEvents(); return; } // Single keys only: Cmd+K, Ctrl+D and the like belong to the app and browser if (isCommand || isTypingTarget(e.target)) return; if (e.key === "t" || e.key === "T") { e.preventDefault(); actions.goToToday(); return; } if (e.key === "1" || e.key === "d" || e.key === "D") { e.preventDefault(); actions.switchView("day"); return; } if (e.key === "0" || e.key === "w" || e.key === "W") { e.preventDefault(); actions.switchView("week"); return; } if (NUMBER_OF_DAYS_KEY.test(e.key)) { e.preventDefault(); actions.setNumberOfDays(Number(e.key)); return; } if (e.key === "j" || e.key === "J" || e.key === "ArrowLeft") { e.preventDefault(); actions.goToPrev(); return; } if (e.key === "k" || e.key === "K" || e.key === "ArrowRight") { e.preventDefault(); actions.goToNext(); return; } // Lowercase only: Shift+M is left free for app shortcuts if (e.key === "m") { e.preventDefault(); actions.switchView("month"); return; } // Cmd+A / Ctrl+A never get here, so they still select all if (e.key === "a" || e.key === "A") { e.preventDefault(); actions.switchView("agenda"); } } /** * Opt-in single-key calendar shortcuts, listening on `window`: * * - T: today * - J / ArrowLeft, K / ArrowRight: previous / next period * - D or 1: day view, W or 0: week view, M: month view, A: agenda * - 2-9: number of days * - Escape: clear the selection * - Shift+Cmd+E / Shift+Cmd+D (Ctrl on Windows and Linux): show or hide * weekends / declined events * * Presses with Cmd or Ctrl are left alone, apart from those two. * * Key presses in inputs and textareas are ignored (except Escape). The * listener is added once on mount, so its position among other `window` * keydown listeners stays fixed: an app shortcut that shares a key (e.g. * Cmd+K) should be handled by a listener added before this hook's, and call * `event.stopImmediatePropagation()`. */ export function useCalendarShortcuts({ enabled = true, }: UseCalendarShortcutsOptions = {}) { const { goToToday, goToPrev, goToNext, switchView, setNumberOfDays, clearSelection, toggleWeekends, toggleDeclinedEvents, } = useCalendar(); /** Latest actions, read by the window listener */ const actionsRef = React.useRef({ goToToday, goToPrev, goToNext, switchView, setNumberOfDays, clearSelection, toggleWeekends, toggleDeclinedEvents, }); React.useEffect(() => { actionsRef.current = { goToToday, goToPrev, goToNext, switchView, setNumberOfDays, clearSelection, toggleWeekends, toggleDeclinedEvents, }; }, [ goToToday, goToPrev, goToNext, switchView, setNumberOfDays, clearSelection, toggleWeekends, toggleDeclinedEvents, ]); React.useEffect(() => { if (!enabled) return; const handleKeyDown = (e: KeyboardEvent) => { handleShortcut(e, actionsRef.current); }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [enabled]); } 83:T7cb,import * as React from "react"; interface UseControllableStateOptions { /** Controlled value. `undefined` lets the hook own the value */ prop: T | undefined; /** Initial value (or lazy initializer) when not controlled */ defaultProp: T | (() => T); /** Called with every new value, controlled or not */ onChange?: (value: T) => void; } type UseControllableStateReturn = [ T, (action: React.SetStateAction) => void, ]; /** Whether a state action is an updater function rather than a value */ function isUpdater( action: React.SetStateAction, ): action is (prev: T) => T { return typeof action === "function"; } /** * State that can be controlled by a parent (`prop` + `onChange`) or owned by * the component (`defaultProp`), shadcn/Radix style. The setter accepts a * value or an updater, like `useState`, and skips no-op updates. */ export function useControllableState({ prop, defaultProp, onChange, }: UseControllableStateOptions): UseControllableStateReturn { const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultProp); const isControlled = prop !== undefined; const value = prop !== undefined ? prop : uncontrolledValue; /** Latest value, read by updaters called outside render */ const valueRef = React.useRef(value); const onChangeRef = React.useRef(onChange); React.useEffect(() => { valueRef.current = value; }, [value]); React.useEffect(() => { onChangeRef.current = onChange; }, [onChange]); const setValue = React.useCallback( (action: React.SetStateAction) => { const next = isUpdater(action) ? action(valueRef.current) : action; if (Object.is(next, valueRef.current)) return; if (!isControlled) { // Owned value: later updaters in the same tick build on this one valueRef.current = next; setUncontrolledValue(next); } onChangeRef.current?.(next); }, [isControlled], ); return [value, setValue]; } 84:T13de,"use client"; import { useCallback } from "react"; import { useCalendar, useCalendarConfig } from "@/components/calendar-provider"; import { getKeyboardEventChange } from "@/lib/event-utils"; interface UseEventKeyboardOptions { /** Element holding the view's events; focus is put back on an event inside it */ containerRef: React.RefObject; /** Vertically scrolling element, kept scrolled to the focused event */ scrollContainerRef?: React.RefObject; /** Whether a day is on screen; a keyboard move off screen calls `revealDay` */ isDayVisible: (date: Date) => boolean; /** Navigates the view so the day is on screen */ revealDay: (date: Date) => void; } /** Arrow keys that, with Alt, move (or with Alt+Shift, resize) the focused event */ const EVENT_MOVE_KEYS = new Set([ "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", ]); /** * Keys that select, open or close the focused event. Opening or closing its * popover can re-create the event's element, so focus is put back on it. */ const FOCUS_KEEPING_KEYS = new Set(["Enter", " ", "Escape"]); /** * Focuses the event's element inside `container` and returns it, or `null` * when none takes focus. Inert (off-screen buffer) copies refuse focus, so * each match is tried in turn. */ export function focusEventElement( container: HTMLElement | null, eventId: string, ): HTMLElement | null { if (!container) return null; const candidates = container.querySelectorAll( `[data-event-id="${CSS.escape(eventId)}"]`, ); for (const candidate of candidates) { candidate.focus({ preventScroll: true }); if (document.activeElement === candidate) return candidate; } return null; } /** Scrolls `scroller` vertically just enough to show `element` */ function keepInView(element: HTMLElement, scroller: HTMLElement | null) { if (!scroller) return; const elementRect = element.getBoundingClientRect(); const scrollerRect = scroller.getBoundingClientRect(); if (elementRect.top < scrollerRect.top) { scroller.scrollTop -= scrollerRect.top - elementRect.top; return; } if (elementRect.bottom > scrollerRect.bottom) { scroller.scrollTop += elementRect.bottom - scrollerRect.bottom; } } /** * Keyboard editing for a view's events, as a keydown handler for the view's * root. On a focused event (an element with `data-event-id`): * * - Alt+ArrowLeft/Right moves it a day; Alt+ArrowUp/Down moves it one * `snapMinutes` step (a week in month view); Alt+Shift+ArrowUp/Down * resizes its end (see `getKeyboardEventChange`) * - Enter, Space and Escape keep focus on it while its popover opens or closes * * Handled keys don't reach the calendar shortcuts (where arrows change the * period) or the browser (where Alt+Arrow navigates history). */ export function useEventKeyboard({ containerRef, scrollContainerRef, isDayVisible, revealDay, }: UseEventKeyboardOptions): (e: React.KeyboardEvent) => void { const { events, view, updateEvent } = useCalendar(); const config = useCalendarConfig(); /** * After React re-renders, focuses the event's element again if focus was * lost (its element was re-created), and keeps it scrolled into view. * Focus that moved somewhere else on purpose is left alone. (Escape with * the popover open is handled by the popover: it closes first.) */ const restoreFocus = useCallback( (eventId: string) => { requestAnimationFrame(() => { const container = containerRef.current; if (!container) return; const scroller = scrollContainerRef?.current ?? null; const active = document.activeElement; if ( active instanceof HTMLElement && active.dataset.eventId === eventId ) { keepInView(active, scroller); return; } if (active && active !== document.body) return; const focused = focusEventElement(container, eventId); if (focused) keepInView(focused, scroller); }); }, [containerRef, scrollContainerRef], ); return useCallback( (e: React.KeyboardEvent) => { if (!(e.target instanceof HTMLElement)) return; const eventId = e.target.closest("[data-event-id]")?.dataset.eventId; if (!eventId) return; if (FOCUS_KEEPING_KEYS.has(e.key)) { restoreFocus(eventId); return; } if (!e.altKey || e.ctrlKey || e.metaKey) return; if (!EVENT_MOVE_KEYS.has(e.key)) return; e.preventDefault(); e.stopPropagation(); const event = events.find((ev) => ev.id === eventId); if (!event) return; const changed = getKeyboardEventChange( event, e.key, e.shiftKey, view, config, ); if (!changed) return; updateEvent(changed); if (!isDayVisible(changed.start)) revealDay(changed.start); restoreFocus(eventId); }, [events, view, config, updateEvent, isDayVisible, revealDay, restoreFocus], ); } 85:T1058,import * as React from "react"; import { startOfDay } from "date-fns"; /** * Milliseconds between clock ticks. Ticks land on multiples of this value * (minute boundaries), so the current-time line moves when the minute does. */ const NOW_TICK_INTERVAL_MS = 60_000; /** Components subscribed to the shared clock. */ const listeners = new Set<() => void>(); /** Timestamp handed to subscribers. Refreshed on every tick. */ let nowSnapshot: number | null = null; /** Pending tick, or `null` while nothing is subscribed. */ let tickTimeout: ReturnType | null = null; /** Returns the index of the tick interval a timestamp falls in. */ function getTickIndex(timestamp: number): number { return Math.floor(timestamp / NOW_TICK_INTERVAL_MS); } /** * Returns the shared "now" timestamp. * * The value stays the same within one tick interval, so repeated reads during * a render agree with each other. It is refreshed lazily when a read lands in * a later interval, which covers renders that happen while nothing is * subscribed (and so no timer is running). */ function readNow(): number { const current = Date.now(); if ( nowSnapshot === null || getTickIndex(current) !== getTickIndex(nowSnapshot) ) { nowSnapshot = current; } return nowSnapshot; } /** Schedules the next tick on the next interval boundary. */ function scheduleTick(): void { const delay = NOW_TICK_INTERVAL_MS - (Date.now() % NOW_TICK_INTERVAL_MS); tickTimeout = setTimeout(() => { nowSnapshot = Date.now(); listeners.forEach((listener) => listener()); scheduleTick(); }, delay); } /** Subscribes to the shared clock. One timer serves every subscriber. */ function subscribe(listener: () => void): () => void { listeners.add(listener); if (tickTimeout === null) { scheduleTick(); } return () => { listeners.delete(listener); if (listeners.size > 0 || tickTimeout === null) return; clearTimeout(tickTimeout); tickTimeout = null; }; } function getNowSnapshot(): number { return readNow(); } function getTodaySnapshot(): number { return startOfDay(readNow()).getTime(); } /** * Server and hydration snapshot. `null` means "the time is not known yet", * so nothing that depends on the clock or the viewer's timezone is rendered * and server and client markup match (React error #418). */ function getServerSnapshot(): null { return null; } /** Server and hydration snapshot for `useIsPast`: nothing is past yet. */ function getServerIsPastSnapshot(): boolean { return false; } /** * Returns the current time, updated on every minute boundary. * * Returns `null` during server rendering and hydration, and the real time * right after hydration. Client-only renders get the real time on the first * render. Components must render their time-dependent parts only when the * value is not `null`. */ export function useNow(): Date | null { const timestamp = React.useSyncExternalStore( subscribe, getNowSnapshot, getServerSnapshot, ); return React.useMemo( () => (timestamp === null ? null : new Date(timestamp)), [timestamp], ); } /** * Returns the start of the viewer's current day, or `null` during server * rendering and hydration. * * Shares the clock with `useNow`, but the component re-renders only when the * day changes, not on every tick. */ export function useToday(): Date | null { const timestamp = React.useSyncExternalStore( subscribe, getTodaySnapshot, getServerSnapshot, ); return React.useMemo( () => (timestamp === null ? null : new Date(timestamp)), [timestamp], ); } /** * Returns whether `date` is in the past. * * Returns `false` during server rendering and hydration. Shares the clock * with `useNow`, but the component re-renders only when the answer changes, * not on every tick. */ export function useIsPast(date: Date): boolean { const timestamp = date.getTime(); const getSnapshot = React.useCallback( () => timestamp < readNow(), [timestamp], ); return React.useSyncExternalStore( subscribe, getSnapshot, getServerIsPastSnapshot, ); } 86:T2201,"use client"; import { useCallback, useEffect, useRef } from "react"; import type { PointerGestureStart } from "@/components/week-view-types"; interface UsePointerGestureOptions { /** * Element the gestures start in. A no-op, non-passive touchmove listener * on it keeps the browser from treating its touch moves as uncancelable, * so a long press that became a drag can stop the page from scrolling. */ containerRef: React.RefObject; } interface UsePointerGestureReturn { /** * Starts a press-to-drag gesture from a pointerdown. Mouse and pen start * right away; touch starts after a long press, so a finger that moves * first scrolls the page instead. Non-primary pointers and buttons are * ignored. */ startGesture: ( e: React.PointerEvent, onStart: (start: PointerGestureStart) => void, ) => void; } /** How long (ms) a finger must rest before a touch drag, resize or create starts */ export const LONG_PRESS_DELAY_MS = 350; /** * How far (px) a finger may move during the long press. Moving further * cancels it, so the gesture scrolls instead. */ export const LONG_PRESS_MOVE_TOLERANCE_PX = 8; /** * How long (ms) after a touch gesture ends its follow-up mousedown, click * and long-press context menu are swallowed. Mouse and pen clicks follow * pointerup in the same task, so for them the window closes on the next one. */ const TOUCH_FOLLOW_UP_WINDOW_MS = 400; /** A touch waiting for its long press, or a long press that started a gesture */ interface TouchPress { pointerId: number; startClientX: number; startClientY: number; /** Latest position, where the gesture starts when the long press completes */ lastClientX: number; lastClientY: number; element: HTMLElement; /** * Node the touch events target. Browsers keep sending them there even * after it is removed from the DOM mid-drag, when they no longer bubble. */ touchTarget: EventTarget; /** Whether the long press completed and the gesture is running */ isActive: boolean; /** The element's inline touch-action before the gesture, restored after it */ previousTouchAction: string; timer: ReturnType | null; } /** Whether a pointerdown can start a gesture: the primary pointer's main button (left mouse button, pen tip or a finger) */ export function isPrimaryPress(e: React.PointerEvent | PointerEvent): boolean { return e.isPrimary && e.button === 0; } /** Swallows the next `type` event the browser sends within `windowMs` */ function swallowNext(type: "click" | "mousedown", windowMs: number): void { const stop = () => { window.removeEventListener(type, swallow, true); clearTimeout(timer); }; function swallow(e: Event) { e.preventDefault(); e.stopPropagation(); stop(); } window.addEventListener(type, swallow, true); const timer = setTimeout(stop, windowMs); } /** * Swallows the click the browser sends right after a drag, resize or touch * gesture ends. When the pressed element was swapped out mid-drag (for a * ghost or a floating copy), that click lands on a shared ancestor and would * read as a background click that clears the selection. */ export function suppressNextClick(pointerType: string): void { swallowNext("click", pointerType === "touch" ? TOUCH_FOLLOW_UP_WINDOW_MS : 0); } /** Keeps the long-press context menu from opening over a touch gesture */ function blockContextMenu(e: Event) { e.preventDefault(); e.stopPropagation(); } /** Registered only to make touch moves in the container cancelable */ function noop() {} /** * Turns pointerdowns into press-to-drag gestures for the drag and resize * hooks: immediately for mouse and pen, after a long press for touch. * While a touch gesture runs, the pressed element gets `touch-action: none`, * page scrolling and the context menu are blocked, and the click that * follows it is swallowed. */ export function usePointerGesture({ containerRef, }: UsePointerGestureOptions): UsePointerGestureReturn { const pressRef = useRef(null); const handlePressMoveRef = useRef<((e: PointerEvent) => void) | null>(null); const handlePressEndRef = useRef<((e: PointerEvent) => void) | null>(null); useEffect(() => { const container = containerRef.current; if (!container) return; container.addEventListener("touchmove", noop, { passive: false }); return () => container.removeEventListener("touchmove", noop); }, [containerRef]); /** Stops the page from scrolling once the long press has completed */ const blockTouchMove = useCallback((e: Event) => { if (!pressRef.current?.isActive || !e.cancelable) return; e.preventDefault(); }, []); /** Ends the current touch press, whether it was pending or active */ const finishPress = useCallback(() => { const press = pressRef.current; if (!press) return; pressRef.current = null; if (press.timer !== null) clearTimeout(press.timer); if (handlePressMoveRef.current) { window.removeEventListener("pointermove", handlePressMoveRef.current); } if (handlePressEndRef.current) { window.removeEventListener("pointerup", handlePressEndRef.current); window.removeEventListener("pointercancel", handlePressEndRef.current); } press.touchTarget.removeEventListener("touchmove", blockTouchMove); if (!press.isActive) return; press.element.style.touchAction = press.previousTouchAction; // The browser may still send the touch's compatibility mousedown and // click. The mousedown would move focus (e.g. off a just-created // event's title) and the click would read as a background click. swallowNext("mousedown", TOUCH_FOLLOW_UP_WINDOW_MS); suppressNextClick("touch"); setTimeout(() => { window.removeEventListener("contextmenu", blockContextMenu, true); }, TOUCH_FOLLOW_UP_WINDOW_MS); }, [blockTouchMove]); useEffect(() => { handlePressMoveRef.current = (e: PointerEvent) => { const press = pressRef.current; if (!press || e.pointerId !== press.pointerId) return; press.lastClientX = e.clientX; press.lastClientY = e.clientY; if (press.isActive) return; const distance = Math.hypot( e.clientX - press.startClientX, e.clientY - press.startClientY, ); if (distance <= LONG_PRESS_MOVE_TOLERANCE_PX) return; // Moved before the long press completed: let the browser scroll finishPress(); }; handlePressEndRef.current = (e: PointerEvent) => { const press = pressRef.current; if (!press || e.pointerId !== press.pointerId) return; finishPress(); }; }, [finishPress]); // Cancel a pending or running touch press on unmount useEffect(() => { return finishPress; }, [finishPress]); const startGesture = useCallback( ( e: React.PointerEvent, onStart: (start: PointerGestureStart) => void, ) => { if (!isPrimaryPress(e)) return; const element = e.currentTarget; if (e.pointerType !== "touch") { onStart({ clientX: e.clientX, clientY: e.clientY, pointerId: e.pointerId, pointerType: e.pointerType, element, }); return; } finishPress(); const press: TouchPress = { pointerId: e.pointerId, startClientX: e.clientX, startClientY: e.clientY, lastClientX: e.clientX, lastClientY: e.clientY, element, touchTarget: e.target, isActive: false, previousTouchAction: "", timer: null, }; pressRef.current = press; press.touchTarget.addEventListener("touchmove", blockTouchMove, { passive: false, }); if (handlePressMoveRef.current) { window.addEventListener("pointermove", handlePressMoveRef.current); } if (handlePressEndRef.current) { window.addEventListener("pointerup", handlePressEndRef.current); window.addEventListener("pointercancel", handlePressEndRef.current); } press.timer = setTimeout(() => { press.timer = null; press.isActive = true; press.previousTouchAction = element.style.touchAction; element.style.touchAction = "none"; window.addEventListener("contextmenu", blockContextMenu, true); onStart({ clientX: press.lastClientX, clientY: press.lastClientY, pointerId: press.pointerId, pointerType: "touch", element, }); }, LONG_PRESS_DELAY_MS); }, [finishPress, blockTouchMove], ); return { startGesture }; } 87:T5ff,import * as React from "react"; import { getTimeZoneDisplayName, getTimeZoneLabel } from "@/lib/timezone-label"; /** * Label rendered on the server and during hydration. It must not depend on * the runtime's timezone, or server and client markup would differ (#418). */ const SERVER_TIMEZONE_LABEL = ""; /** No-op subscription: the label is re-read on every client render. */ function subscribe(): () => void { return () => {}; } function getClientSnapshot(): string { return getTimeZoneLabel(new Date()); } function getClientDisplayNameSnapshot(): string { return getTimeZoneDisplayName(new Date()); } function getServerSnapshot(): string { return SERVER_TIMEZONE_LABEL; } /** * Returns the viewer's short timezone label ("EDT", "GMT-3", "GMT+5:30"). * * Server rendering and the client's hydration render both return * `SERVER_TIMEZONE_LABEL`, so the markup matches. React then re-renders * with the client snapshot right after hydration. Client-only renders * (no SSR) get the real label on the first render. */ export function useTimeZoneLabel(): string { return React.useSyncExternalStore( subscribe, getClientSnapshot, getServerSnapshot, ); } /** * Returns the viewer's timezone label with its city ("GMT-3 Sao Paulo", * "EDT New York"). Like `useTimeZoneLabel`, it is empty on the server and * during hydration. */ export function useTimeZoneDisplayName(): string { return React.useSyncExternalStore( subscribe, getClientDisplayNameSnapshot, getServerSnapshot, ); } 88:Ta960,import { addMinutes, isSameDay, startOfDay, addDays, differenceInMinutes, isWithinInterval, areIntervalsOverlapping, startOfMonth, endOfDay, endOfMonth, startOfWeek, endOfWeek, eachWeekOfInterval, eachDayOfInterval, getWeek, format, isToday, isWeekend, parse, differenceInCalendarDays, } from "date-fns"; import type { Locale } from "date-fns"; import type { AgendaDay, AgendaEntry, CalendarConfig, CalendarEvent, EventColor, HourCycle, PositionedEvent, ViewType, VisibleRange, WeekDay, WeekStartsOn, } from "@/components/week-view-types"; /** Every event color, in the order the color pickers list them */ export const EVENT_COLORS: readonly EventColor[] = [ "red", "orange", "yellow", "green", "blue", "purple", "gray", ]; /** * Picks a random event color. When `previous` is given it is excluded, so * two picks in a row always differ (each click-created event looks new). */ export function pickRandomEventColor( previous: EventColor | null = null, ): EventColor { const choices = EVENT_COLORS.filter((color) => color !== previous); return choices[Math.floor(Math.random() * choices.length)]; } /** Duration in minutes of an event created by clicking an empty time slot */ export const NEW_EVENT_DURATION_MINUTES = 60; /** Days in a week: the week view's default column count and prev/next step */ const DAYS_PER_WEEK = 7; /** Days the agenda lists, from its first day; also its prev/next step */ export const AGENDA_DAYS = 30; /** * Format of a month cell's `data-date` attribute. A calendar date with no * time or offset, so it reads the same in every timezone and server-rendered * markup matches the client's. */ const CELL_DATE_FORMAT = "yyyy-MM-dd"; /** Formats a day as a month cell's `data-date` value ("2026-10-01"). */ export function formatCellDate(date: Date): string { return format(date, CELL_DATE_FORMAT); } /** Parses a month cell's `data-date` value into local midnight of that day. */ export function parseCellDate(value: string): Date { return parse(value, CELL_DATE_FORMAT, new Date()); } /** Rounds a minute offset to the nearest `snapMinutes` increment. */ export function snapToGrid(minutes: number, snapMinutes: number): number { return Math.round(minutes / snapMinutes) * snapMinutes; } /** * Returns the start/end of a new event created by clicking a day column at * `minutesFromMidnight`. The start snaps down to the `snapMinutes` slot that * contains the click, so the new event always covers the clicked point. * Near the end of the visible hours the start is clamped to the last full * event length, and near midnight the end is capped at the end of the day, * because an event ending at the next day's 00:00 counts as multi-day (see * isMultiDayEvent) and would render in the all-day row instead of the * clicked column. */ export function getNewEventRange( day: Date, minutesFromMidnight: number, { snapMinutes, dayStartHour, dayEndHour, }: Pick, ): { start: Date; end: Date } { const slotStart = Math.floor(minutesFromMidnight / snapMinutes) * snapMinutes; const startMinutes = Math.max( dayStartHour * 60, Math.min(slotStart, dayEndHour * 60 - NEW_EVENT_DURATION_MINUTES), ); const start = addMinutes(startOfDay(day), startMinutes); const end = addMinutes(start, NEW_EVENT_DURATION_MINUTES); if (isSameDay(start, end)) return { start, end }; return { start, end: endOfDay(start) }; } /** Returns true when a timed event spans across midnight into a different day. */ export function isMultiDayEvent(event: CalendarEvent): boolean { if (event.isAllDay) { return false; } return !isSameDay(event.start, event.end); } /** * Filters events for a specific day (excluding all-day and multi-day events) */ export function getEventsForDay( events: CalendarEvent[], day: WeekDay, ): CalendarEvent[] { const dayStart = startOfDay(day.date); const dayEnd = addDays(dayStart, 1); return events.filter((event) => { if (event.isAllDay || isMultiDayEvent(event)) { return false; } // Event spans this day if it starts before day end AND ends after day start return event.start < dayEnd && event.end > dayStart; }); } /** * Gets all-day events that span a specific day */ export function getAllDayEventsForDay( events: CalendarEvent[], day: WeekDay, ): CalendarEvent[] { return events.filter((event) => { if (!event.isAllDay) { return false; } const dayStart = startOfDay(day.date); const dayEnd = new Date(dayStart); dayEnd.setHours(23, 59, 59, 999); return ( isWithinInterval(dayStart, { start: event.start, end: event.end }) || isSameDay(event.start, day.date) || isSameDay(event.end, day.date) ); }); } /** * Checks if two events overlap in time */ function eventsOverlap(a: CalendarEvent, b: CalendarEvent): boolean { return areIntervalsOverlapping( { start: a.start, end: a.end }, { start: b.start, end: b.end }, ); } /** * Groups overlapping events into columns */ function assignColumns( events: CalendarEvent[], ): Map { const columnAssignments = new Map< string, { column: number; totalColumns: number } >(); if (events.length === 0) { return columnAssignments; } // Sort events by start time, then by duration (longer first) const sortedEvents = [...events].sort((a, b) => { const startDiff = a.start.getTime() - b.start.getTime(); if (startDiff !== 0) { return startDiff; } // Longer events first const durationA = a.end.getTime() - a.start.getTime(); const durationB = b.end.getTime() - b.start.getTime(); return durationB - durationA; }); // Find groups of overlapping events const groups: CalendarEvent[][] = []; const processed = new Set(); for (const event of sortedEvents) { if (processed.has(event.id)) { continue; } const group: CalendarEvent[] = [event]; processed.add(event.id); // Find all events that overlap with any event in the group let foundNew = true; while (foundNew) { foundNew = false; for (const otherEvent of sortedEvents) { if (processed.has(otherEvent.id)) { continue; } const overlapsWithGroup = group.some((groupEvent) => eventsOverlap(groupEvent, otherEvent), ); if (!overlapsWithGroup) { continue; } group.push(otherEvent); processed.add(otherEvent.id); foundNew = true; } } groups.push(group); } // Assign columns within each group for (const group of groups) { const columns: CalendarEvent[][] = []; // Sort group by start time group.sort((a, b) => a.start.getTime() - b.start.getTime()); for (const event of group) { // Find the first column where this event doesn't overlap with existing events let placed = false; for (let colIndex = 0; colIndex < columns.length; colIndex++) { const column = columns[colIndex]; const overlapsWithColumn = column.some((colEvent) => eventsOverlap(colEvent, event), ); if (overlapsWithColumn) { continue; } column.push(event); columnAssignments.set(event.id, { column: colIndex, totalColumns: 0 }); placed = true; break; } if (placed) { continue; } // Create new column columns.push([event]); columnAssignments.set(event.id, { column: columns.length - 1, totalColumns: 0, }); } // Update total columns for all events in group const totalColumns = columns.length; for (const event of group) { const assignment = columnAssignments.get(event.id); if (!assignment) { continue; } assignment.totalColumns = totalColumns; } } return columnAssignments; } /** * Calculates positioned events for rendering in the grid. `top` and * `height` are percentages of the visible hours (`dayStartHour` to * `dayEndHour`): events reaching past them are clipped to the edges, and * events entirely outside them are left out. * @param rightGapPercent - right gap in percentage. Defaults to 8. * Pass 0 for day view so events fill the full column width. */ export function calculatePositionedEvents( events: CalendarEvent[], day: WeekDay, { dayStartHour, dayEndHour, }: Pick, rightGapPercent = 8, ): PositionedEvent[] { const dayStart = startOfDay(day.date); const nextDayMidnight = addDays(dayStart, 1); const visibleStart = addMinutes(dayStart, dayStartHour * 60); const visibleEnd = addMinutes(dayStart, dayEndHour * 60); const visibleMinutes = (dayEndHour - dayStartHour) * 60; const dayEvents = getEventsForDay(events, day).filter( (event) => event.start < visibleEnd && event.end > visibleStart, ); if (dayEvents.length === 0) { return []; } const columnAssignments = assignColumns(dayEvents); return dayEvents.map((event) => { const assignment = columnAssignments.get(event.id) ?? { column: 0, totalColumns: 1, }; // Compute effective start/end clamped to the visible hours const effectiveStart = event.start > visibleStart ? event.start : visibleStart; const effectiveEnd = event.end < visibleEnd ? event.end : visibleEnd; // Calculate top position (percentage from the first visible hour) const minutesFromVisibleStart = differenceInMinutes( effectiveStart, visibleStart, ); const top = (minutesFromVisibleStart / visibleMinutes) * 100; // Calculate height (percentage of the visible hours) const durationMinutes = differenceInMinutes(effectiveEnd, effectiveStart); const height = (durationMinutes / visibleMinutes) * 100; // Determine segment position for multi-day events const startsOnDay = isSameDay(event.start, dayStart); const endsOnDay = event.end <= nextDayMidnight; let segmentPosition: "start" | "middle" | "end" | "full" = "full"; if (startsOnDay && !endsOnDay) { segmentPosition = "start"; } else if (!startsOnDay && endsOnDay) { segmentPosition = "end"; } else if (!startsOnDay && !endsOnDay) { segmentPosition = "middle"; } // Calculate left and width based on column assignment // Events cascade with overlap - leftmost event has no gap, rightmost has gap const rightGap = rightGapPercent; const overlapAmount = 8; // percentage overlap between adjacent events const { column, totalColumns } = assignment; let left: number; let width: number; if (totalColumns === 1) { // Single event: full width with right gap left = 0; width = 100 - rightGap; } else { // Multiple overlapping events // Formula: n * eventWidth - (n-1) * overlap = availableWidth // So: eventWidth = (availableWidth + (n-1) * overlap) / n const eventWidth = (100 - rightGap + overlapAmount * (totalColumns - 1)) / totalColumns; left = column * (eventWidth - overlapAmount); if (column === totalColumns - 1) { // Last event: fill to end (has the right gap) width = 100 - rightGap - left; } else { // Other events extend under the next one (no gap) width = eventWidth; } } return { event, top, height, left, width, column: assignment.column, totalColumns: assignment.totalColumns, segmentPosition, }; }); } /** * Groups all-day events by their visual row (for stacking) */ export interface AllDayEventRow { event: CalendarEvent; startColumn: number; endColumn: number; row: number; } export function calculateAllDayEventRows( events: CalendarEvent[], days: WeekDay[], ): AllDayEventRow[] { const allDayEvents = events.filter((e) => e.isAllDay || isMultiDayEvent(e)); if (allDayEvents.length === 0) { return []; } // Sort by start date, then by duration (longer first) const sortedEvents = [...allDayEvents].sort((a, b) => { const startDiff = a.start.getTime() - b.start.getTime(); if (startDiff !== 0) { return startDiff; } const durationA = a.end.getTime() - a.start.getTime(); const durationB = b.end.getTime() - b.start.getTime(); return durationB - durationA; }); const rows: AllDayEventRow[] = []; const occupiedRows: Map = new Map(); for (const event of sortedEvents) { // Find start and end columns let startColumn = -1; let endColumn = -1; for (let i = 0; i < days.length; i++) { const day = days[i]; const dayStart = startOfDay(day.date); if ( isSameDay(event.start, day.date) || (event.start <= dayStart && event.end >= dayStart) ) { if (startColumn === -1) { startColumn = i; } endColumn = i; } } if (startColumn === -1) { continue; } // Find the first row where this event fits let targetRow = 0; let foundRow = false; while (!foundRow) { const rowOccupied = occupiedRows.get(targetRow) ?? []; const hasConflict = rowOccupied.some( (occupied) => !(endColumn < occupied.start || startColumn > occupied.end), ); if (!hasConflict) { foundRow = true; break; } targetRow++; } // Mark the row as occupied const rowOccupied = occupiedRows.get(targetRow) ?? []; rowOccupied.push({ start: startColumn, end: endColumn }); occupiedRows.set(targetRow, rowOccupied); rows.push({ event, startColumn, endColumn, row: targetRow, }); } return rows; } // --------------------------------------------------------------------------- // Month-view utilities // --------------------------------------------------------------------------- /** Week rows the month view shows at once */ export const MONTH_VIEW_ROWS = 6; /** Height of a single event row in the month grid (px): h-5 (20px) + gap-px (1px) */ export const MONTH_EVENT_ROW_HEIGHT = 21; /** Height consumed by the day number header inside each cell (px) */ const MONTH_DAY_HEADER_HEIGHT = 28; /** Minimum visible event slots per month cell (just "+N more" at smallest) */ const MIN_MONTH_SLOTS = 1; /** Maximum visible event slots per month cell (matches Notion Calendar) */ const MAX_MONTH_SLOTS = 6; /** * One week row inside the month grid. */ export interface MonthWeekRow { weekNumber: number; days: WeekDay[]; } /** * A single slot inside a month day cell. * * - `event-bar` — a multi-day/all-day event bar that may span multiple columns * - `event-item` — a single-day timed event (dot + title) * - `more` — the "+N more" overflow indicator * - `spacer` — an empty placeholder to keep slot indices aligned */ export type MonthCellSlot = | { type: "event-bar"; event: CalendarEvent; colSpan: number; isStart: boolean; roundedLeft: boolean; roundedRight: boolean; } | { type: "event-item"; event: CalendarEvent } | { type: "more"; count: number } | { type: "spacer" }; /** * Fully resolved layout for a single day cell in the month grid. * * `barSlots` — spanning (multi-day/all-day) event bars and alignment spacers. * Rendered in a non-clipping container so bars can overflow * horizontally to span adjacent columns. * `eventSlots` — timed single-day events and the "+N more" indicator. * Rendered in an overflow-hidden container. */ export interface MonthDayCellLayout { date: Date; barSlots: MonthCellSlot[]; eventSlots: MonthCellSlot[]; totalEvents: number; } /** * Generates the month grid rows for a given date. * * Returns 4-6 week rows, each containing 7 `WeekDay` objects. * The grid always starts on `weekStartsOn` and includes leading/trailing * days from adjacent months so every row is complete. */ export function generateMonthGrid( currentDate: Date, weekStartsOn: WeekStartsOn, locale: Locale, ): MonthWeekRow[] { const monthStart = startOfMonth(currentDate); const monthEnd = endOfMonth(currentDate); const gridStart = startOfWeek(monthStart, { weekStartsOn }); const gridEnd = endOfWeek(monthEnd, { weekStartsOn }); const weekStarts = eachWeekOfInterval( { start: gridStart, end: gridEnd }, { weekStartsOn }, ); return weekStarts.map((weekStart) => { const weekEnd = endOfWeek(weekStart, { weekStartsOn }); const daysInWeek = eachDayOfInterval({ start: weekStart, end: weekEnd }); const days: WeekDay[] = daysInWeek.map((day) => ({ date: day, dayName: format(day, "EEE", { locale }), dayNumber: day.getDate(), isToday: isToday(day), })); return { weekNumber: getWeek(weekStart, { weekStartsOn, locale }), days, }; }); } /** * Generates `count` consecutive MonthWeekRows starting from the week * containing `startDate`. Used as the base grid for the month view * so it can scroll row-by-row without anchoring to a calendar month. */ export function generateConsecutiveWeeks( startDate: Date, count: number, weekStartsOn: WeekStartsOn, locale: Locale, ): MonthWeekRow[] { const firstWeekStart = startOfWeek(startDate, { weekStartsOn }); return Array.from({ length: count }, (_, i) => generateWeekRow(addDays(firstWeekStart, i * 7), weekStartsOn, locale), ); } /** * Generates a single MonthWeekRow for the week containing the given date. * Used by vertical scroll to extend the buffer one row at a time. */ export function generateWeekRow( date: Date, weekStartsOn: WeekStartsOn, locale: Locale, ): MonthWeekRow { const weekStart = startOfWeek(date, { weekStartsOn }); const weekEnd = endOfWeek(weekStart, { weekStartsOn }); const daysInWeek = eachDayOfInterval({ start: weekStart, end: weekEnd }); const days: WeekDay[] = daysInWeek.map((day) => ({ date: day, dayName: format(day, "EEE", { locale }), dayNumber: day.getDate(), isToday: isToday(day), })); return { weekNumber: getWeek(weekStart, { weekStartsOn, locale }), days, }; } /** * Returns the number of visible event slots for a month cell given its * pixel height. * * Clamped to [`MIN_MONTH_SLOTS`, `MAX_MONTH_SLOTS`]. */ export function getMonthSlotCount(cellHeight: number): number { const usable = cellHeight - MONTH_DAY_HEADER_HEIGHT; const raw = Math.floor(usable / MONTH_EVENT_ROW_HEIGHT); return Math.max(MIN_MONTH_SLOTS, Math.min(MAX_MONTH_SLOTS, raw)); } /** * Computes the full layout (slot arrays) for every day cell in the month grid. * * The algorithm processes one week row at a time so that spanning events keep * a stable slot index across columns. Timed (single-day) events fill the * remaining slots. When the total events exceed `maxSlots`, the last slot is * replaced with a "+N more" indicator. * * The returned Map is keyed by `startOfDay(date).toISOString()`. */ export function calculateMonthCellLayout( weekRows: MonthWeekRow[], events: CalendarEvent[], maxSlots: number, ): Map { const result = new Map(); for (const row of weekRows) { const rowStart = startOfDay(row.days[0].date); const rowEnd = addDays(startOfDay(row.days[row.days.length - 1].date), 1); // ---- 1. Identify spanning events (all-day OR multi-day) that overlap this week row ---- const spanningEvents = events.filter((ev) => { if (!ev.isAllDay && !isMultiDayEvent(ev)) { return false; } const evStart = startOfDay(ev.start); const evEnd = ev.isAllDay ? addDays(startOfDay(ev.end), 1) : ev.end; return evStart < rowEnd && evEnd > rowStart; }); // Sort: longest first, then alphabetically by title spanningEvents.sort((a, b) => { const durA = a.end.getTime() - a.start.getTime(); const durB = b.end.getTime() - b.start.getTime(); if (durB !== durA) { return durB - durA; } return a.title.localeCompare(b.title); }); // ---- 2. Assign stable slot indices for spanning events ---- // slotAssignments[slotIndex] = array of { event, startCol, endCol } const slotAssignments: { event: CalendarEvent; startCol: number; endCol: number; }[][] = []; for (const ev of spanningEvents) { const evStart = startOfDay(ev.start); const evEnd = ev.isAllDay ? addDays(startOfDay(ev.end), 1) : ev.end; // Determine column range within this week row (0-6) let startCol = 0; let endCol = 6; for (let i = 0; i < row.days.length; i++) { const dayStart = startOfDay(row.days[i].date); const dayEnd = addDays(dayStart, 1); if (evStart < dayEnd && evEnd > dayStart) { startCol = i; break; } } for (let i = row.days.length - 1; i >= 0; i--) { const dayStart = startOfDay(row.days[i].date); const dayEnd = addDays(dayStart, 1); if (evStart < dayEnd && evEnd > dayStart) { endCol = i; break; } } // Find the first slot index where no existing assignment overlaps let targetSlot = 0; let placed = false; while (!placed) { if (targetSlot >= slotAssignments.length) { slotAssignments.push([]); } const occupied = slotAssignments[targetSlot]; const hasConflict = occupied.some( (o) => !(endCol < o.startCol || startCol > o.endCol), ); if (!hasConflict) { occupied.push({ event: ev, startCol, endCol }); placed = true; } else { targetSlot++; } } } // ---- 3. Collect timed (single-day) events per column ---- const timedByCol: CalendarEvent[][] = row.days.map(() => []); for (const ev of events) { if (ev.isAllDay || isMultiDayEvent(ev)) { continue; } for (let col = 0; col < row.days.length; col++) { const dayStart = startOfDay(row.days[col].date); const dayEnd = addDays(dayStart, 1); if (ev.start < dayEnd && ev.end > dayStart) { timedByCol[col].push(ev); } } } // Sort each column's timed events by start time for (const colEvents of timedByCol) { colEvents.sort((a, b) => a.start.getTime() - b.start.getTime()); } // ---- 4. Build slots for each day cell ---- for (let col = 0; col < row.days.length; col++) { const day = row.days[col]; const key = startOfDay(day.date).toISOString(); const barSlots: MonthCellSlot[] = []; const eventSlots: MonthCellSlot[] = []; // Count total events touching this cell let totalEvents = timedByCol[col].length; for (const slotRow of slotAssignments) { for (const assignment of slotRow) { if (col >= assignment.startCol && col <= assignment.endCol) { totalEvents++; } } } // Find the highest slot index that has a spanning event covering this column. // Only iterate up to that index so days without certain spanning events // don't get unnecessary spacer gaps. let maxSpanSlotIdx = -1; for (let slotIdx = 0; slotIdx < slotAssignments.length; slotIdx++) { const hasEvent = slotAssignments[slotIdx].some( (a) => col >= a.startCol && col <= a.endCol, ); if (hasEvent) { maxSpanSlotIdx = slotIdx; } } // Fill bar slots — start cells get the full colSpan for visual spanning, // continuation cells get placeholders to maintain vertical alignment. for (let slotIdx = 0; slotIdx <= maxSpanSlotIdx; slotIdx++) { const assignment = slotAssignments[slotIdx].find( (a) => col >= a.startCol && col <= a.endCol, ); if (!assignment) { barSlots.push({ type: "spacer" }); continue; } const isStart = col === assignment.startCol; const colSpan = assignment.endCol - col + 1; const evEnd = assignment.event.isAllDay ? addDays(startOfDay(assignment.event.end), 1) : assignment.event.end; const roundedLeft = isStart && (isSameDay(assignment.event.start, day.date) || col === 0); // For roundedRight, check the END column of the assignment (not the // current col) so spanning bars rendered from the start cell get the // correct rounding on their trailing edge. const endDay = row.days[assignment.endCol].date; const roundedRight = evEnd <= addDays(startOfDay(endDay), 1) || assignment.endCol === row.days.length - 1; if (isStart) { barSlots.push({ type: "event-bar", event: assignment.event, colSpan, isStart: true, roundedLeft, roundedRight, }); } else { // Continuation — invisible placeholder (bar rendered from start cell) barSlots.push({ type: "spacer" }); } } // Fill remaining slots with timed events. const usedSlots = barSlots.length; const remainingSlots = maxSlots - usedSlots; const timedEvents = timedByCol[col]; if (timedEvents.length < remainingSlots) { for (const ev of timedEvents) { eventSlots.push({ type: "event-item", event: ev }); } } else if (timedEvents.length === 0) { // Nothing to render } else { const availableForTimed = Math.max(0, remainingSlots - 1); const timedToShow = timedEvents.slice(0, availableForTimed); for (const ev of timedToShow) { eventSlots.push({ type: "event-item", event: ev }); } const hiddenCount = timedEvents.length - timedToShow.length; if (hiddenCount > 0) { eventSlots.push({ type: "more", count: hiddenCount }); } } result.set(key, { date: day.date, barSlots, eventSlots, totalEvents, }); } } return result; } /** * Returns how many days a view shows: one in day view, `numberOfDays` (at * least one) in week view, a full week in month view, `AGENDA_DAYS` in the * agenda. */ export function getVisibleDayCount( view: ViewType, numberOfDays: number, ): number { if (view === "day") return 1; if (view === "month") return DAYS_PER_WEEK; if (view === "agenda") return AGENDA_DAYS; return Math.max(1, Math.round(numberOfDays)); } /** * Returns how many days the week view moves per prev/next: its column count * when that is shorter than a week, a full week otherwise. */ export function getWeekViewStepDays(numberOfDays: number): number { return Math.min(getVisibleDayCount("week", numberOfDays), DAYS_PER_WEEK); } /** * Returns the first day of the period that contains `date`: the day itself * in day view, the agenda and a week view shorter than a week, the start of * its week otherwise. */ export function getPeriodStart( date: Date, view: ViewType, weekStartsOn: WeekStartsOn, numberOfDays: number, ): Date { if (view === "day" || view === "agenda") return startOfDay(date); if (view === "week" && getWeekViewStepDays(numberOfDays) < DAYS_PER_WEEK) { return startOfDay(date); } return startOfWeek(date, { weekStartsOn }); } /** * Returns the visible days starting from the given date (used for sidebar highlighting) */ export function getVisibleDays( currentDate: Date, view: ViewType, numberOfDays: number, ): Date[] { const count = getVisibleDayCount(view, numberOfDays); const end = addDays(currentDate, count - 1); return eachDayOfInterval({ start: currentDate, end }); } /** * Returns the dates a view draws, from the first visible day's midnight to * the midnight after the last (end exclusive). Day and week views start on * `currentDate` and span their columns, and the agenda its `AGENDA_DAYS` * days. Month view spans its whole grid, * `MONTH_VIEW_ROWS` weeks from the week containing `currentDate`, days of * other months included; with weekends hidden, the weekend columns at the * grid's edges are left out. Only month view hides weekends, so * `showWeekends` doesn't change the other views' range. */ export function getVisibleRange( currentDate: Date, view: ViewType, numberOfDays: number, weekStartsOn: WeekStartsOn, showWeekends: boolean, ): VisibleRange { if (view !== "month") { const start = startOfDay(currentDate); const end = addDays(start, getVisibleDayCount(view, numberOfDays)); return { start, end }; } let start = startOfWeek(currentDate, { weekStartsOn }); let end = addDays(start, MONTH_VIEW_ROWS * DAYS_PER_WEEK); if (showWeekends) return { start, end }; while (isWeekend(start)) start = addDays(start, 1); while (isWeekend(addDays(end, -1))) end = addDays(end, -1); return { start, end }; } /** * Returns the month name, year, and week number for the visible range. * * `rangeEnd` is the last visible day, and it is what names the month. A week * straddling a month boundary is labeled with the later month — Notion Calendar * shows "October 2026" for Sep 27 - Oct 3 — rather than the month of the first * day, which would label that week "September". Omitting `rangeEnd` labels * `currentDate` alone, which is what month view wants. * * The week number stays derived from `currentDate` (the week's first day). */ export function getCalendarHeaderInfo( currentDate: Date, weekStartsOn: WeekStartsOn, locale: Locale, rangeEnd?: Date, ) { const labelDate = rangeEnd ?? currentDate; return { monthName: format(labelDate, "MMMM", { locale }), year: format(labelDate, "yyyy", { locale }), weekNumber: getWeek(currentDate, { weekStartsOn, locale }), }; } // --------------------------------------------------------------------------- // Agenda // --------------------------------------------------------------------------- /** First and last day an event covers, at the start of each day */ function getEventDayRange(event: CalendarEvent): { first: Date; last: Date } { const first = startOfDay(event.start); // All-day events end on the start of their last day. A timed event that // ends at midnight doesn't reach into the day that starts then. if (event.isAllDay || event.end <= event.start) { return { first, last: startOfDay(event.end) }; } return { first, last: startOfDay(new Date(event.end.getTime() - 1)) }; } /** * Minutes into `day` an entry starts, for sorting: 0 when it was already * going on when the day began */ function getEntryStartMinutes(entry: AgendaEntry, day: Date): number { if (entry.dayIndex > 1) return 0; return differenceInMinutes(entry.event.start, day); } /** Orders a day's entries: whole-day ones first (longest first), then by start */ function compareAgendaEntries( a: AgendaEntry, b: AgendaEntry, day: Date, ): number { if (a.isAllDayOnThisDay !== b.isAllDayOnThisDay) { return a.isAllDayOnThisDay ? -1 : 1; } if (a.isAllDayOnThisDay && a.dayCount !== b.dayCount) { return b.dayCount - a.dayCount; } const startDifference = getEntryStartMinutes(a, day) - getEntryStartMinutes(b, day); if (startDifference !== 0) return startDifference; const endDifference = a.event.end.getTime() - b.event.end.getTime(); if (endDifference !== 0) return endDifference; return a.event.title.localeCompare(b.event.title); } /** * Lists the events of `dayCount` days from `firstDay`, one `AgendaDay` per * day (including days without events). An event spanning several days is * listed under each of them, with its position (`dayIndex` of `dayCount`). * All-day events use the calendar's convention: `end` is the start of their * last day. */ export function getAgendaDays( events: CalendarEvent[], firstDay: Date, dayCount: number, ): AgendaDay[] { const rangeStart = startOfDay(firstDay); const rangeEnd = addDays(rangeStart, Math.max(1, dayCount) - 1); const ranges = events .map((event) => ({ event, ...getEventDayRange(event) })) .filter(({ first, last }) => first <= rangeEnd && last >= rangeStart); return eachDayOfInterval({ start: rangeStart, end: rangeEnd }).map((date) => { const entries = ranges .filter(({ first, last }) => first <= date && last >= date) .map(({ event, first, last }): AgendaEntry => { const dayIndex = differenceInCalendarDays(date, first) + 1; const dayCount = differenceInCalendarDays(last, first) + 1; const isAllDayOnThisDay = Boolean(event.isAllDay) || (dayIndex > 1 && dayIndex < dayCount); return { event, dayIndex, dayCount, isAllDayOnThisDay }; }) .sort((a, b) => compareAgendaEntries(a, b, date)); return { date, entries }; }); } /** * When an agenda entry happens on its day: "All day", the time range * ("10–11 AM"), or for a multi-day timed event "From 4 PM" on its first day * and "Until 1 PM" on its last */ export function formatAgendaTime( entry: AgendaEntry, hourCycle: HourCycle, locale: Locale, ): string { const { event, dayIndex, dayCount, isAllDayOnThisDay } = entry; if (isAllDayOnThisDay) return "All day"; if (dayCount === 1) { return formatTimeRange(event.start, event.end, hourCycle, locale); } if (dayIndex === 1) return `From ${formatTime(event.start, hourCycle, locale)}`; return `Until ${formatTime(event.end, hourCycle, locale)}`; } /** Which day of a multi-day event an entry is ("Day 2 of 3"), or `null` */ export function formatAgendaDayOfSpan(entry: AgendaEntry): string | null { if (entry.dayCount === 1) return null; return `Day ${entry.dayIndex} of ${entry.dayCount}`; } // --------------------------------------------------------------------------- // Time labels // --------------------------------------------------------------------------- /** * Formats a time of day: "3 PM" / "3:30 PM" on a 12-hour clock, "15:00" / * "15:30" on a 24-hour clock. */ export function formatTime( date: Date, hourCycle: HourCycle, locale: Locale, ): string { if (hourCycle === 24) return format(date, "HH:mm", { locale }); if (date.getMinutes() === 0) return format(date, "h a", { locale }); return format(date, "h:mm a", { locale }); } /** * Formats a time range compactly: "10–11 AM" or "11 AM–2 PM" (the period * is shown once when both ends share it) on a 12-hour clock, "10:00–11:00" * on a 24-hour clock. */ export function formatTimeRange( start: Date, end: Date, hourCycle: HourCycle, locale: Locale, ): string { if (hourCycle === 24) { return `${format(start, "HH:mm", { locale })}\u2013${format(end, "HH:mm", { locale })}`; } const startTime = formatHourAndMinutes(start, locale); const endTime = formatHourAndMinutes(end, locale); const startPeriod = format(start, "a", { locale }); const endPeriod = format(end, "a", { locale }); if (startPeriod === endPeriod) { return `${startTime}\u2013${endTime} ${endPeriod}`; } return `${startTime} ${startPeriod}\u2013${endTime} ${endPeriod}`; } /** 12-hour clock without the period, minutes only when set: "10", "2:45" */ function formatHourAndMinutes(date: Date, locale: Locale): string { if (date.getMinutes() === 0) return format(date, "h", { locale }); return format(date, "h:mm", { locale }); } /** * Formats an hour of the day (0-23) for the time axis: "12 AM", "1 AM", ... * "11 PM" on a 12-hour clock, "00:00" ... "23:00" on a 24-hour clock. * * Computed from the number alone, not from a Date on today's date: on a * daylight-saving transition day, setting the hour that is skipped would * yield the next hour, so the labels would depend on the runtime's timezone * and date and could differ between server and client. */ export function formatHourLabel( hour: number, hourCycle: HourCycle, locale: Locale, ): string { if (hourCycle === 24) return `${String(hour).padStart(2, "0")}:00`; const hourOnClock = hour % 12 === 0 ? 12 : hour % 12; // Same period text as `format(date, "a")` const period = locale.localize.dayPeriod(hour < 12 ? "am" : "pm", { width: "abbreviated", context: "formatting", }); return `${hourOnClock} ${period}`; } // --------------------------------------------------------------------------- // Accessibility: labels, announcements and keyboard editing // --------------------------------------------------------------------------- /** Name read for an event whose title is empty */ const UNTITLED_EVENT_LABEL = "Untitled event"; /** Minutes in a full day; a keyboard move never ends an event past it */ const MINUTES_PER_DAY = 24 * 60; /** Days a month-view event moves per Alt+ArrowUp/Down (one row) */ const MONTH_KEYBOARD_STEP_DAYS = 7; /** Day a date falls on, read in full: "Tuesday, October 31" in the calendar's locale */ export function formatFullDate(date: Date, locale: Locale): string { return new Intl.DateTimeFormat(locale.code, { weekday: "long", month: "long", day: "numeric", }).format(date); } /** Time with minutes, as read aloud: "3:00 PM", or "15:00" on a 24-hour clock */ function formatSpokenTime( date: Date, hourCycle: HourCycle, locale: Locale, ): string { return format(date, hourCycle === 24 ? "HH:mm" : "h:mm a", { locale }); } /** An event's title, or a stand-in when it has none */ function getSpokenTitle(event: CalendarEvent): string { return event.title.trim() || UNTITLED_EVENT_LABEL; } /** * When an event happens, as read aloud: "3:00 PM to 4:00 PM, Tuesday, * October 31", "all day, Tuesday, October 31", or a range across days. */ export function describeEventTime( event: CalendarEvent, hourCycle: HourCycle, locale: Locale, ): string { const startDate = formatFullDate(event.start, locale); const endDate = formatFullDate(event.end, locale); if (event.isAllDay) { if (isSameDay(event.start, event.end)) return `all day, ${startDate}`; return `all day, ${startDate} to ${endDate}`; } const startTime = formatSpokenTime(event.start, hourCycle, locale); const endTime = formatSpokenTime(event.end, hourCycle, locale); if (isSameDay(event.start, event.end)) { return `${startTime} to ${endTime}, ${startDate}`; } return `${startDate}, ${startTime} to ${endDate}, ${endTime}`; } /** * Accessible name of an event: its title, then when it happens * ("Team sync, 3:00 PM to 4:00 PM, Tuesday, October 31") */ export function getEventLabel( event: CalendarEvent, hourCycle: HourCycle, locale: Locale, ): string { return `${getSpokenTitle(event)}, ${describeEventTime(event, hourCycle, locale)}`; } /** * What to announce after an event changed: "Moved Team sync to Wednesday, * November 4, 3:00 PM", or "Resized Team sync, now ..." when its length * changed. Returns `null` when its time didn't change (e.g. a title edit). */ export function describeEventChange( previous: CalendarEvent, next: CalendarEvent, hourCycle: HourCycle, locale: Locale, ): string | null { const isSameTime = previous.start.getTime() === next.start.getTime() && previous.end.getTime() === next.end.getTime() && Boolean(previous.isAllDay) === Boolean(next.isAllDay); if (isSameTime) return null; const title = getSpokenTitle(next); const previousLength = previous.end.getTime() - previous.start.getTime(); const nextLength = next.end.getTime() - next.start.getTime(); if (previousLength !== nextLength) { return `Resized ${title}, now ${describeEventTime(next, hourCycle, locale)}`; } const startDate = formatFullDate(next.start, locale); if (next.isAllDay) return `Moved ${title} to ${startDate}`; return `Moved ${title} to ${startDate}, ${formatSpokenTime(next.start, hourCycle, locale)}`; } /** What to announce after an event was created ("Created New event, ...") */ export function describeEventCreated( event: CalendarEvent, hourCycle: HourCycle, locale: Locale, ): string { return `Created ${getSpokenTitle(event)}, ${describeEventTime(event, hourCycle, locale)}`; } /** * Returns the event after an Alt+Arrow key press on it, or `null` when the * key doesn't apply (or the event can't move further): * * - Alt+ArrowLeft/Right: one day earlier/later * - Alt+ArrowUp/Down: one `snapMinutes` step earlier/later in the day and * week views (single-day timed events only, kept inside the visible * hours), one week earlier/later in month view * - Alt+Shift+ArrowUp/Down: the end one step earlier/later (day and week * views, single-day timed events, at least one step long) */ export function getKeyboardEventChange( event: CalendarEvent, key: string, shiftKey: boolean, view: ViewType, { snapMinutes, dayStartHour, dayEndHour, }: Pick, ): CalendarEvent | null { const direction = key === "ArrowRight" || key === "ArrowDown" ? 1 : -1; if (key === "ArrowLeft" || key === "ArrowRight") { if (shiftKey) return null; return { ...event, start: addDays(event.start, direction), end: addDays(event.end, direction), }; } if (key !== "ArrowUp" && key !== "ArrowDown") return null; // Month view has no time axis: up and down move by a row (a week) if (view === "month") { if (shiftKey) return null; const days = direction * MONTH_KEYBOARD_STEP_DAYS; return { ...event, start: addDays(event.start, days), end: addDays(event.end, days), }; } // Only single-day timed events have a time of day to change if (event.isAllDay || isMultiDayEvent(event)) return null; const dayStart = startOfDay(event.start); const startMinutes = differenceInMinutes(event.start, dayStart); const endMinutes = differenceInMinutes(event.end, dayStart); const visibleStart = dayStartHour * 60; const visibleEnd = dayEndHour * 60; // Next grid line in the key's direction, so an off-grid time lands on it const step = (minutes: number) => direction > 0 ? Math.floor(minutes / snapMinutes) * snapMinutes + snapMinutes : Math.ceil(minutes / snapMinutes) * snapMinutes - snapMinutes; const clampMinutes = (minutes: number, min: number, max: number) => Math.min(Math.max(minutes, min), max); // Ending at the next midnight would make it a multi-day event (all-day row) const toDate = (minutes: number) => minutes >= MINUTES_PER_DAY ? endOfDay(dayStart) : addMinutes(dayStart, minutes); if (shiftKey) { const nextEnd = clampMinutes( step(endMinutes), startMinutes + snapMinutes, visibleEnd, ); if (nextEnd === endMinutes) return null; return { ...event, end: toDate(nextEnd) }; } const length = endMinutes - startMinutes; const nextStart = clampMinutes( step(startMinutes), visibleStart, visibleEnd - length, ); if (nextStart === startMinutes) return null; return { ...event, start: toDate(nextStart), end: toDate(nextStart + length), }; } 89:T67a,/** Locale used to format the timezone label ("EDT", "GMT-3", "GMT+5:30"). */ const TIMEZONE_LABEL_LOCALE = "en-US"; /** * Returns the short timezone label for `date` in `timeZone` (the runtime's * zone when omitted), e.g. "EDT", "UTC", "GMT-3" or "GMT+5:30". * * Zones without an English abbreviation are reported by `Intl` as a GMT * offset, which is returned as-is so every zone gets a visible label. * Returns an empty string only if the runtime provides no timezone name. */ export function getTimeZoneLabel(date: Date, timeZone?: string): string { const parts = new Intl.DateTimeFormat(TIMEZONE_LABEL_LOCALE, { timeZone, timeZoneName: "short", }).formatToParts(date); return parts.find((part) => part.type === "timeZoneName")?.value ?? ""; } /** * Returns the city of an IANA timezone, e.g. "Sao Paulo" for * "America/Sao_Paulo". Zones without one ("UTC", "Etc/GMT+3") return an * empty string. */ export function getTimeZoneCity(timeZone: string): string { if (!timeZone.includes("/") || timeZone.startsWith("Etc/")) return ""; return timeZone.slice(timeZone.lastIndexOf("/") + 1).replace(/_/g, " "); } /** * Returns the short timezone label followed by the zone's city, e.g. * "GMT-3 Sao Paulo" or "EDT New York", for `timeZone` (the runtime's zone * when omitted). Zones without a city return the label alone. */ export function getTimeZoneDisplayName(date: Date, timeZone?: string): string { const zone = timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone; const label = getTimeZoneLabel(date, zone); const city = getTimeZoneCity(zone); if (!city) return label; return `${label} ${city}`; } 69:["$","$L7c",null,{"files":[{"path":"src/components/calendar-types.ts","content":"$7d","type":"registry:component"},{"path":"src/components/week-view-types.ts","content":"$7e","type":"registry:component"},{"path":"src/components/calendar-provider.tsx","content":"$7f","type":"registry:component"},{"path":"src/components/calendar-popover-context.tsx","content":"$80","type":"registry:component"},{"path":"src/components/event-title-focus-context.tsx","content":"$81","type":"registry:component"},{"path":"src/components/calendar-loading-bar.tsx","content":"import { cn } from \"@/lib/utils\";\n\n/** Props for CalendarLoadingBar */\ninterface CalendarLoadingBarProps {\n /** Classes for the bar's track, e.g. to inset it past the time axis */\n className?: string;\n}\n\n/**\n * Thin indeterminate progress bar along the bottom edge of a view's header,\n * drawn while the provider's `loading` prop is set. Place it inside a\n * `relative` header. It takes no pointer events, so everything under it\n * stays usable.\n */\nexport function CalendarLoadingBar({ className }: CalendarLoadingBarProps) {\n return (\n \n

\n );\n}\n","type":"registry:component"},{"path":"src/hooks/use-calendar-shortcuts.ts","content":"$82","type":"registry:hook"},{"path":"src/hooks/use-controllable-state.ts","content":"$83","type":"registry:hook"},{"path":"src/hooks/use-event-keyboard.ts","content":"$84","type":"registry:hook"},{"path":"src/hooks/use-now.ts","content":"$85","type":"registry:hook"},{"path":"src/hooks/use-pointer-gesture.ts","content":"$86","type":"registry:hook"},{"path":"src/hooks/use-timezone-label.ts","content":"$87","type":"registry:hook"},{"path":"src/lib/event-utils.ts","content":"$88","type":"registry:lib"},{"path":"src/lib/timezone-label.ts","content":"$89","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]