Database

Calendar View

Month grid of rows placed on their date property. Drag an event to another day; hover a day to add a page.

Tasks
October 2026

Usage

  • Use the calendar layout when a date property is the main way people find rows (events, deadlines, publishing).
  • Set view.dateProperty explicitly when the collection has more than one date property.
  • Don’t use a calendar for date ranges that span weeks; use the timeline layout instead.
  • Don’t make drag and drop the only way to reschedule; the date cell in the row peek is the keyboard path.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/CalendarViewExample.tsx
import { DatabaseView, SAMPLE_TODAY, createTasksSample } from '@krackedui/motion';

export function CalendarViewExample() {
  return (
    <DatabaseView data={createTasksSample()} initialViewId="v-calendar" today={SAMPLE_TODAY} />
  );
}

Examples

Calendar toolbar

The month header is shared with the timeline.

October 2026

Composition

Views read the database from context, so render them inside <DatabaseView> (which picks the active view for you) or inside your own <DatabaseProvider value={useDatabase(...)}>.

anatomy
<CalendarView>
  CalendarToolbar  → month label · "Manage in Calendar" · ‹ Today ›
  weekday header (24px)
  role="grid" → row (week, 124px) → gridcell (day number, today circle, "+" add) → event cards
</CalendarView>

API Reference

CalendarView

PropTypeDefault
onOpenRow
(row: Row) => void
today
string

CalendarToolbar

PropTypeDefault
label
ReactNode
onPrev
() => void
onNext
() => void
onToday
() => void
extra
ReactNode
leading
ReactNode
className
string

Accessibility

  • Month grid is role="grid" with row / gridcell; prev/next buttons are labelled "Previous Month" / "Next Month".
  • Events are buttons that open the page; the day "+" button is labelled "Add page".
  • Moving an event to another day is drag-only; change the date from the peek’s date cell with the keyboard.
© 2026 Motion. Internal documentation.