在React日历上显示多个日期

import React, { useState } from 'react';

const Calendar = () => {
  const [selectedDates, setSelectedDates] = useState([]);

  const handleDateClick = (date) => {
    // 判断日期是否已经存在于selectedDates数组中
    const index = selectedDates.findIndex((d) => d.getTime() === date.getTime());

    if (index === -1) {
      // 日期不存在，添加到selectedDates数组中
      setSelectedDates([...selectedDates, date]);
    } else {
      // 日期已存在，从selectedDates数组中移除
      const updatedDates = [...selectedDates];
      updatedDates.splice(index, 1);
      setSelectedDates(updatedDates);
    }
  };

  const renderCalendar = () => {
    // 生成日历的日期格子
    // 可以使用moment.js或其他日期库来处理日期
    // 这里仅作示例，使用JavaScript内置的Date对象
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth();

    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const firstDayOfWeek = new Date(year, month, 1).getDay();

    const calendar = [];

    // 添加空白格子，使第一天对应正确的星期
    for (let i = 0; i < firstDayOfWeek; i++) {
      calendar.push(<div key={`blank-${i}`} className="calendar-day blank" />);
    }

    // 添加日期格子
    for (let day = 1; day <= daysInMonth; day++) {
      const date = new Date(year, month, day);
      const isSelected = selectedDates.some((d) => d.getTime() === date.getTime());

      calendar.push(
        <div
          key={date.toISOString()}
          className={`calendar-day ${isSelected ? 'selected' : ''}`}
          onClick={() => handleDateClick(date)}
        >
          {day}
        </div>
      );
    }

    return calendar;
  };

  return <div className="calendar">{renderCalendar()}</div>;
};

export default Calendar;