Calendar

import { Calendar } from '@/components/ui/calendar'
import type { CalendarEvent } from '@/components/ui/calendar'

const events: CalendarEvent[] = [
  {
    id: 'growth',
    title: 'Growth Marketing',
    subtitle: 'Fintech startup',
    startDate: '2019-01',
    endDate: '2021-06',
    variant: 'default',
  },
  {
    id: 'graduation',
    title: 'MSc Computer Science',
    startDate: '2018-06',
    variant: 'milestone',
  },
]

export function MyPage() {
  return (
    <Calendar
      events={events}
      onEventClick={(event) => console.log(event.title)}
    />
  )
}

import { Calendar } from '@/components/ui/calendar'
import { CalendarSkeleton } from '@/components/ui/calendar'

// Full calendar with events
<Calendar events={events} onEventClick={handleClick} />

// Loading state
<CalendarSkeleton yearCount={5} />

// Minimal event structure
const event: CalendarEvent = {
  id: '1',
  title: 'Software Engineer',
  subtitle: 'Tech Corp',
  startDate: '2020-01',
  endDate: '2022-06',
  variant: 'default',
}