About h6s

Serve headless component development kit for React production apps

t

Published by

toss

Visit View Profile

README.md

View on GitHub

@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

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

How @h6s/calendar solves this

Fully headless
- Zero UI opinions. Works with Tailwind, Bootstrap, Vanilla CSS, styled-components — anything.
Minimal bundle
- ~3.5kB gzipped. Only React as a peer dependency.
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

h6s