当前位置：首页 > React

react实现日历

2026-01-26 15:55:50React

使用 React 实现日历

日历组件在 Web 应用中常用于日期选择、事件展示等场景。以下是几种实现日历的常见方法：

使用第三方库（如 `react-calendar`）

安装 react-calendar 库：

npm install react-calendar

基本使用示例：

import React, { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

function App() {
  const [date, setDate] = useState(new Date());

  return (
    <div>
      <Calendar onChange={setDate} value={date} />
    </div>
  );
}

export default App;

该库提供丰富的功能，如日期范围选择、自定义样式和国际化支持。

手动实现简单日历

如果需要完全自定义的日历，可以手动实现：

import React, { useState } from 'react';

function Calendar() {
  const [currentDate, setCurrentDate] = useState(new Date());

  const year = currentDate.getFullYear();
  const month = currentDate.getMonth();

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

  const renderDays = () => {
    const days = [];

    // 空白格子（上月）
    for (let i = 0; i < firstDay; i++) {
      days.push(<div key={`empty-${i}`} className="empty-day"></div>);
    }

    // 当月日期
    for (let day = 1; day <= daysInMonth; day++) {
      days.push(
        <div key={day} className="day" onClick={() => console.log(day)}>
          {day}
        </div>
      );
    }

    return days;
  };

  return (
    <div className="calendar">
      <div className="header">
        <button onClick={() => setCurrentDate(new Date(year, month - 1, 1))}>
          Prev
        </button>
        <h2>{`${year}年 ${month + 1}月`}</h2>
        <button onClick={() => setCurrentDate(new Date(year, month + 1, 1))}>
          Next
        </button>
      </div>
      <div className="weekdays">
        {['日', '一', '二', '三', '四', '五', '六'].map(day => (
          <div key={day}>{day}</div>
        ))}
      </div>
      <div className="days-grid">{renderDays()}</div>
    </div>
  );
}

export default Calendar;

添加样式

基本 CSS 样式示例：

.calendar {
  width: 300px;
  border: 1px solid #ddd;
  font-family: Arial;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f5f5f5;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  background: #eee;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 5px;
}

.day, .empty-day {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.day:hover {
  background: #e0e0e0;
  cursor: pointer;
}