手写一个react日历超级简单

概述

一个超级简单的日历，日历核心代码只有十几行，方便之后扩展成日程管理。源码点击这里

前言

日历或者日程管理，在项目中是个高频使用的组件，常常会碰到日程管理这种需求，网上已经有不少成熟的库，可是产品经理的思惟是你我没法揣测的，因此先储备一下，作个简单的日历，方便之后用的的时候直接用，代码使用react写的，可是核心的日历计算思想能够用到各类框架中。

实现

首先看看最终实现的效果

能够看到一个能查看上一个月或者下一个月的简单日历。

日历的计算的核心就是经过date.setdate()方法，能够获取到相对于当前日期的某天，好比new Date().setdate(1)就是当前日期的下一天

代码很简单也有注释，就很少赘述，有不懂的地方留言，秒回

import React, {Component} from 'react';
import style from './style.use.less'

export default class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentDay: '',
            currentMonth: '', 
            currentYear: '', 
            weekList: [
                {name: '一', className: ''},
                {name: '二', className: ''},
                {name: '三', className: ''},
                {name: '四', className: ''},
                {name: '五', className: ''},
                {name: '六', className: ''},
                {name: '日', className: ''}
            ],
            dayList: []
        }

        this.initCalendar = this.initCalendar.bind(this);
        this.renderHeader = this.renderHeader.bind(this);
        this.renderBody = this.renderBody.bind(this);
        this.preMonth = this.preMonth.bind(this);
        this.nextMonth = this.nextMonth.bind(this);
    }

    componentWillMount() {
      // style.use() // 须要配置loader 能够直接注释 忽略掉  实现每一个模块卸载以后 css也会销毁 能够看以前写的一篇react css局部做用域的文章
    }

    componentWillUnmount() {
       // style.unuse() // 须要配置loader 能够直接注释 忽略掉 实现每一个模块卸载以后 css也会销毁 能够看以前写的一篇react css局部做用域的文章
    }

    componentDidMount() {
        this.initCalendar()
    }

    // 获取当前date的当月第一天的字符串形式
    getMonthFirstDate(date) {
        let nowYear = date.getFullYear(); // 获取年份
        let nowMonth = date.getMonth()+1; // 获取月份
        return  `${nowYear}-${nowMonth}-01`
    }

    // 获取当前date的字符串形式
    getDateString(date) {
        let nowYear = date.getFullYear(); // 获取年份
        let nowMonth = date.getMonth()+1; // 获取月份
        let day = date.getDate();
        day = day < 10 ? '0' + day : day;
        return  `${nowYear}-${nowMonth}-${day}`
    }

    // 上个月
    preMonth() {
        let date = new Date(`${this.state.currentYear}-${this.state.currentMonth}-${this.state.currentDay}`)
        let preMonthFirstDate = new Date(this.getMonthFirstDate(new Date(date.setDate(0)))); // 0 是上个月最后一天
        this.initCalendar(preMonthFirstDate)
    }

    // 下个月
    nextMonth() {
        let date = new Date(`${this.state.currentYear}-${this.state.currentMonth}-${this.state.currentDay}`)
        let nextMonthFirstDate = new Date(this.getMonthFirstDate(new Date(date.setDate(33))));
        this.initCalendar(nextMonthFirstDate)
    }


    // 初始化日历
    initCalendar(currentDate) {
        
        let nowDate = currentDate ? currentDate : new Date();
        let nowMonthFirstDate = this.getMonthFirstDate(nowDate) // 获取当月1号日期
        let nowWeek = new Date(nowMonthFirstDate).getDay() ? new Date(nowMonthFirstDate).getDay() : 7; // 获取星期
        let newDateList = []; // 建立日期数组
        let startDay =  2 - nowWeek; // 开始日期的下标  觉得 setDate(0)是上个月最后一天  因此是2-nowWeek
        
        let showDayLength = nowWeek < 6 ? 35 : 42;  // 若是5行能显示下一个月 就只显示5行
        // 循环处理 获取日历上应该显示的日期
        for (let i = startDay; i < startDay + showDayLength; i++) {
            let date = new Date(new Date(nowMonthFirstDate).setDate(i)); // 获取时间对象
            let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() // 小于9的数字前面加0
            let dayObject = {
                date: this.getDateString(date),
                day,
                className: '',
            }
            // new Date(str).toDateString() === new Date().toDateString()
            if (date.toDateString() === new Date().toDateString()) {
                dayObject.className = 'today'
            }
            newDateList.push(dayObject)
        }

        this.setState((pre) => {
            return {
                dayList: newDateList,
                currentDay: nowDate.getDate(),
                currentMonth: nowDate.getMonth() + 1 >= 10 ? nowDate.getMonth() + 1 : '0' + (nowDate.getMonth() + 1),
                currentYear: nowDate.getFullYear(),
            }
        })

    }

    renderHeader() {
        return(
            <div className = 'calendar-header'>
                <div className = 'calendar-header-left'>
                    <button onClick = {this.preMonth}>上个月</button>
                </div>
                <div className = ''>
                    {this.state.currentYear}年{this.state.currentMonth}月
                </div>
                <div className = 'calendar-header-right'>
                    <button onClick = {this.nextMonth}>下个月</button>
                </div>
            </div>
        )
    }

    renderBody() {
        return(
            <div className = 'calendar-body'>
                <div className = 'week-container'>
                    {this.state.weekList.map(week => {
                        return <div key = {week.name} className = {`week ${week.className}`}>{week.name}</div>
                    })}
                </div>
                <div className = 'day-container'>
                    {this.state.dayList.map( (dayObject, index) => {
                        return <div key = {index} className = {`day ${dayObject.className}`}>{dayObject.day}</div>
                    })}
                </div>
            </div>
        )
    }

    render() {
        return(
            <div className = 'calendar'>
                {this.renderHeader()}
                {this.renderBody()}
            </div>
        )
    }
}

css文件

.calendar {
    width: 320px;
    margin-top: 40px;
    .calendar-header {
        display: flex;
        justify-content: space-between;
        padding: 14px 12px; 
    }
    .calendar-body {
        .week-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-bottom: 10px;
            .week {
                &:nth-child(6), &:nth-child(7){
                    color: #e02d2d;
                }
                width: 14.2%;
                display: inline-block;
                text-align: center;
            }
        }

        .day-container {
            height: 140px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            .day {
                width: 14.2%;
                display: inline-block;
                text-align: center;
                &:nth-child(7n-1){
                    color: #e02d2d;
                }
                &:nth-child(7n){
                    color: #e02d2d;
                }
                &.today {
                    color: green;
                }
            }
 
        }
    }
}