Quick Event Creator

Form

Fast event creation with AI-powered time suggestions and intelligent scheduling.

Preview

Fast event creation with AI-powered time suggestions

New Event

Title

Date

Time

Duration

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)
      }}
    />
  )
}

Built With

1 component

This block uses the following UI components from the design system:

Calendar

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 suggestions

Keyboard 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

Related Components

Calendar Day Agenda View Compact Agenda Widget Date Picker