手撸一个Calendar日历组件

hello大家好，我是小九九的爸爸。这次我们把目光投向Calendar日历组件。这个组件也是一个高频组件，只不过我们很少有去实现它的机会，一般都是拿来主义。这次，小编带你近距离的感受一下。

一、本次实现的功能

• 日历区间选择功能。
• 日历单选功能。
• 日历单选日期时间功能。

别看我们只实现了这3个功能，麻雀虽小，五脏俱全。

二、本次实现说明

本次使用react框架实现，项目基于create-react-app脚手架创建，时间库使用moment第三方库。

三、画日期面板

首先我们要把日历的面板画出来，大致样式如下：

日历一般都是这样的设计，想要获取日历面板，我们可以直观的感受到，我们需要做的事情有2个，分别是：

• 获取指定年月的总天数。
• 第一天如果不是周日，则需要向前补空格。
• 最后一天即使不是周六，我们也不需要向后补空格。

import moment from 'moment';

// 将周几转换为数字
export const transformWeekdayToNumber = (value) => {
    if (value === 'Sunday'){ return 0 }
    if (value === 'Monday'){ return 1 }
    if (value === 'Tuesday'){ return 2 }
    if (value === 'Wednesday'){ return 3 }
    if (value === 'Thursday'){ return 4 }
    if (value === 'Friday'){ return 5 }
    if (value === 'Saturday'){ return 6 }
}

export const getMonthDayOfYear = (year, month) => {
    // 获取当前年
    let curYear = year || moment().format().split('-')[0];
    // 当前月(默认当前月)
    /**
     * title: 月份
     * 值：  0   ->  11
     * 含义：1月  ->  12月
     */
    let curMonth = month || (new Date().getMonth() + 1);
    // 获取当前月的天数
    let curMonthContainDaysNumber = moment(`${curYear}-0${curMonth}`, "YYYY-MM").daysInMonth();
    let result = [];
    /**
     * title: 星期几
     * 日 一 二 三 四 五 六
     * 0  1  2  3  4  5  6
     */
    for (let index = 1; index <= curMonthContainDaysNumber; index++){
        let obj = {};
        obj.weekDay = moment(`${curYear}-${curMonth >= 10 ? curMonth : '0' + curMonth}-${index >= 10 ? index : '0' + index}`, "YYYY-MM-DD").format('dddd');
        obj.weekDayToNumber = transformWeekdayToNumber(obj.weekDay);
        obj.value = index;
        result.push(obj);
    }
    if (result[0]?.weekDayToNumber !== 0){
        // 需要向前补多余的空格
        for (let index = result[0]?.weekDayToNumber; index > 0; index--){
            result.unshift({});
        }
    }
    return [{
        curYear,
        curMonth,
        days: result
    }];
}

此时我们将这个工具方法引入到我们的自定义组件里看一下效果。自定义组件CustomCalendar的代码如下：

import React, { useEffect } from 'react';
import { getMonthDayOfYear } from './utils';

function CustomCalendar(){
    useEffect(
        () => {
            console.log('当前年月对应的总天数:', getMonthDayOfYear());
        }
    )
    return <div>
        自定义日历组件
    </div>
}

export default CustomCalendar;

我们可以看到，我们的这个工具方法可以很好的把当前年月对应的总天数获取到。有了这个，我们可以直接将当前的日历面板绘画出来。

修改组件内容如下：

import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { getMonthDayOfYear } from './utils';
import './index.css';

function CustomCalendar(){
    let [dayTitle, setDayTitle] = useState(
        [
            { name: '日', key: 'Sunday' },
            { name: '一', key: 'Monday' },
            { name: '二', key: 'Tuesday' },
            { name: '三', key: 'Wednesday' },
            { name: '四', key: 'Thursday' },
            { name: '五', key: 'Friday' },
            { name: '六', key: 'Saturday' },
        ]
    );
    let [allMonthArr, setAllMonthArr] = useState(getMonthDayOfYear());
    let [curYear, setCurYear] = useState(moment().format().split('-')[0]);
    let [curMonth, setCurMonth] = useState(new Date().getMonth() + 1);

    return <div>
        <div className = 'custom-calendar'>
            <div className = 'custom-calendar-head'>
                {
                    `${curYear}年${curMonth}月`
                }
            </div>
            <div className = 'custom-calendar-body'>
                <div className = 'day-title'>
                    {
                        dayTitle.map(item => {
                            return <div className = 'day-title-cell'>{item.name}</div>
                        })
                    }
                </div>
                <div className = 'show-month-contain-days-box'>
                    {
                        allMonthArr.map(item => {
                            return <div className = 'month-box'>
                                <div className = 'month-title-days'>
                                    {
                                        (item?.days || []).map(cell => {
                                            return <div 
                                                className = {`
                                                    cell-box
                                                `} 
                                                onClick={() => this.clickCellValue(cell)}
                                            >
                                                {cell.value}
                                            </div>
                                        })
                                    }
                                </div>
                            </div>
                        })
                    }
                </div>
            </div>
        </div>
    </div>
}

export default CustomCalendar;

样式文件如下：

.custom-calendar {
    width: 300px;
    height: 321px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgb(240, 240, 240);
    margin-top: 50px;
    margin-left: 500px;
}
.custom-calendar-head {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-calendar-body {
    width: 100%;
    height: calc(100% - 50px);
    border-radius: 0 0 8px 8px;
    border-top: 1px solid rgba(5, 5, 5, 0.06);
}
.day-title {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.day-title-cell {
    flex: 1;
}
.show-month-contain-days-box {
    width: 100%;
    height: calc(100% - 30px);
    box-sizing: border-box;
}
.month-box, .month-title-days {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.month-title-days {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.cell-box {
    min-width: 14%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.selected-cell-box {
    background: #3371FF;
    border-radius: 8px;
    color: #FFFFFF;
}
.range-cell {
    background: rgba(51,113,255,0.15);
    color: #111111;
}

小伙伴们可以直接将代码copy下来，并运行在自己的本地，如果没错的话，此时的面板应该是下面这样：

到这里，我们已经完成了面板的绘画。

四、确定组件属性

现在我们已经把静态的架子搭起来了，此时我们需要思考一下这个组件的整体能力。

按照我们实现的能力来看，我们似乎就需要2个属性就可以。如下：

属性	说明
type	组件类型：单选(one)、区间(range)
pickTime	组件是否需要选择时间

五、实现区间选择功能

当面板里的单元格被点击时，此时的逻辑如下：

• 判断当前点击次数，如果是1，说明此时的单元格是开始日期。如果是2，则需要进行判断，判断当前单元格是开始日期，还是结束日期。
• 如果当前点击的次数是3，则需要重制当前点击次数，并且重置区间。
• 处理单元格的颜色。如果当前单元格没有形成区间，那么点击的单元格就应该有一个颜色a。如果当前的单元格形成了区间，那么不仅点击的单元格有一个颜色a，那么区间里面的单元格应该也有一个颜色b。

效果如下：

经过上面的分析，我们来给组件添加交互：

function CustomCalendar(){
    // 其余代码不变 -----
    let [clickCount, setCurClickCount] = useState(0); // 点击次数
    let [type, setType] = useState('range'); // 判断组件类型
    let [startDate, setStartDate] = useState(''); // 选中的开始日期
    let [endDate, setEndDate] = useState(''); // 选中的结束日期
    
    const dealClickCellOfRange = (obj) => {
        let self = this;
        // 获取当前点击的次数
        let curClickCount = clickCount + 1;
        // 当前点击的可能是开始日期，也有可能是结束日期
        let curStartDateOrEndStartDate = `${curYear}-${curMonth}-${obj.value}`;
        if (curClickCount === 1){ // 说明是初始点击
            setCurClickCount(curClickCount);
            setStartDate(curStartDateOrEndStartDate);
            return
        }
        if (curClickCount === 2){ // 说明是点击了2次
            // 自动切换终止日期与起止日期
            if (moment(curStartDateOrEndStartDate).isBefore(startDate)){
                setCurClickCount(curClickCount);
                setEndDate(startDate);
                setStartDate(curStartDateOrEndStartDate);
            } else {
                setCurClickCount(curClickCount);
                setEndDate(curStartDateOrEndStartDate);
            }
        }
        if (curClickCount === 3){ // 说明要重新定义区间
            setCurClickCount(0);
            setEndDate('');
            setStartDate('')
        }
    }

    // 点击面板里的值
    const clickCellValue = (obj) => {
        if(type === 'one'){
            dealClickCellOfOne(obj);
        } else {
            dealClickCellOfRange(obj);
        }
    }
    
    // 判断当前单元格的样式
    const judgeCellBackground = (val1, val2) => {
        if (type === 'range'){
            if (val1 === val2){
                return 'selected-cell-box'
            } else {
                return ''
            }
        }
    }

    // 判断当前cell是否在区间里，并且不是2边的节点
    const judgeCellInRange = (obj) => {
        if (type === 'one'){
            return '';
        }
        let curStartDateOrEndStartDate = `${curYear}-${curMonth}-${obj.value}`;
        if (clickCount == 2){ // 如果形成区间
            if (moment(curStartDateOrEndStartDate).isBetween(startDate, endDate)){
                if (curStartDateOrEndStartDate !== startDate && curStartDateOrEndStartDate !== endDate){
                    return 'range-cell';
                }
            }
        }
        return '';
    }
    
    return <div>
        <div className = 'custom-calendar'>
            {/** 其余代码不变, 只改变cell单元格 */}
            {
                ...
                    <div 
                        className = {`
                            cell-box
                            ${judgeCellBackground(startDate, `${curYear}-${curMonth}-${cell.value}`)}
                            ${judgeCellBackground(endDate, `${curYear}-${curMonth}-${cell.value}`)}
                            ${judgeCellInRange(cell)}
                        `} 
                        onClick={() => clickCellValue(cell)}
                    >
                ...
            }
        </div>
    </div>
    
}

export default CustomCalendar;

六、实现日期单选功能

在上面，我们通过点击次数的概念，定义 startDate + endDate 来实现了区间的功能。单选的这个功能相信它已经不是问题了。我们只要忽略点击次数的概念即可。逻辑如下：

• type == 'one'，忽略点击次数。
• 新增一个绑定单选的变量 curSelectedDateObj，每次单选都给这个变量赋值。
• 给当前点击的单元格添加颜色。

我们先来看一下效果：

修改组件交互如下：

function CustomCalendar(){

    // 其余代码不变------

    // 修改组件的type默认值为"one"
    let [type, setType] = useState('one'); // 判断组件类型
    
    //单选时绑定的值
    let [curSelectedDateObj, setCurSelectedDateObj] = useState({
        value: '',
        name: ''
    });
    // 单选时，点击面板单元格的处理
    const dealClickCellOfOne = (obj) => {
        let curSelectedDate = `${curYear}-${curMonth}-${obj.value}`;
        setCurSelectedDateObj({
            value: curSelectedDate,
            name: moment(curSelectedDate).format('YYYY-MM-DD')
        });
    }
    // 判断当前单元格的样式
    const judgeCellBackground = (val1, val2) => {
        if (type === 'one'){
            if (val2 === curSelectedDateObj.value){
                return 'selected-cell-box'
            }
            return '';
        }
        if (type === 'range'){
            if (val1 === val2){
                return 'selected-cell-box'
            } else {
                return ''
            }
        }
    }
    // 其余代码不变------
    return (...)
}

七、实现单选日期时间功能

7.1、完成时间面板的吸附功能

在前面的讲解中，我们已经实现了"区间选择"、"单选日期"的功能。我们这次来看下，在"单选日期"的基础上，如何添加选择时间的功能。

还是老样子，先看一下时间面板的大致样式：

三个柱子，分别是时、分、秒。选中的单元格始终在各自柱子的最上方。

时间面板与前面的日期面板的关系如下：

确定了这个交互以后，我们首先来画一下时间面板，还是跟上面一样，先看一眼咱们实现的效果：

看到这个实现效果，我们先来捋清一下时间面板的渲染逻辑：

• 得到三个柱子的value集合。
• 新增3个变量 curSelectedHour、curSelectedMinute、curSelectedSecond，选中时分秒后，分别赋值。当然，他们3个都会有默认值'00'。
• 每个柱子的里的区块颜色都只有2种，要么是选中，要么是没选中

修改组件代码如下：

// 创建小时、分钟、秒集合
function createTimeOfHourArr(final){
    let result = [];
    for (let index = 0; index <= final; index++){
        result.push(index >= 10 ? `${index}` : `0${index}`);
    }
    return result;
}

function CustomCalendar(){
    // 其余代码不变------
    let [curSelectedHour, setCurSelectedHour] = useState('00'); // 当前选中的小时
    let [curSelectedMinute, setCurSelectedMinute] = useState('00'); // 当前选中的分钟
    let [curSelectedSecond, setCurSelectedSecond] = useState('00'); // 当前选中的秒
    let [timeModalObj, setTimeModalObj] = useState({ // 小时、分钟、描述渲染的集合
        hourArr: createTimeOfHourArr(23),
        minuteArr: createTimeOfHourArr(59),
        secondArr: createTimeOfHourArr(59)
    });
    
    return <div>
        {/** 日期看板代码不变 */}
        <div className='time-box'>
            {/* 时间body */}
            <div className = 'time-body'>
                <div className = 'time-body-hour' ref={(value) => getScrollRef(value, 'hour')}>
                    {
                        timeModalObj.hourArr?.map((item, index) => {
                            return <div 
                                className = {`time-cell ${item === curSelectedHour ? 'selected-time-cell' : ''}`}
                            >
                                {item}
                            </div>
                        })
                    }
                    <div className = 'white-split'></div>
                </div>
                <div className = 'time-body-minute' ref={(value) => getScrollRef(value, 'minute')}>
                    {
                        timeModalObj.minuteArr?.map((item, index) => {
                            return <div 
                                className = {`time-cell ${item === curSelectedMinute ? 'selected-time-cell' : ''}`}
                            >
                                {item}
                            </div>
                        })
                    }
                    <div className = 'white-split'></div>
                </div>
                <div className = 'time-body-second' ref={(value) => getScrollRef(value, 'second')}>
                    {
                        timeModalObj.secondArr?.map((item, index) => {
                            return <div 
                                className = {`time-cell ${item === curSelectedSecond ? 'selected-time-cell' : ''}`}
                            >
                                {item}
                            </div>
                        })
                    }
                    <div className = 'white-split'></div>
                </div>
            </div>
        </div>
    </div>
}

新增样式如下：

.time-box {
    width: 300px;
    height: 321px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid rgb(240, 240, 240);
    margin-top: 50px;
}

.time-body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
}

.time-body-hour, .time-body-minute, .time-body-second {
    width: 33%;
    height: 100%;
    flex: 1;
    box-sizing: border-box;
    overflow-y: scroll;
}

.time-cell {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.41rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
}
.selected-time-cell {
    background: #E1EAFF !important;
}
.white-split {
    width: 100%;
    height: 300px;
    box-sizing: border-box;
}

目前为止，我们就剩下最后2步了，分别是给 时间面板添加滚动效果、控制时间面板的显示与隐藏。

我们之前说过，选中的"时分秒"一定是在面板的最上层，相当于吸附顶端，因为"时分秒"的3个柱子是滚动的，所以我们可以利用父容器 scrollTo 方法来完成这个"吸附"功能。

但是这里还有一个问题，就是下面这样：

因为我们使用scrollTo来完成区块的"吸附"效果，所以当我们选中最后面几个区块的时候，并不能完成吸附效果，因为他们已经是父容器里的最底部了。所以为了解决这个问题，我在上面特意加了一个元素（white-split元素），高度至少是一页的高度。

有了上面的逻辑分析，我们来完成剩下的代码。

添加交互代码如下：

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

function CustomCalendar(){
    let [isSelectedPickTime, setIsSelectedPickTime] = useState(true);  // 是否出现选择时间面板
    let timeBodyHour = useRef(null);          // 小时dom容器(控制容器滚动)
    let timeBodyMinute = useRef(null);        // 分钟dom容器
    let timeBodySecond = useRef(null);        // 秒dom容器
    
    // 选中时间(flag: hour、minute、second), 将选中块置顶
    const clickTimeCell = (flag, value, index) => {
        // 获取每个块的高度
        let height = timeBodyHour.children[0]?.getBoundingClientRect()?.height || 0;
        if (flag === 'hour'){
            // 如果点击的是"小时区域"
            setCurSelectedHour(value);
            timeBodyHour.scrollTo(0, index * height);
        }
        if (flag === 'minute'){
            // 如果点击的是"分钟区域"
            setCurSelectedMinute(value);
            timeBodyMinute.scrollTo(0, index * height);
        }
        if (flag === 'second'){
            // 如果点击的是"秒区域"
            setCurSelectedSecond(value);
            timeBodySecond.scrollTo(0, index * height);
        }
    }
    
    // 容器滚动方法
    const getScrollRef = (value, flag) => {
        if (flag === 'hour' && isSelectedPickTime){
            timeBodyHour = value;
            let hourIndex = timeModalObj.hourArr.indexOf(curSelectedHour);
            if (timeBodyHour){
                let height = timeBodyHour.children[0]?.getBoundingClientRect()?.height || 0;
                timeBodyHour.scrollTo(0, hourIndex * height);
            }
        }
        if (flag === 'minute' && isSelectedPickTime){
            timeBodyMinute = value;
            let minuteIndex = timeModalObj.minuteArr.indexOf(curSelectedMinute);
            if (timeBodyMinute){
                let height = timeBodyMinute.children[0]?.getBoundingClientRect()?.height || 0;
                timeBodyMinute.scrollTo(0, minuteIndex * height);
            }
        }
        if (flag === 'second' && isSelectedPickTime){
            timeBodySecond = value;
            let secondIndex = timeModalObj.secondArr.indexOf(curSelectedSecond);
            if (timeBodySecond){
                let height = timeBodySecond.children[0]?.getBoundingClientRect()?.height || 0;
                timeBodySecond.scrollTo(0, secondIndex * height);
            }
        }
    }
    
    return <div>
        {/** ---其余代码不变--- */}
        
        <div className = 'time-body'>
            <div className = 'time-body-hour' ref={(value) => getScrollRef(value, 'hour')}>
                {
                    timeModalObj.hourArr?.map((item, index) => {
                        return <div 
                            className = {`time-cell ${item === curSelectedHour ? 'selected-time-cell' : ''}`}
                            onClick={() => clickTimeCell('hour', item, index)}
                        >
                            {item}
                        </div>
                    })
                }
                <div className = 'white-split'></div>
            </div>
            <div className = 'time-body-minute' ref={(value) => getScrollRef(value, 'minute')}>
                {
                    timeModalObj.minuteArr?.map((item, index) => {
                        return <div 
                            className = {`time-cell ${item === curSelectedMinute ? 'selected-time-cell' : ''}`}
                            onClick={() => clickTimeCell('minute', item, index)}
                        >
                            {item}
                        </div>
                    })
                }
                <div className = 'white-split'></div>
            </div>
            <div className = 'time-body-second' ref={(value) => getScrollRef(value, 'second')}>
                {
                    timeModalObj.secondArr?.map((item, index) => {
                        return <div 
                            className = {`time-cell ${item === curSelectedSecond ? 'selected-time-cell' : ''}`}
                            onClick={() => clickTimeCell('second', item, index)}
                        >
                            {item}
                        </div>
                    })
                }
                <div className = 'white-split'></div>
            </div>
            </div>
        
        {/** ---其余代码不变--- */}
    </div>
    
}

至此，我们完成了选中的时间块自动滚动到相应容器的顶部。效果如下：

7.2、最后一公里

我们接着完成剩下的需求：时间面板的出现时机 与 日历组件的值显示。

我们新增一个变量isSelectedPickTime，当这个值为true的时候就显示时间面板。具体逻辑如下：

• 默认值为false。
• 当type === 'one'，并且选择了日期面板的值，才将 isSelectedPickTime 的值设为true。
• 值为true，显示时间面板。

修改代码如下：

let [isSelectedPickTime, setIsSelectedPickTime] = useState(false);

// dealClickCellOfOne方法修改如下
const dealClickCellOfOne = (obj) => {
    let curSelectedDate = `${curYear}-${curMonth}-${obj.value}`;
    setCurSelectedDateObj({
        value: curSelectedDate,
        name: moment(curSelectedDate).format('YYYY-MM-DD')
    });
    setIsSelectedPickTime(true);
}

交互效果如下：

日历组件的值显示，这个问题的答案就不写了，因为读到这里，小伙伴肯定发现了，我们会根据type的不同，把当前组件的值set给不同的变量，我们只需要根据type来显示相应的变量即可。

八、最后

好啦，本期日历组件分享到这里就结束啦，如果此文对您有帮助，希望得到您的4连认可（点赞收藏评论+关注），如果想观看更多内容，欢迎关注微信公众号：从0前端。我们一起进步，那么下期再见啦～～