Meeting Scheduler is a compact form widget that composes DatePicker, Select, and Button to let users schedule a meeting by selecting a date, time, and duration. It produces a structured payload with validation and is designed for SaaS applications that need a simple scheduling form (e.g., book-a-call, schedule a demo). Unlike the Availability Picker (#54) which handles multi-day slot selection, this widget focuses on scheduling a single meeting with form-level validation.
Goals
Deliver a <MeetingScheduler> component with date, time, duration, and optional title fields.
Compose existing DatePicker, Select, and Button primitives.
Validate required fields and produce a structured scheduling payload.
Ship Storybook stories with realistic scheduling scenarios.
Non-Goals
Multi-participant availability checking or conflict detection.
Calendar integration (Google Calendar, Outlook, iCal).
Recurring meeting setup.
Video conferencing link generation.
Room/resource booking.
Scope
In Scope
Area
Description
Component
<MeetingScheduler> form with date, time, duration fields
Date Field
DatePicker for selecting the meeting date
Time Field
Select dropdown for choosing a start time
Duration Field
Select dropdown for meeting length
Title Field
Optional text input for meeting title/subject
Validation
Required field validation with inline errors
Payload
onSchedule fires with structured { date, time, duration, title }
Storybook stories for scheduling flow, validation, and states
Out of Scope
Area
Reason
Multi-participant scheduling
Application-layer concern
Calendar integration
Application-layer concern
Recurring meetings
Separate feature
Video link generation
Application-layer concern
Time zone selector
Consumer handles timezone; can be added later
Users and Pain Points
User Groups
User
Description
Needs
Developers
Engineers building scheduling features
A ready-made scheduling form using DS primitives
Designers
Design-system consumers
Consistent scheduling form UX
End Users
People booking meetings or calls
Simple, clear scheduling with validation feedback
Pain Points
User
Pain Point
Impact
Developers
Assembling DatePicker + time Select + duration Select + validation logic for each scheduling UI
Repeated boilerplate, inconsistent forms
End Users
Scheduling forms that allow submission of incomplete data (missing time, invalid date)
Failed bookings, frustration
Definitions
Term
Definition
Meeting Scheduler
A form widget for selecting date, time, and duration to schedule a single meeting
Duration
The length of the meeting in minutes (e.g., 15, 30, 45, 60, 90)
Schedule Payload
The structured data object passed to onSchedule
Current State
Existing Behavior
The design system provides DatePicker for date selection and Select for dropdown choices. There is no combined scheduling form that assembles these with time/duration options and validation.
Current Limitations
No scheduling-form widget or pattern.
Time selection requires a custom Select with generated time options.
Duration options must be configured from scratch.
Validation for scheduling fields is left to consumers.
Existing Workarounds
Developers build scheduling forms ad hoc with raw DatePicker, Select, and custom validation.
Proposed Solution
Summary
Introduce <MeetingScheduler> that renders a compact form with a DatePicker for the date, a Select for start time (auto-generated from timeStart/timeEnd/interval config), a Select for duration (from durations array), an optional title input, and a Schedule button. The form validates required fields and fires onSchedule with a structured payload.
Key Capabilities
Date selection via DatePicker with configurable min/max dates.
Time selection via Select with auto-generated options from time range and interval.
Duration selection via Select with configurable options.
Optional meeting title/subject field.
Required-field validation with inline errors.
Schedule button with loading state.
User Experience
Users see a compact form. They pick a date, select a start time from a dropdown, choose a duration, optionally enter a title, and click Schedule. If any required field is empty, inline errors appear. During submission, the button shows a loading spinner.
Developer Experience
<MeetingScheduler
onSchedule={({ date, time, duration, title })=> {
bookMeeting({ date, time, duration, title });
}}
timeStart="08:00"
timeEnd="18:00"
interval={30}
durations={[15, 30, 45, 60]}
minDate="2026-06-01"
/>
Requirements
ID
Requirement
Priority
Notes
FR-001
MeetingScheduler renders date, time, and duration fields with Schedule button
Must
-
FR-002
Time options are auto-generated from timeStart, timeEnd, and interval
Must
-
FR-003
Validation prevents submission when date, time, or duration is missing
Must
-
FR-004
onSchedule fires with structured payload
Must
-
FR-005
Optional title/subject field
Should
-
FR-006
Schedule button shows loading state during async submission
Should
-
Priority Definitions
Priority
Meaning
Must
Required for this feature to ship.
Should
Important, but can be deferred if needed.
Could
Nice to have. Not required for initial release.
Functional Requirements
ID
Requirement
User Benefit
Priority
FUNC-001
DatePicker renders for date selection with optional minDate/maxDate bounds
Constrained date selection
Must
FUNC-002
Time Select populates options from timeStart to timeEnd at interval-minute increments
No manual time option lists
Must
FUNC-003
Duration Select populates from durations array (e.g., [15, 30, 45, 60]) with human-readable labels
Clear duration choice
Must
FUNC-004
Title input is a single-line text field
Meeting context
Should
FUNC-005
Clicking Schedule validates all required fields; shows inline errors for empty fields