skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

reui-gantt-calendar-patterns

Implements reui Gantt and Event Calendar scheduling components in React applications.

Updated Aug 2, 2026
Search Tags:#react#scheduling#shadcn#drag-and-drop#recurrence#gantt chart#event calendar
One-click install
npx skills add https://github.com/leonardoacosta/skills --skill reui-gantt-calendar-patterns-leonardoacosta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: reui-gantt-calendar-patterns
Source: https://github.com/leonardoacosta/skills/tree/main/web-frontend-kit/skills/reui-gantt-calendar-patterns
Command: npx skills add https://github.com/leonardoacosta/skills --skill reui-gantt-calendar-patterns-leonardoacosta

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @reui/gantt, @reui/event-calendar, @base-ui/react, date-fns, @date-fns/tz, and includes references (resource) components.

What problem does it solve? Building project-scheduling Gantt charts or booking/event calendars in React requires knowing reui's exact API surface — prop names, callback contracts, and data shapes that silently break when guessed. This Skill provides evidence-audited API references so generated scheduling UI code works against the real @reui/gantt and @reui/event-calendar components. ## Core Features & Use Cases - Gantt component patterns: Composition contract, GanttEvent/GanttResource data shapes, view configuration props, drag/resize commit gating via onEventUpdate, and RFC 5545 recurrence handling. - Event Calendar patterns: Six views (month, week, day, N-day, agenda, resource), EventCalendarApi methods, timezone-safe rendering, and headless subscription hooks. - Use Case: A developer asks for a resource-timeline Gantt with drag-and-drop task rescheduling; the Skill directs reading references/gantt-api.md first, then produces code using the correct controlled/uncontrolled props and the single onEventUpdate commit gate. ## Quick Start Ask the agent to build a Gantt scheduling view or event calendar UI with reui, and it will consult the bundled API references before writing any component code.

Frequently Asked Questions about reui-gantt-calendar-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a Gantt chart to a React shadcn project?▼

Install the reui Gantt component with pnpm dlx shadcn@latest add @reui/gantt, which copies the source into your repo. Then compose the Gantt root provider with GanttNav and GanttView slots, passing GanttEvent and GanttResource data.

How do I handle drag-and-drop event updates in reui calendar?▼

Use the onEventUpdate callback as the single commit gate for both drag and resize. Return false to reject, void or true to accept, or an adjusted {start, end, allDay} object; canDropEvent only validates during the live gesture.

What is the difference between reui Gantt and Event Calendar?▼

Gantt (@reui/gantt) handles project-scheduling timelines with task dependencies and resource rows, while Event Calendar (@reui/event-calendar) provides month, week, day, agenda, and resource booking views. They are separate packages with distinct APIs.

Does reui support recurring events with RRULE?▼

Yes, both components share an RFC 5545 recurrence engine supporting freq, interval, count/until, byWeekday, and raw RRULE strings. Expansion is DST-safe, capped at 1000 occurrences per event, and throws GanttRecurrenceError on unsupported rules.

Why is my reui Gantt drag not moving events between rows?▼

Gantt drag is horizontal-only within a resource row by design and never moves events across rows. Row reassignment requires a separate resourceId mutation through the onEventUpdate callback.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
adtecoadteco

glapi-backend-guidelines

Codify TRPC, REST, Drizzle, and Clerk expectations for GLAPI backend development.

Official
Advanced
dnsnamdangdnsnamdang

elearning-validate

Validate Elearning forms and display error toast notifications.

Community
Intermediate
koralliskorallis
90

shadcn-ui-components

Generate and integrate shadcn/ui components with Radix UI and Tailwind CSS.

Community
Basic