使用React完成日历组件

原创

已于 2023-03-10 21:09:30 修改 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

于 2018-10-28 16:30:53 首次发布

本文介绍了如何使用React创建一个日历组件，展示如何渲染月份、添加标记，如高亮当前日期和显示特定节日。首先，生成7*5的日期单元格，然后遍历并检查每个日期，对特殊日期如今天和含有deadline的日期进行标记和处理。

React 日历组件

使用React编写一个日历组件，能够选择月份，添加标记，如标记当天，节日等。

思路

先把指定月份的日期全部渲染一遍，也就是先渲染基本的日期，不管当月有多少天，都要渲染出 7 * 5的单元格，如下图所示：
![在这里插入图片描述](https://img-blog.csdnimg.cn/0dd0f64a705b4c47b58b8d56b8a822a4.png
在遍历35天的时候，对于每一天看看有没有特殊的标记，比如对“今天”进行标记，另外，看看今天有没有deadline，如果有的话，把deadline对应的任务显示出来。

import moment from "moment";
import {
   
   useEffect, useState} from "react";

export const Calendar = (props) => {
   
   

  const {
   
   date, tasks, project} = props;
  const [days, setDays] = useState([]);
  useEffect(() => {
   
   
    if (date) {
   
   
      const newDays = [];
      let daysOfWeeks = [];
      let daysOfWeek = [];
      const daysOfMonth = date.daysInMonth();
      let startDateOfMonth = date.startOf('month');
      let startDateOfNextMonth = date.clone().add(1, 'months').startOf('month');

      let startDayOfMonth = date