NNexusDocumentation
Live demo
GuideComponents

Calendar & Kanban Patterns

Customize event and task data while keeping large workspaces and modal detail behavior intact.

9 min readComponentsUpdated for Nexus 0.1
On this page 4

What you will learn

  • Replace event and task demo data.
  • Preserve the full-width work area.
  • Keep detail dialogs single-scroll.

Data model

Define stable IDs, timestamps, status, assignee, and display metadata in your domain layer. Convert API values to display labels at the UI boundary.

tsx
type Task = {
  id: string;
  title: string;
  status: "backlog" | "active" | "done";
  assigneeId?: string;
  dueAt?: string;
};

Detail behavior

Selecting an event or task opens its detail in the shared scale dialog so Calendar and Kanban retain the full content width. Keep the detail panel out of the main grid.

  • Trigger remains identifiable
  • Dialog title names the record
  • One vertical scrollbar
  • Close restores focus
  • Mobile content wraps

Mutations

Drag, drop, date changes, and status changes should be optimistic only when the operation is safely reversible. Revert the UI and explain the failure when the server rejects a mutation.

Continue learning