Styling

This package is a true headless component library, which means it comes with minimal styling. All components accept className props that you can use to apply your own styles.

Example with Tailwind CSS

<Calendar className="w-full h-full">
  <CalendarHeader className="flex justify-between items-center p-4 bg-gray-100 rounded-t-lg">
    <div className="flex gap-2 items-center">
      <CalendarHeader.PrevButton className="p-2 rounded hover:bg-gray-200" />
      <CalendarHeader.Title className="text-lg font-semibold" />
      <CalendarHeader.NextButton className="p-2 rounded hover:bg-gray-200" />
    </div>
    <CalendarHeader.TodayButton className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600" />
  </CalendarHeader>
  
  <CalendarWeekdays className="grid grid-cols-7 text-center py-2 border-b">
    {(names) => names.map((name, i) => (
      <div key={i} className="text-sm font-medium text-gray-600">{name}</div>
    ))}
  </CalendarWeekdays>
  
  <CalendarGrid className="grid grid-cols-7 gap-1 p-4">
    {({ days }) =>
      days.map((day, index) => (
        <div 
          key={index}
          className={`
            p-2 text-center rounded cursor-pointer
            ${day.isCurrentMonth ? "" : "text-gray-400"}
            ${day.isToday ? "border border-blue-500" : ""}
            ${day.isSelected ? "bg-blue-500 text-white" : "hover:bg-gray-100"}
          `}
          onClick={() => day.selectDate(day.date)}
        >
          {day.day}
        </div>
      ))
    }
  </CalendarGrid>
</Calendar>

Headless Calendar

A flexible and customizable headless calendar component for React applications.

Installation

npm install @bbd-seyoung/headless-calendar

# Or using yarn
yarn add @bbd-seyoung/headless-calendar

# Or using pnpm
pnpm add @bbd-seyoung/headless-calendar

Features

• Fully customizable UI
• Month navigation
• Date selection (single or multiple)
• Custom weekday and month names
• Responsive design
• Headless architecture for maximum flexibility

Usage

import { 
  Calendar,
  CalendarHeader,
  CalendarGrid,
  CalendarWeekdays
} from '@bbd-seyoung/headless-calendar';

const MyCalendar = () => {
  return (
    <div className="w-[500px] h-[300px]">
      <Calendar>
        <CalendarHeader className="flex">
          <CalendarHeader.PrevButton />
          <CalendarHeader.NextButton />
          <CalendarHeader.Title />
        </CalendarHeader>
        <CalendarWeekdays />
        <CalendarGrid>
          {({ days }) =>
            days.map((day, index) => (
              <div 
                key={index}
                className={`
                  p-2 text-center
                  ${day.isCurrentMonth ? "" : "text-gray-400"}
                  ${day.isToday ? "bg-blue-100" : ""}
                  ${day.isSelected ? "bg-blue-500 text-white" : ""}
                `}
                onClick={() => day.selectDate(day.date)}
              >
                {day.day}
              </div>
            ))
          }
        </CalendarGrid>
      </Calendar>
    </div>
  );
};

export default MyCalendar;

API Reference

Calendar

The main component that provides context for all calendar functionality.

<Calendar
  initialMonth={2} // Default: current month
  initialYear={2024} // Default: current year
  selectedDates={[new Date()]} // Default: []
  onDateSelect={(date) => console.log(date)}
  onSelectedDatesChange={(dates) => console.log(dates)}
  weekdayNames={['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']} // Default: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
  monthNames={['January', 'February', /*...*/]} // Default: abbreviated month names
>
  {/* Calendar children */}
</Calendar>

CalendarHeader

Provides navigation controls and title display for the calendar.

<CalendarHeader className="flex justify-between">
  <CalendarHeader.PrevButton />
  <CalendarHeader.Title format={(month, year, monthNames) => `${monthNames[month]} ${year}`} />
  <CalendarHeader.NextButton />
  <CalendarHeader.TodayButton />
</CalendarHeader>

CalendarWeekdays

Displays weekday names.

<CalendarWeekdays className="grid grid-cols-7 text-center" />

CalendarGrid

Renders the days of the month.

<CalendarGrid>
  {({ days }) => 
    days.map((day, index) => (
      <div key={index} onClick={() => day.selectDate(day.date)}>
        {day.day}
      </div>
    ))
  }
</CalendarGrid>

useCalendar Hook

Access calendar data and functions from any component.

import { useCalendar } from '@bbd-seyoung/headless-calendar';

const MyComponent = () => {
  const { 
    days, 
    month, 
    year, 
    today,
    selectedDates,
    goToNextMonth,
    goToPrevMonth,
    goToToday,
    goToMonth,
    selectDate,
    isDateSelected
  } = useCalendar();
  
  // Use these values and functions
  return <div>...</div>;
};

License

MIT