Event Calendar — Editing
ilinxa/event-calendar-editingFreeBlock
Drag-and-resize editing, quick-compose creation, keyboard mutations, cross-surface clipboard, and permission-gated actions for the event calendar.
Install it
npx shadcn@latest add https://ui.ilinxa.com/r/event-calendar-editing.jsonSource
1"use client";23/**4 * The editing feature's Provider — the implementation `event-calendar`'s5 * `editing?: CalendarEditExtension` prop wires in. Mounted by6 * `EventCalendarRoot` (base) only when BOTH `editable` and `editing` are set.7 *8 * Reads the base calendar context (`useCalendar()`) for the fields the edit9 * state machine and gestures need (occurrences / view / focusDate /10 * scrollToHour / selectedId / select / statusOptions) — it is rendered INSIDE11 * `CalendarContext.Provider`, so this resolves. Runs the `useCalendarEdit`12 * state machine, builds the `@dnd-kit` sensors + `onDragEnd` (day-granular13 * drag-to-reschedule), the cross-surface clipboard effect, the focus-restore14 * effect (F-11), and the `handleEventKey` / `handleDayEnterKey` /15 * `handleMethods` glue the base Root's keyboard router + imperative handle16 * delegate to — then supplies the whole `CalendarEditContextValue`17 * (dispatchers + transient UI state + the `components`/`gestures` records the18 * base parts render through) via `CalendarEditContext`, wrapped in the19 * `DndContext`. Mounts nothing visual itself.20 */2122import { useCallback, useEffect, useMemo, useRef } from "react";23import type { KeyboardEvent, ReactNode } from "react";24import { DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";25import type { DragEndEvent } from "@dnd-kit/core";26import { addDays, differenceInCalendarDays, startOfDay } from "date-fns";27import { useCalendar } from "../../hooks/use-calendar-context";28import { CalendarEditContext } from "../../hooks/use-calendar-edit-extension";29import type {30 CalendarEditContextValue,31 CalendarEditProps,32} from "../../hooks/use-calendar-edit-extension";33import { coveredDays } from "../../lib/segments";34import { snapStepMs } from "./lib/edit-mutations";35import { useCalendarEdit } from "./hooks/use-calendar-edit";36import { useCalendarClipboard } from "./lib/clipboard-effect";37import { createTimeGridGestures, BandDropCell } from "./lib/time-grid-gestures";38import { DraggableEventWrap } from "./parts/calendar-edit-affordances";39import { DroppableDayCell } from "./parts/droppable-day-cell";40import { CalendarEventContextMenu } from "./parts/calendar-context-menu";41import {42 CalendarEventEditorOverlay,43 CalendarRenameField,44 EventEditorPanel,45} from "./parts/calendar-edit-overlays";46import { CalendarQuickComposer } from "./parts/calendar-quick-composer";47import type { CalendarOccurrence, TaskItem } from "../../types";4849// … truncated
What it pulls in
npm packages
Other registry items
Files it writes
More from ilinxa
All 184 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Account Switcheraccount-switcher | ilinxa | Blocks | Free | 1 dep · 10 files | |
| Account Switcher (deprecated alias)account-switcher-01 | ilinxa | Blocks | Free | no deps | |
| Account Switcher — fixturesaccount-switcher-fixtures | ilinxa | Blocks | Free | no deps | |
| App Sidebarapp-sidebar | ilinxa | Blocks | Free | 1 dep · 37 files | |
| App Sidebar — fixturesapp-sidebar-fixtures | ilinxa | Blocks | Free | no deps | |
| Rich Text Editor (deprecated alias)article-body-01 | ilinxa | Blocks | Free | no deps | |
| Article Metaarticle-meta | ilinxa | Blocks | Free | 1 dep · 4 files | |
| Article Meta (deprecated alias)article-meta-01 | ilinxa | Blocks | Free | no deps |
