Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Scheduling

Scheduling building blocks on the Core Calendar and ToggleGroup: a calendar with per-day markers and a single-choice grid of time slots, plus time helpers.

Blocks@gaudi/design-system/blocks/SchedulingView 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 Scheduling from '@gaudi/design-system/blocks/Scheduling';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/scheduling-book-meeting.json.

Usage

import { TimeSlots, timeSlots } from '@gaudi/design-system/blocks/Scheduling';
<TimeSlots  slots={timeSlots({ start: '09:00', end: '17:00', step: 30, duration: 30 })}  unavailable={bookedTimes}  value={selectedTime}  onValueChange={setSelectedTime}/>

Examples

Book a meeting

Storybook

Create a schedule

Storybook

Date and time popover

Storybook

Day agenda

Storybook

Month at a glance

Storybook

Plan a meeting

Storybook

Webinar details and RSVP

Storybook

API

10 props

Accessibility

Marked days add their marker label to the day button name; time slots are a radio group with arrow-key navigation and disabled booked times.

Notes

  • Pass every other Calendar prop (mode, selected, disabled) straight to ScheduleCalendar.
CalendarDate selection for single dates, ranges, bookings and localized calendars.11 examplesToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 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 examplesSelectSelect renders a styled option picker with searchable combobox behavior and multi-select support.20 examplesAttachmentFile attachments with metadata, previews, actions and upload states.4 examplesPopoverPopover renders compact positioned supporting content next to its trigger.8 examples