自定义日历

在我们平时的开发中经常会用到日历calendar组件，但是第三方组件未必会满足自己实际需求，比如我们就需要一次展示一年的所有月份日历，这就需要我们对组件进行修改，或者自己开发一个，满足开发需求，其实日历组件的实现还是比较简单的，下面就让我们梭一个。

做日历比较麻烦的是获取月份天数及对应星期几，其实 new Date()已经给出了对应的api

// 获取5月天数
new Date(2023, 5, 0).getDate()

// 获取6月第一天星期几，星期日对应的值为 0
new Date(2023, 5, 1).getDay()

有了这两个api，我们就可以实现日历的基本能力，下面是react + antd的一个基本实现；

import React, { FC, useMemo, useCallback, useState } from 'react';
import { Divider, Select } from 'antd';
import styled from 'styled-components';

interface IndexProps {};

const Index: FC<IndexProps> = (props) => {
    // 当前年
    const [currentYear, setcurrentYear] = useState(new Date().getFullYear())
    // 选中当前月
    const [currentMonth, setCurrentMonth] = useState<number|null>(null)
    // 前后十年
    const yearOptions = useMemo(() => {
        const startYear = currentYear - 10
        const endYear = currentYear + 10
        const range = []
        for (let index = startYear; index < endYear; index++) {
            range.push(index)
        }
        return range.map(year => ({label: year, value: year}))
    }, [currentYear])
    // 月份
    const monthList = useMemo(() => [
        {label: '一月', value: 0},
        {label: '二月', value: 1},
        {label: '三月', value: 2},
        {label: '四月', value: 3},
        {label: '五月', value: 4},
        {label: '六月', value: 5},
        {label: '七月', value: 6},
        {label: '八月', value: 7},
        {label: '九月', value: 8},
        {label: '十月', value: 9},
        {label: '十一月', value: 10},
        {label: '十二月', value: 11},
    ], [])
    // 星期
    const weekList = useMemo(() => ['一','二','三','四','五','六','日',], [])
    
    // 获取每月天数
    const handleGetMonDays = useCallback((mon: number) => {
        return new Date(currentYear, mon + 1, 0).getDate()
    }, [currentYear])
    // 获取每月1号为周几
    const handleGetFirstDay = useCallback((mon: number) => {
        return new Date(currentYear, mon, 1).getDay()
    }, [currentYear])
    // 日历渲染列表
    const handleDateList = useCallback((mon: number) => {
        const datas = handleGetMonDays(mon)
        const firstDay = handleGetFirstDay(mon)
        const preMonthDay = firstDay - 1 >= 0 ? firstDay - 1 : 6
        return new Array(preMonthDay).fill(null).concat(new Array(datas).fill(null).map((d, i) => i + 1))
    }, [handleGetFirstDay, handleGetMonDays])
    // 切换年
    const handleChangeYear = useCallback((year: number) => {
        setcurrentYear(year)
    }, [])
    // 查看某月
    const handleMonth = useCallback((mon: number) => {
        setCurrentMonth(mon)
    }, [])

    return (
        <Container>
            <HeaderStyle>
                <Select style={{width: 80}} options={yearOptions} defaultValue={currentYear} onChange={handleChangeYear} />
            </HeaderStyle>
            <Divider style={{ margin: 0 }} />
            {currentMonth === null ? <MonthContainer>
                {monthList.map(month => <DateItemStyle>
                    <MonthStyle onClick={() => handleMonth(month.value)}>{month.label}</MonthStyle>
                    <WeekStyle>
                        {weekList.map(week => <WeekItemStyle>{ week }</WeekItemStyle>)}
                    </WeekStyle>
                    <MonthContainerStyle>
                        {handleDateList(month.value).map(d => <DayStyle>
                            {d}
                        </DayStyle>)}
                    </MonthContainerStyle>
                </DateItemStyle>)}
            </MonthContainer> :
            <DateContainer>
                <WeekStyle>
                    {weekList.map(week => <WeekItemStyle>{ week }</WeekItemStyle>)}
                </WeekStyle>
                <MonthContainerStyle>
                    {handleDateList(currentMonth).map(d => <DayStyle style={{height: currentMonth !== null ? '100px' : undefined}}>
                        {d}
                    </DayStyle>)}
                </MonthContainerStyle>
            </DateContainer>}
        </Container>
    )
}

export default Index;

const Container = styled.div`
    padding: 12px;
    background: #fff;
    height: 100%;
`;
const HeaderStyle = styled.div`
    padding: 12px 0px;
`
const MonthContainer = styled.div`
    padding: 12px;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
`
const DateItemStyle = styled.div`
    min-height: 270px;
    width: calc(100% / 3 - 9px);
    padding: 12px;
`
const MonthStyle = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    padding-bottom: 8px;
    cursor: pointer;
`
const WeekStyle = styled.div`
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
`
const WeekItemStyle = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% / 7);
    padding-bottom: 12px;
`
const MonthContainerStyle = styled.div`
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
`
const DayStyle = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% / 7);
    min-height: 30px;
    font-weight: bold;
`
const DateContainer = styled.div`
    padding: 12px;
`

image.png