Getting Started

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

Installation


npm install @h6s/calendar date-fns


pnpm add @h6s/calendar date-fns


yarn add @h6s/calendar date-fns


bun add @h6s/calendar date-fns

Quick Start

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

MyCalendar.tsx


import { useCalendar } from '@h6s/calendar';
import { format } from 'date-fns';
 
function MyCalendar() {
  const { headers, body, navigation, cursorDate } = useCalendar();
 
  return (
    <div>
      <div>
        <button onClick={navigation.toPrev}>Previous</button>
        <h2>{format(cursorDate, 'MMMM yyyy')}</h2>
        <button onClick={navigation.toNext}>Next</button>
      </div>
 
      <table>
        <thead>
          <tr>
            {headers.weekdays.map(({ key, value }) => (
              <th key={key}>{format(value, 'EEEEEE')}</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',
                  }}
                >
                  {format(value, 'd')}
                </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

Minimal Dependencies

@h6s/calendar depends only on React and date-fns, keeping your bundle size small. The library uses date-fns internally for date calculations, ensuring reliable and well-tested date handling.

While date-fns is required, you’re free to use it or any other date library for formatting and displaying dates in your UI. The hook returns native Date objects, giving you complete flexibility in how you present calendar data.