Design System

A showcase of the design system components and patterns

Scheduling & Availability

Availability Grid

Availability Grid Component
Grid for selecting available time slots
Weekly Availability
Select your available time slots
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM

Usage:

<AvailabilityGrid
  timeSlots={timeSlots}
  onTimeSlotToggle={handleTimeSlotToggle}
  startHour={9}
  endHour={17}
  title="Weekly Availability"
  description="Select your available time slots"
  onSave={handleSave}
  onReset={handleReset}
/>

Schedule Calendar

Schedule Calendar Component
Calendar for displaying and managing events
My Schedule
View and manage your schedule

July 2025

Su
Mo
Tu
We
Th
Fr
Sa
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Thursday, July 3, 2025

Team Meeting

Team Meeting
10:15 AM - 11:15 AM
Events

Usage:

<ScheduleCalendar
  events={events}
  onEventClick={handleEventClick}
  onDateClick={handleDateClick}
  title="My Schedule"
  description="View and manage your schedule"
  onAddClick={handleAddEvent}
/>

Resource Scheduler

Resource Scheduler Component
Scheduler for managing multiple resources
Resource Scheduler
Schedule rooms and people

Thursday, July 3, 2025

Time
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM
 Conference Room A
 Conference Room B
 Meeting Room 1
 John Doe
 Jane Smith
Team Meeting
10:15 AM
Team Meeting
10:15 AM
Client Call
2:15 PM
Client Call
2:15 PM
5 resources, 3 events

Usage:

<ResourceScheduler
  resources={resources}
  events={events}
  onEventClick={handleEventClick}
  onTimeSlotClick={handleTimeSlotClick}
  title="Resource Scheduler"
  description="Schedule rooms and people"
  onAddClick={handleAddEvent}
  startHour={9}
  endHour={17}
  interval={60}
/>