Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

EventCalendar

Schedule events across day, week, month, agenda and resource views.

CorePlanning@gaudi/design-system/core/EventCalendarView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { EventCalendar } from '@gaudi/design-system/core/EventCalendar';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/event-calendar-all-views.json.

Usage

import { useState } from 'react';import { EventCalendar, EventCalendarNav, EventCalendarContent } from '@gaudi/design-system/core/EventCalendar';
const resources = [{ id: 'design', title: 'Design team' }];const initialEvents = [{ id: 'review', title: 'Design review', resourceId: 'design', start: new Date(2026, 9, 5, 9, 15), end: new Date(2026, 9, 5, 10) }];
export function CalendarExample() {  const [events, setEvents] = useState(initialEvents);  return <EventCalendar events={events} onEventsChange={setEvents} resources={resources} defaultDate={new Date(2026, 9, 5)} defaultView='week' className='h-150'><EventCalendarNav /><EventCalendarContent /></EventCalendar>;}

Examples

All views with live settings

Storybook

Custom event chips

Storybook

Drag-to-book appointments

Storybook

Create and edit dialog

Storybook

Resource view for room bookings

Storybook

API

11 props

Accessibility

Keep event titles and times readable, provide keyboard alternatives to dragging, and announce changes through host feedback.

Notes

  • When calendar is supplied, configure options on that instance; option props on EventCalendar are ignored.
CalendarDate selection for single dates, ranges, bookings and localized calendars.11 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesSelectSelect renders a styled option picker with searchable combobox behavior and multi-select support.20 examplesDialogModal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.12 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesFieldField composes form label, description, error, and input building blocks.7 examples