封装一个工作日历组件，顺便复习一下Date常用方法

背景

上周接到一个需求，开发一个工作日历组件。找了一圈没找到合适的，索性自己写一个。

下面给大家分享一下组件中使用到的一些日期API和后面实现的框选元素功能。

效果展示

demo体验地址：dbfu.github.io/work-calend...

开始之前

lunar-typescript

介绍组件之前先给大家介绍一个库lunar-typescript。

lunar是一个支持阳历、阴历、佛历和道历的日历工具库，它开源免费，有多种开发语言的版本，不依赖第三方，支持阳历、阴历、佛历、道历、儒略日的相互转换，还支持星座、干支、生肖、节气、节日、彭祖百忌、每日宜忌、吉神宜趋、凶煞宜忌、吉神方位、冲煞、纳音、星宿、八字、五行、十神、建除十二值星、青龙名堂等十二神、黄道日及吉凶等。仅供参考，切勿迷信。

这个库封装了很多常用的api，并且使用起来也比较简单。

本文用到了上面库的获取农历和节气方法。

复习Date Api

new Date

可以使用new Date()传年月日三个参数来构造日期，这里注意一下月是从零开始的。

获取星期几

可以使用getDay方法获取，注意一下，获取的值是从0开始的，0表示星期日。

获取上个月最后一天

基于上面api，如果第三个参数传0，就表示上个月最后一天，-1，是上个月倒数第二天，以此类推。（PS：这个方法还是我有次面试，面试官告诉我的。）

获取某个月有多少天

想获取某个月有多少天，只需要获取当月最后天的日期，而当月最后一天，可以用上面new Date第三个参数传零的方式获取。

假设我想获取2023年12月有多少天，按照下面方式就可以获取到。

日期加减

假设我现在想实现在某个日期上加一天，可以像下面这样实现。

这样实现有个不好的地方，改变了原来的date，如果不想改变date，可以这样做。

比较两个日期

在写这个例子的时候，我发现一个很神奇的事情，先看例子。

大于等于结果是true，小于等于结果也是true，正常来说肯定是等于的，但是等于返回的是false，是不是很神奇。

其实原理很简单，用等于号去比较的时候，会直接比较两个对象的引用，因为是分别new的，所以两个引用肯定不相等，返回false。

用大于等于去比较的时候，会默认使用date的valueOf方法返回值去比较，而valueOf返回值也就是时间戳，他们时间戳是一样的，所以返回true。

说到这里，给大家分享一个经典面试题。

console.log(a == 1 && a == 2 && a == 3)，希望打印出true。

原理和上面类似，感兴趣的可以挑战一下。

这里推荐大家比较两个日期使用getTime方法获取时间戳，然后再去比较。

实战

数据结构

开发之前先把数据结构定一下，一个正确的数据结构会让程序开发变得简单。

根据上面效果图，可以把数据结构定义成这样：

/**
 * 日期信息
 */
export interface DateInfo {
  /**
   * 年
   */
  year: number;
  /**
   * 月
   */
  month: number;
  /**
   * 日
   */
  day: number;
  /**
   * 日期
   */
  date: Date;
  /**
   * 农历日
   */
  cnDay: string;
  /**
   * 农历月
   */
  cnMonth: string;
  /**
   * 农历年
   */
  cnYear: string;
  /**
   * 节气
   */
  jieQi: string;
  /**
   * 是否当前月
   */
  isCurMonth?: boolean;
  /**
   * 星期几
   */
  week: number;
  /**
   * 节日名称
   */
  festivalName: string;
}

/**
 * 月份的所有周 
 */
export interface MonthWeek {
  /**
   * 月
   */
  month: number;
  /**
   * 按周分组的日期，7天一组
   */
  weeks: DateInfo[][];
}

通过算法生成数据结构

现在数据结构定义好了，下面该通过算法生成上面数据结构了。

封装获取日期信息方法

/**
 * 获取给定日期的信息。
 * @param date - 要获取信息的日期。
 * @param isCurMonth - 可选参数，指示日期是否在当前月份。
 * @returns 包含有关日期的各种信息的对象。
 */
export const getDateInfo = (date: Date, isCurMonth?: boolean): DateInfo => {
  // 从给定日期创建 农历 对象
  const lunar = Lunar.fromDate(date);

  // 获取 Lunar 对象中的农历日、月和年
  const cnDay = lunar.getDayInChinese();
  const cnMonth = lunar.getMonthInChinese();
  const cnYear = lunar.getYearInChinese();

  // 获取农历节日
  const festivals = lunar.getFestivals();

  // 获取 Lunar 对象中的节气
  const jieQi = lunar.getJieQi();

  // 从日期对象中获取年、月和日
  const year = date.getFullYear();
  const month = date.getMonth();
  const day = date.getDate();

  // 创建包含日期信息的对象
  return {
    year,
    month,
    day,
    date,
    cnDay,
    cnMonth,
    cnYear,
    jieQi,
    isCurMonth,
    week: date.getDay(),
    festivalName: festivals?.[0] || festivalMap[`${month + 1}-${day}`],
  };
};

上面使用了lunar-typescript库，获取了一些农历信息，节气和农历节日。方法第二个参数isCurMonth是用来标记是否是当月的，因为很多月的第一周或最后一周都会补一些其他月日期。

把月日期按照每周7天格式化

思路是先获取给定月的第一天是星期几，如果前面有空白，用上个月日期填充，然后遍历当月日期，把当月日期填充到数组中，如果后面有空白，用下个月日期填充。

/**
 * 返回给定年份和月份的周数组。
 * 每个周是一个天数数组。
 *
 * @param year - 年份。
 * @param month - 月份 (0-11)。
 * @param weekStartDay - 一周的起始日 (0-6) (0: 星期天, 6: 星期六)。
 * @returns 给定月份的周数组。
 */
const getMonthWeeks = (year: number, month: number, weekStartDay: number) => {
  // 获取给定月份的第一天
  const start = new Date(year, month, 1);

  // 这里为了支持周一或周日在第一天的情况，封装了获取星期几的方法
  const day = getDay(start, weekStartDay);

  const days = [];

  // 获取给定月份的前面的空白天数，假如某个月第一天是星期3，并且周日开始，那么这个月前面的空白天数就是3
  // 如果是周一开始，那么这个月前面的空白天数就是2
  // 用上个月日期替换空白天数
  for (let i = 0; i < day; i += 1) {
    days.push(getDateInfo(new Date(year, month, -day + i + 1)));
  }

  // 获取给定月份的天数
  const monthDay = new Date(year, month + 1, 0).getDate();

  // 把当月日期放入数组
  for (let i = 1; i <= monthDay; i += 1) {
    days.push(getDateInfo(new Date(year, month, i), true));
  }

  // 获取给定月份的最后一天
  const endDate = new Date(year, month + 1, 0);
  // 获取最后一天是星期几
  const endDay = getDay(endDate, weekStartDay);

  // 和前面一样，如果有空白位置就用下个月日期补充上
  for (let i = endDay; i <= 5; i += 1) {
    days.push(getDateInfo(new Date(year, month + 1, i - endDay + 1)));
  }

  // 按周排列
  const weeks: DateInfo[][] = [];
  for (let i = 0; i < days.length; i += 1) {
    if (i % 7 === 0) {
      weeks.push(days.slice(i, i + 7));
    }
  }

  // 默认每个月都有6个周，如果没有的话就用下个月日期补充。
  while (weeks.length < 6) {
    const endDate = weeks[weeks.length - 1][6];
    weeks.push(
      Array.from({length: 7}).map((_, i) => {
        const newDate = new Date(endDate.date);
        newDate.setDate(newDate.getDate() + i + 1)
        return getDateInfo(newDate);
      })
    );
  }
  return weeks;
};

getDay方法实现

function getDay(date: Date, weekStartDay: number) {
  // 获取给定日期是星期几
  const day = date.getDay();
  // 根据给定的周开始日，计算出星期几在第一天的偏移量
  if (weekStartDay === 1) {
    if (day === 0) {
      return 6;
    } else {
      return day - 1;
    }
  }
  return day;
}

获取一年的月周数据

/**
 * 获取年份的所有周，按月排列
 * @param year 年
 * @param weekStartDay 周开始日 0为周日 1为周一
 * @returns
 */
export const getYearWeeks = (year: number, weekStartDay = 0): MonthWeek[] => {
  const weeks = [];
  for (let i = 0; i <= 11; i += 1) {
    weeks.push({month: i, weeks: getMonthWeeks(year, i, weekStartDay)});
  }
  return weeks;
};

页面

页面布局使用了grid和table，使用grid布局让一行显示4个，并且会自动换行。日期显示使用了table布局。

如果想学习grid布局，推荐这篇文章。

工作日历日期分为三种类型，工作日、休息日、节假日。在渲染单元格根据不同的日期类型，渲染不同背景颜色用于区分。

维护日期类型

背景

虽然节假日信息可以从网上公共api获取到，但是我们的业务希望可以自己调整日期类型，这个简单给单元格加一个点击事件，点击后弹出一个框去维护当前日期类型，但是业务希望能支持框选多个日期，然后一起调整，这个就稍微麻烦一点，下面给大家分享一下我的做法。

实现思路

实现框选框

定义一个fixed布局的div，设置背景色和边框颜色，背景色稍微有点透明。监听全局点击事件，记录初始位置，然后监听鼠标移动事件，拿当前位置减去初始位置就是宽度和高度了，初始位置就是div的left和top。

获取框选框内符合条件的dom元素

当框选框位置改变的时候，获取所有符合条件的dom元素，然后通过坐标位置判断dom元素是否和框选框相交，如果相交，说明被框选了，把当前dom返回出去。

判断两个矩形是否相交

interface Rect {
  x: number;
  y: number;
  width: number;
  height: number;
}

export function isRectangleIntersect(rect1: Rect, rect2: Rect) {
  // 获取矩形1的左上角和右下角坐标
  const x1 = rect1.x;
  const y1 = rect1.y;
  const x2 = rect1.x + rect1.width;
  const y2 = rect1.y + rect1.height;

  // 获取矩形2的左上角和右下角坐标
  const x3 = rect2.x;
  const y3 = rect2.y;
  const x4 = rect2.x + rect2.width;
  const y4 = rect2.y + rect2.height;

  // 如果 `rect1` 的左上角在 `rect2` 的右下方（即 `x1 < x4` 和 `y1 < y4`），并且 `rect1` 的右下角在 `rect2` 的左上方（即 `x2 > x3` 和 `y2 > y3`），那么这意味着两个矩形相交，函数返回 `true`。
  // 否则，函数返回 `false`，表示两个矩形不相交。
  if (x1 < x4 && x2 > x3 && y1 < y4 && y2 > y3) {
    return true;
  } else {
    return false;
  }
}

具体实现

框选框组件实现

import { useEffect, useRef, useState } from 'react';

import { createPortal } from 'react-dom';
import { isRectangleIntersect } from './utils';

interface Props {
  selectors: string;
  sourceClassName: string;
  onSelectChange?: (selectDoms: Element[]) => void;
  onSelectEnd?: () => void;
  style?: React.CSSProperties,
}

function BoxSelect({
  selectors,
  sourceClassName,
  onSelectChange,
  style,
  onSelectEnd,
}: Props) {

  const [position, setPosition] = useState({ top: 0, left: 0, width: 0, height: 0 });

  const isPress = useRef(false);

  const startPos = useRef<any>();

  useEffect(() => {
    // 滚动的时候，框选框位置不变，但是元素位置会变，所以需要重新计算
    function scroll() {
      if (!isPress.current) return;
      setPosition(prev => ({ ...prev }));
    }

    // 鼠标按下，开始框选
    function sourceMouseDown(e: any) {
      isPress.current = true;
      startPos.current = { top: e.clientY, left: e.clientX };
      setPosition({ top: e.clientY, left: e.clientX, width: 1, height: 1 })
      // 解决误选择文本情况
      window.getSelection()?.removeAllRanges();
    }
    // 鼠标移动，移动框选
    function mousemove(e: MouseEvent) {
      if (!isPress.current) return;

      let left = startPos.current.left;
      let top = startPos.current.top;
      const width = Math.abs(e.clientX - startPos.current.left);
      const height = Math.abs(e.clientY - startPos.current.top);

      // 当后面位置小于前面位置的时候，需要把框的坐标设置为后面的位置
      if (e.clientX < startPos.current.left) {
        left = e.clientX;
      }

      if (e.clientY < startPos.current.top) {
        top = e.clientY;
      }

      setPosition({ top, left, width, height })
    }

    // 鼠标抬起
    function mouseup() {

      if(!isPress.current) return;

      startPos.current = null;
      isPress.current = false;
      // 为了重新渲染一下
      setPosition(prev => ({ ...prev }));

      onSelectEnd && onSelectEnd();
    }

    const sourceDom = document.querySelector(`.${sourceClassName}`);

    if (sourceDom) {
      sourceDom.addEventListener('mousedown', sourceMouseDown);
    }

    document.addEventListener('scroll', scroll);
    document.addEventListener('mousemove', mousemove);
    document.addEventListener('mouseup', mouseup);

    return () => {
      document.removeEventListener('scroll', scroll);
      document.removeEventListener('mousemove', mousemove);
      document.removeEventListener('mouseup', mouseup);

      if (sourceDom) {
        sourceDom.removeEventListener('mousedown', sourceMouseDown);
      }
    }
  }, [])

  useEffect(() => {
    const selectDoms: Element[] = [];
    const boxes = document.querySelectorAll(selectors);
    (boxes || []).forEach((box) => {
      // 判断是否在框选区域
      if (isRectangleIntersect({
        x: position.left,
        y: position.top,
        width: position.width,
        height: position.height,
      },
        box.getBoundingClientRect()
      )) {
        selectDoms.push(box);
      }
    });
    onSelectChange && onSelectChange(selectDoms);
  }, [position]);


  return createPortal((
    isPress.current && (
      <div
        className='fixed bg-[rgba(0,0,0,0.2)]'
        style={{
          border: '1px solid #666',
          ...style,
          ...position,
        }}
      />)
  ), document.body)
}


export default BoxSelect;

使用框选框组件，并在框选结束后，给框选日期设置类型

import { Modal, Radio } from 'antd';
import { useEffect, useMemo, useRef, useState } from 'react';
import BoxSelect from './box-select';
import WorkCalendar from './work-calendar';

import './App.css';

function App() {

  const [selectDates, setSelectDates] = useState<string[]>([]);
  const [open, setOpen] = useState(false);
  const [dateType, setDateType] = useState<number | null>();
  const [dates, setDates] = useState<any>({});

  const selectDatesRef = useRef<string[]>([]);

  const workDays = useMemo(() => {
    return Object.keys(dates).filter(date => dates[date] === 1)
  }, [dates])

  const restDays = useMemo(() => {
    return Object.keys(dates).filter(date => dates[date] === 2)
  }, [dates]);

  const holidayDays = useMemo(() => {
    return Object.keys(dates).filter(date => dates[date] === 3)
  }, [dates]);

  useEffect(() => {
    selectDatesRef.current = selectDates;
  }, [selectDates]);

  return (
    <div>
      <WorkCalendar
        defaultWeekStartDay={0}
        workDays={workDays}
        holidayDays={holidayDays}
        restDays={restDays}
        selectDates={selectDates}
        year={new Date().getFullYear()}
      />
      <BoxSelect
        // 可框选区域
        sourceClassName='work-calendar'
        // 可框选元素的dom选择器，
        selectors='td.date[data-date]'
        // 框选元素改变时的回调，可以拿到框选中元素
        onSelectChange={(selectDoms) => {
          // 内部给td元素上设置了data-date属性，这样就可以从dom元素上拿到日期
          setSelectDates(selectDoms.map(dom => dom.getAttribute('data-date') as string))
        }}
        // 框选结束事件
        onSelectEnd={() => {
          // 如果有框选就弹出设置弹框
          if (selectDatesRef.current.length) {
            setOpen(true)
          }
        }}
      />
      <Modal
        title="设置日期类型"
        open={open}
        onCancel={() => {
          setOpen(false);
          setSelectDates([]);
          setDateType(null);
        }}
        onOk={() => {
          setOpen(false);
          selectDatesRef.current.forEach(date => {
            setDates((prev: any) => ({
              ...prev,
              [date]: dateType,
            }))
          })
          setSelectDates([]);
          setDateType(null);
        }}
      >
        <Radio.Group
          options={[
            { label: '工作日', value: 1 },
            { label: '休息日', value: 2 },
            { label: '节假日', value: 3 },
          ]}
          value={dateType}
          onChange={e => setDateType(e.target.value)}
        />
      </Modal>
    </div>
  )
}

export default App

工作日历改造

给td的class里加了个date，并且给元素上加了个data-date属性

如果被框选，改变一下背景色

效果展示

小结

本来想给mousemove加节流函数，防止触发太频繁影响性能，后面发现不加节流很流畅，加了节流后因为延迟，反而不流畅了，后面如果有性能问题，再优化吧。

最后

借助这次封装又复习了一下Date的一些常用方法，也学到了一些关于Date不常见但是很有用的方法。

demo体验地址：dbfu.github.io/work-calend...

demo仓库地址：github.com/dbfu/work-c...