📅 useCalendar

A powerful, flexible, and headless calendar hook for React. Build beautiful date pickers, calendars, and date range selectors with complete control over styling and behavior.

✨ Features

- 🎨 Headless - Complete control over UI and styling
- 🌍 i18n Support - Full internationalization with locale support
- ♿ Accessible - Built with accessibility in mind
- 📦 Lightweight - Zero dependencies (except React)
- 🎯 TypeScript - Full type safety out of the box
- 🔧 Flexible - Controlled and uncontrolled modes
- 🚀 Modern - Built with React hooks

📦 Installation

``bash npm install @code-s/react-headless-calendar`

`bash yarn add @code-s/react-headless-calendar`

`bash pnpm add @code-s/react-headless-calendar`

`🚀 Quick Start`

`tsx import { useCalendar } from '@code-s/react-headless-calendar';

function Calendar() { const { weeks, weekDays, monthName, currentYear, goToNextMonth, goToPreviousMonth, } = useCalendar();

return (


      {/ Header /}
      
                  onClick={goToPreviousMonth}
          className="p-2 hover:bg-gray-100 rounded"
        >
          ←
        
        

          {monthName} {currentYear}
        
                  onClick={goToNextMonth}
          className="p-2 hover:bg-gray-100 rounded"
        >
          →
        
      
      {/ Weekdays /}
      

        {weekDays.map((day) => (
                      key={day}
            className="text-center text-sm font-medium text-gray-500"
          >
            {day.slice(0, 3)}
          

        ))}

{/ Days /} {weeks.map((week, i) => (


          {week.map((day) => (
                          key={day.date.toISOString()}
              disabled={!day.isCurrentMonth}
              className={

aspect-square rounded flex items-center justify-center
${day.isCurrentMonth ? 'hover:bg-gray-100' : 'text-gray-300'}
${day.isToday ? 'bg-blue-500 text-white hover:bg-blue-600' : ''}

}
            >
              {day.day}
            
          ))}

))}

✨ Features

🚀 Quick Start

tsx
import { useCalendar } from '@code-s/react-headless-calendar';

function Calendar() {
  const {
    weeks,
    weekDays,
    monthName,
    currentYear,
    goToNextMonth,
    goToPreviousMonth,
  } = useCalendar();

  return (


      {/ Header /}
      
                  onClick={goToPreviousMonth}
          className="p-2 hover:bg-gray-100 rounded"
        >
          ←
        
        

          {monthName} {currentYear}
        
                  onClick={goToNextMonth}
          className="p-2 hover:bg-gray-100 rounded"
        >
          →
        
      
      {/ Weekdays /}
      

        {weekDays.map((day) => (
                      key={day}
            className="text-center text-sm font-medium text-gray-500"
          >
            {day.slice(0, 3)}
          

        ))}

      {/ Days /}
      {weeks.map((week, i) => (


          {week.map((day) => (
                          key={day.date.toISOString()}
              disabled={!day.isCurrentMonth}
              className={

aspect-square rounded flex items-center justify-center
${day.isCurrentMonth ? 'hover:bg-gray-100' : 'text-gray-300'}
${day.isToday ? 'bg-blue-500 text-white hover:bg-blue-600' : ''}

}
            >
              {day.day}
            
          ))}

))}