Calendar Component

The Calendar component from @dashflowx/core provides a visual date picker interface with multiple variants and sizes. It's perfect for forms, booking systems, and scheduling applications.

import { Calendar } from '@dashflowx/core'

export default function CalendarExample() {
  return (
    <Calendar 
      mode="single"
    />
  )
}

Preview:

The Calendar component supports multiple visual variants to match your design system:

<Calendar size="sm" />

Preview:

<Calendar size="md" />

Preview:

<Calendar size="lg" />

Preview:

<Calendar size="xl" />

Preview:

<Calendar mode="single" />

Preview:

<Calendar mode="multiple" />

Preview:

<Calendar mode="range" />

Preview:

<Calendar />

Preview:

<Calendar 
  variant="bordered" 
  size="lg" 
  className="my-4"
/>

Preview:

1. Choose the right mode: Use single for simple date selection, multiple for selecting several dates, and range for date ranges.

2. Select appropriate variants: Use variants that match your design system and provide good contrast for accessibility.

3. Consider sizing: Use sm for compact spaces, md for standard forms, and lg/xl for prominent displays.

4. Accessibility: The component includes proper ARIA labels and keyboard navigation support.

• Keyboard Navigation: Full keyboard support for navigation and selection
• Screen Reader Support: Proper ARIA labels and descriptions
• Focus Management: Clear focus indicators and logical tab order
• High Contrast: Variants designed for good contrast ratios