Quick Event Creator
AI
Form
Fast event creation with AI-powered time suggestions and intelligent scheduling.
Preview
Fast event creation with AI-powered time suggestions
New Event
AI Suggestion
Best time: 2:00 PM (based on your schedule)
Props
Component API reference
QuickEventCreator
| Prop | Type | Default | Description |
|---|---|---|---|
defaultEventType | EventType | 'meeting' | Default event type selection |
eventTypes | EventTypeConfig[] | Default types | Custom event type configurations |
aiSuggestion | AISuggestion | null | Default suggestion | AI suggestion to display |
onSubmit | (data: EventData) => void | — | Called when event is created |
onCancel | () => void | — | Called when cancelled |
onApplySuggestion | (suggestion: AISuggestion) => void | — | Called when AI suggestion is applied |
durationOptions | string[] | ['30 minutes', ...] | Duration options for dropdown |
className | string | — | Additional CSS classes |
Types
type EventType = 'meeting' | 'call' | 'task' | 'reminder'
interface EventTypeConfig { id: EventType label: string icon: LucideIcon}
interface AISuggestion { message: string value?: string}
interface EventData { type: EventType title: string date: string time: string duration: string}Usage
Import and implementation examples
import { QuickEventCreator } from '@/blocks/calendar/quick-event-creator'
export default function MyComponent() { return ( <QuickEventCreator defaultEventType="meeting" aiSuggestion={{ message: 'Best time: 2:00 PM (based on your schedule)', value: '14:00' }} onSubmit={(data) => { console.log('Event created:', data) // data contains: type, title, date, time, duration }} onCancel={() => console.log('Cancelled')} onApplySuggestion={(suggestion) => { console.log('Applied suggestion:', suggestion) }} /> )}Features
Built-in functionality
- Multiple event types: Support for meetings, calls, tasks, and reminders
- AI-powered suggestions: Intelligent time recommendations based on schedule
- Date and time pickers: Built-in date and time selection with icons
- Duration presets: Quick selection for common durations
- Quick create workflow: Streamlined UX for fast event creation
- Form validation: Built-in validation and cancel option
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="form" for the event formaria-label for form controlsaria-describedby for AI suggestionsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between form fields |
| Enter | Submit form or select option |
| Escape | Cancel and close |
Notes
- Screen readers announce form labels and suggestions
- Required fields are indicated
- Error messages are announced