For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
When to use
- A full page scheduling workspace where people drag, resize and create events on a week time grid
- A personal calendar of meetings, focus time and travel, filtered by color-coded calendars
- An operations board for one trade: a hotel front desk, a shift roster, clinic chairs or a lending desk
When not to use
- Only the scheduling grid and its props, to compose inside a layout you already have: use the Event Calendar component
- A compact card that books one meeting from a date picker and a list of time slots: use the Schedule blocks
- A single date or range picker with no events, hours or drag: use the Calendar component
Agent notes
- Replace
buildEventsand the fixedANCHORdate in data.ts with your own events and opening date; every block seedseventsfrom them - Every create, edit, move and delete only updates local state; persist moves in
handleEventsChangeand saves insaveDraft - Each block sets its own
h-svhwrapper andp-4padding, and the grid scrolls inside it, so give it a bounded height in an app shell
Third-party API docs
- date-fns v4: docs, used by 6 of 6 blocks
- React DayPicker v9: API reference, docs, used by 6 of 6 blocks
- Sonner v2: API reference, docs, used by 6 of 6 blocks
Markdown
https://web.dev.reui.io/blocks/application/event-calendar.mdMCP
search({ query: "event calendar", type: "block", category: "event-calendar" })Shadcn Application Event Calendar Blocks
Every block in this category is a React component you install with the shadcn CLI, built with Tailwind CSS, and many use ReUI primitives.
Open one, check the components it pulls in, copy the install command, then swap the sample data for your own.
All Event Calendar Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Personal Calendar Event calendar with month, week, day, N-day, and agenda views plus drag-and-drop editing
- Mini Month Calendar Calendar workspace with mini month picker, calendars visibility list, and up-next agenda sidebar
- Hotel Front Desk Hotel front-desk booking board with arrivals agenda and color-coded service streams
- Shift Roster Workforce shift roster with coverage avatars, open-slot warnings, and a double-booking guard
- Clinic Chair Board Clinic chair board with per-practitioner columns, status-tinted chips, and drop-rejecting clinic holds
- Lending Deal Calendar Commercial lending calendar with multi-row deal chips and covenant detail cards on hover
What You Can Build With These Event Calendar Blocks
- A working event calendar screen without laying out the structure, spacing, and states from scratch.
- Several takes on the same problem, so you can compare them before committing to one.
- A consistent starting point for an AI coding agent to extend, since the markup and hierarchy are already decided.
Related Application Block Categories
- App Shell (35) App shell layouts with sidebar, rail, or top bar navigation for dashboards, settings panels, and multi-page apps.
- Auth (20) Login, register, forgot password, and two-factor authentication page layouts.
- Card (43) Card components for content display, data summaries, and interactive elements.
- Dashboard (8) Dashboard components and layouts that combine stats, charts, and tables into a complete overview screen.
- Dialog (14) Dialog components for modal windows, alerts, confirmations, and content overlays.
- Empty State (14) Empty state screens and no-data placeholders with recovery actions, onboarding prompts, and contextual guidance.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
How should I use these event calendar blocks in a real project?
Treat them as a starting structure. Keep the layout and interaction patterns that fit, then replace the sample content, data wiring, and business rules with your own.
Can I combine event calendar blocks with other categories?
Yes. Most screens are a few blocks stacked together. Pair event calendar with navigation, stats, forms, or detail views from any group in the library.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.