Function SingleCalendarView

packages/emcn/src/components/calendar/calendar.tsx:292–347

({ value, onChange, className }: CalendarSingleProps)

}

function SingleCalendarView({ value, onChange, className }: CalendarSingleProps) {
  const selected = useMemo(() => parseDateValue(value), [value])
  const { today, view, setView, goToPrevMonth, goToNextMonth, cells } = useCalendarView(selected)

  useEffect(() => {
    if (selected) setView({ month: selected.getMonth(), year: selected.getFullYear() })
  }, [selected, setView])

  const selectDay = (day: number) => onChange?.(toDateString(view.year, view.month, day))

  const goToToday = () => {
    setView({ month: today.getMonth(), year: today.getFullYear() })
    onChange?.(toDateString(today.getFullYear(), today.getMonth(), today.getDate()))
  }

  return (
    <div className={cn('flex w-[256px] flex-col p-2', className)}>
      <CalendarHeader
        month={view.month}
        year={view.year}
        onPrev={goToPrevMonth}
        onNext={goToNextMonth}
      />
      <WeekdayRow />

      <div className='grid grid-cols-7'>
        {cells.map((day, index) => {
          if (day === null) return <div key={`empty-${index}`} className='h-[34px]' />

          const cellDate = new Date(view.year, view.month, day)
          const isSelected = selected ? isSameDay(cellDate, selected) : false
          const isToday = isSameDay(cellDate, today)

          return (
            <div key={day} className='flex h-[34px] items-center justify-center'>
              <CalendarDayCell selected={isSelected} today={isToday} onClick={() => selectDay(day)}>
                {day}
              </CalendarDayCell>
            </div>
          )
        })}
      </div>

      <button
        type='button'
        onClick={goToToday}
        className={cn(
          chipVariants({ variant: 'filled', fullWidth: true, flush: true }),
          'mt-1 justify-center'
        )}
      >
        <span className={chipContentLabelClass}>Today</span>
      </button>
    </div>
  )
}

function RangeCalendarView({