@h6s/calendar

A tiny, headless calendar hook for React.

ENGLISH | 한국어

@h6s/calendar is a headless calendar hook library for React. It provides date calculations, navigation, and selection logic — you bring the markup and styles.

npm install @h6s/calendar

Example

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

No CSS to override. No class names to memorize. Just data and your components.

---

useSelection(options)

Composable date selection with three modes:

const { body: selectionBody, select, selected } = useSelection({
  mode: 'single',   // 'single' | 'range' | 'multiple'
  body,
  disabled: [
    { dayOfWeek: [0, 6] },   // weekends
    { before: new Date() },   // past dates
  ],
});

Mode	Selected Type	Use Case
single	Date | undefined	Date picker, birthday selector
range	{ from: Date, to?: Date }	Hotel booking, leave requests
multiple	Date[]	Scheduling, availability picker

---

Examples

Interactive Sandpack playgrounds — edit directly in the browser:

Style	DatePicker	DateRangePicker
Tailwind CSS	Demo	Demo
Bootstrap	Demo	Demo
Vanilla CSS	Demo	Demo

Full documentation →

---

Why @h6s/calendar?

Problems with traditional calendar libraries

1. Style customization limits
   • Most calendar libraries ship their own UI. You end up fighting CSS overrides to match your design system.
2. Unnecessary bundle size
   • Unused CSS and components are still included in your bundle.
3. Framework lock-in
   • Tied to a specific CSS solution, making it hard to use your preferred styling approach.

How @h6s/calendar solves this

1. Fully headless
   • Zero UI opinions. Works with Tailwind, Bootstrap, Vanilla CSS, styled-components — anything.
2. Minimal bundle
   • ~3.5kB gzipped. Only React as a peer dependency.
3. Flexible views and selection
   • Month, Week, and Day views out of the box. Single, Range, and Multiple selection with constraints.

Contributing

We welcome contributions from everyone. Please read the Contributing Guide before submitting a pull request.

git clone https://github.com/toss/h6s.git
cd h6s && yarn
yarn storybook

---

Other Packages

@h6s/table

Maintenance mode — Stable, bug fixes only.

Documentation · Package

License

MIT © Viva Republica, Inc. See LICENSE for details.