React 日历组件，手把手教你写出一个简洁实用的日历组件

2023-10-05 07:03:21

React 日历组件的作用

日历组件是网页设计中常用的元素，它允许用户以可视化的方式查看和选择日期。React 日历组件是专门为 React 框架设计的日历组件，它可以轻松集成到 React 项目中，并提供丰富的功能和可定制性。

如何使用 React 手写一个简单的日历组件

创建项目

npx create-react-app my-calendar

安装依赖库

npm install react-calendar --save

在 App.js 中导入日历组件

import Calendar from 'react-calendar';

在 App.js 中使用日历组件

function App() {
  return (
    <div>
      <Calendar />
    </div>
  );
}

运行项目

npm start

日历组件的结构

React 日历组件的基本结构如下：

import React from 'react';

const Calendar = () => {
  return (
    <div className="calendar">
      <div className="calendar-header">
        <button>上一个月</button>
        <div className="calendar-title">2023年3月</div>
        <button>下一个月</button>
      </div>
      <div className="calendar-body">
        <div className="calendar-week">
          <div className="calendar-day">周一</div>
          <div className="calendar-day">周二</div>
          <div className="calendar-day">周三</div>
          <div className="calendar-day">周四</div>
          <div className="calendar-day">周五</div>
          <div className="calendar-day">周六</div>
          <div className="calendar-day">周日</div>
        </div>
        <div className="calendar-days">
          {/* 这里渲染日期 */}
        </div>
      </div>
    </div>
  );
};

export default Calendar;

日期渲染

为了渲染日期，我们需要在 calendar-days 元素中循环遍历一个日期数组，并为每个日期创建一个 <div> 元素。我们可以使用 moment.js 库来生成日期数组。

import moment from 'moment';

const Calendar = () => {
  const startDate = moment().startOf('month');
  const endDate = moment().endOf('month');
  const days = [];

  while (startDate.isSameOrBefore(endDate)) {
    days.push(startDate.format('YYYY-MM-DD'));
    startDate.add(1, 'day');
  }

  return (
    <div className="calendar">
      {/* 省略代码 */}
      <div className="calendar-days">
        {days.map((day) => (
          <div className="calendar-day">{day}</div>
        ))}
      </div>
      {/* 省略代码 */}
    </div>
  );
};

样式自定义

您可以根据自己的需求自定义日历组件的样式。您可以修改 calendar.css 文件来更改日历组件的整体样式，也可以使用内联样式来更改单个元素的样式。

const Calendar = () => {
  return (
    <div className="calendar">
      {/* 省略代码 */}
      <style>
        {/* 这里定义样式 */}
      </style>
      {/* 省略代码 */}
    </div>
  );
};

完整代码示例

import React from 'react';
import moment from 'moment';

const Calendar = () => {
  const startDate = moment().startOf('month');
  const endDate = moment().endOf('month');
  const days = [];

  while (startDate.isSameOrBefore(endDate)) {
    days.push(startDate.format('YYYY-MM-DD'));
    startDate.add(1, 'day');
  }

  return (
    <div className="calendar">
      <div className="calendar-header">
        <button>上一个月</button>
        <div className="calendar-title">{moment().format('YYYY年M月')}</div>
        <button>下一个月</button>
      </div>
      <div className="calendar-body">
        <div className="calendar-week">
          <div className="calendar-day">周一</div>
          <div className="calendar-day">周二</div>
          <div className="calendar-day">周三</div>
          <div className="calendar-day">周四</div>
          <div className="calendar-day">周五</div>
          <div className="calendar-day">周六</div>
          <div className="calendar-day">周日</div>
        </div>
        <div className="calendar-days">
          {days.map((day) => (
            <div className="calendar-day">{day}</div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Calendar;