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 →

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 React Server Components, Next.js, and any React setup

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.