手撸一个Calendar日历组件

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

一、本次实现的功能

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

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

二、本次实现说明

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

三、画日期面板

首先我们要把日历的面板画出来,大致样式如下:
手撸一个Calendar日历组件_第1张图片

日历一般都是这样的设计,想要获取日历面板,我们可以直观的感受到,我们需要做的事情有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;

手撸一个Calendar日历组件_第2张图片

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

修改组件内容如下:

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下来,并运行在自己的本地,如果没错的话,此时的面板应该是下面这样:

手撸一个Calendar日历组件_第3张图片

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

四、确定组件属性

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

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

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

五、实现区间选择功能

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

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

效果如下:

手撸一个Calendar日历组件_第4张图片

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

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,每次单选都给这个变量赋值。
  • 给当前点击的单元格添加颜色。

我们先来看一下效果:

手撸一个Calendar日历组件_第5张图片
修改组件交互如下:

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、完成时间面板的吸附功能

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

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

手撸一个Calendar日历组件_第6张图片

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

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

手撸一个Calendar日历组件_第7张图片

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

手撸一个Calendar日历组件_第8张图片

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

  • 得到三个柱子的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 方法来完成这个“吸附”功能。

但是这里还有一个问题,就是下面这样:

手撸一个Calendar日历组件_第9张图片

因为我们使用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>
    
}

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

手撸一个Calendar日历组件_第10张图片

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);
}

交互效果如下:

手撸一个Calendar日历组件_第11张图片

手撸一个Calendar日历组件_第12张图片

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

八、最后

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

你可能感兴趣的:(前端,react.js,日历组件)