Calendar

<!-- Calendar Month View -->
<div class="lyd-calendar">
    <div class="lyd-calendar-header">
        <button class="lyd-calendar-nav-btn">‹</button>
        <div class="lyd-calendar-title">September 2025</div>
        <button class="lyd-calendar-nav-btn">›</button>
    </div>
    
    <div class="lyd-calendar-weekdays">
        <div class="lyd-calendar-weekday">Su</div>
        <!-- ... more weekdays ... -->
    </div>
    
    <div class="lyd-calendar-grid">
        <button class="lyd-calendar-day">1</button>
        <button class="lyd-calendar-day today">24</button>
        <!-- ... more days ... -->
    </div>
</div>

import { useState } from 'react';

interface CalendarProps {
  selectedDate?: Date;
  onDateSelect?: (date: Date) => void;
  minDate?: Date;
  maxDate?: Date;
}

export const Calendar = ({ 
  selectedDate, 
  onDateSelect, 
  minDate, 
  maxDate 
}: CalendarProps) => {
  const [currentDate, setCurrentDate] = useState(new Date());
  
  const getDaysInMonth = (date: Date) => {
    const year = date.getFullYear();
    const month = date.getMonth();
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const startDate = new Date(firstDay);
    startDate.setDate(startDate.getDate() - firstDay.getDay());
    
    const days = [];
    for (let i = 0; i < 42; i++) {
      const day = new Date(startDate);
      day.setDate(startDate.getDate() + i);
      days.push(day);
    }
    return days;
  };
  
  const handleDateClick = (date: Date) => {
    onDateSelect?.(date);
  };
  
  const previousMonth = () => {
    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1));
  };
  
  const nextMonth = () => {
    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1));
  };
  
  const days = getDaysInMonth(currentDate);
  const monthNames = [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
  ];
  
  return (
    <div className="lyd-calendar">
      <div className="lyd-calendar-header">
        <button className="lyd-calendar-nav-btn" onClick={previousMonth}>‹</button>
        <div className="lyd-calendar-title">
          {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
        </div>
        <button className="lyd-calendar-nav-btn" onClick={nextMonth}>›</button>
      </div>
      
      <div className="lyd-calendar-weekdays">
        {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(day => (
          <div key={day} className="lyd-calendar-weekday">{day}</div>
        ))}
      </div>
      
      <div className="lyd-calendar-grid">
        {days.map((day, index) => (
          <button
            key={index}
            className={`lyd-calendar-day ${getDayClasses(day)}`}
            onClick={() => handleDateClick(day)}
          >
            {day.getDate()}
          </button>
        ))}
      </div>
    </div>
  );
};