React용 헤드리스 캘린더 훅 라이브러리 — 날짜 계산과 선택 로직만 제공하고 UI는 자유롭게 구성

npm install @h6s/calendar

import { useCalendar } from '@h6s/calendar';

function Calendar() {
  const { headers, body, navigation } = useCalendar();

  return (
    <table>
      <thead>
        <tr>
          {headers.weekdays.map(({ key, value }) => (
            <th key={key}>{value.toLocaleDateString('en', { weekday: 'short' })}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {body.value.map((week) => (
          <tr key={week.key}>
            {week.value.map((day) => (
              <td key={day.key}>{day.value.getDate()}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

const { body: selectionBody, select, selected } = useSelection({
  mode: 'single',
  body,
  disabled: [
    { dayOfWeek: [0, 6] },
    { before: new Date() }
  ]
});