在React日历上显示多个日期

可以通过以下步骤实现：

创建一个React组件，用于显示日历。可以使用现有的日历组件库，如react-calendar或react-big-calendar，也可以自己编写一个日历组件。
在组件的状态中添加一个数组，用于存储需要显示的多个日期。
在组件的渲染方法中，根据当前月份和年份生成日历的日期格子。
遍历日期格子，判断每个格子的日期是否在多个日期数组中。如果是，则给该格子添加一个特定的样式，以示区分。
提供一个接口或方法，用于动态添加、删除多个日期数组中的日期。

以下是一个示例代码：

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;

在上述示例代码中，我们创建了一个名为Calendar的React组件。该组件使用useState钩子来管理选中的日期数组selectedDates。handleDateClick方法用于处理日期格子的点击事件，根据点击的日期是否已存在于selectedDates数组中来添加或移除日期。

renderCalendar方法用于生成日历的日期格子。首先获取当前月份和年份，然后根据这些信息计算出该月的天数和第一天对应的星期。接着使用循环生成日期格子，并根据日期是否在selectedDates数组中来添加特定的样式。

你可以根据自己的需求对该示例代码进行修改和扩展，例如添加更多的样式、处理日期的格式化、添加其他功能等。

腾讯云相关产品和产品介绍链接地址：