Getting Started

Get started with @h6s/calendar in your React application.

Installation


npm install @h6s/calendar


pnpm add @h6s/calendar


yarn add @h6s/calendar


bun add @h6s/calendar

Quick Start

Here’s a simple example to get you started with a basic calendar:

MyCalendar.tsx


import { useCalendar } from '@h6s/calendar';
 
function MyCalendar() {
  const { headers, body, navigation, cursorDate } = useCalendar();
 
  return (
    <div>
      <div>
        <button onClick={navigation.toPrev}>Previous</button>
        <h2>{cursorDate.toLocaleDateString('en', { month: 'long', year: 'numeric' })}</h2>
        <button onClick={navigation.toNext}>Next</button>
      </div>
 
      <table>
        <thead>
          <tr>
            {headers.weekdays.map(({ key, value }) => (
              <th key={key}>{value.toLocaleDateString('en', { weekday: 'short' })}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {body.value.map(({ key, value: days }) => (
            <tr key={key}>
              {days.map(({ key, value, isCurrentDate, isCurrentMonth }) => (
                <td
                  key={key}
                  style={{
                    opacity: isCurrentMonth ? 1 : 0.4,
                    fontWeight: isCurrentDate ? 'bold' : 'normal',
                  }}
                >
                  {value.getDate()}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Playground

A styled calendar with date selection and month navigation:

Open Sandbox

import { DateCalendar } from "./DateCalendar";
import "./App.css";

export default function App() {
  return (
    <div className="app-container">
      <DateCalendar />
    </div>
  );
}

View more examples →

Selection

Use the useSelection hook to add date selection to your calendar. It supports three modes: single, range, and multiple.


import { useCalendar, useSelection } from '@h6s/calendar';
 
const { body, headers, navigation } = useCalendar();
const selection = useSelection({ mode: 'single', body });
 
// selection.body has isSelected, isDisabled on each cell
// selection.select(date) to select a date
// selection.selected to read the current selection

See the useSelection API reference for full documentation.

Key Concepts

Headless Design

@h6s/calendar is completely headless - it provides the calendar logic and state management without any styling or markup. This means:

Full styling control: Use any CSS framework or styling solution
Flexible markup: Build any calendar UI pattern you need
Framework agnostic: Works with any React setup — Next.js, Vite, Remix, and more

Zero Dependencies

@h6s/calendar depends only on React with no external date library required. All date calculations use the native Date API, keeping your bundle size minimal.

The hook returns native Date objects, giving you complete flexibility in how you present calendar data — use Intl.DateTimeFormat, toLocaleDateString(), or any date library you prefer for formatting.