用react写一个日历插件

说明

个人娱乐所写(不保证BUG不存在)，UI方面参照其他人的UI设计

详情见本人github案例：案例

支持功能

• 初始化日期
• 高亮’今天’以及选择日期
• 历史记录选择日期
• 支持tag标识
• 支持选择日期回调
• 屏幕适应

效果图

基本思路

1. 计算出这一年中的每个月对应的天数，其中需要根据年份来判断2月份到底是28天还是29天，使用数组保存
2. 计算出这个月的第一天是星期几，来决定前面应该会有多少上个月的空格以及根据天数来判断月后应该有多少天来弥补

3. 渲染思路：

   • 使用三个数组，分别存有上一个月、当前月以及下一个月应该渲染的天数
   • 数组合并，根据每一行应该显示7列的特性，将大数组划分为6个小数组，这6个小数组中即为每一行应该显示的星期数

4. 具体代码

/**
 * Created by Ryn on 2016/8/7.
 * 日历组件
 */

import React from 'react';
import H from '../helpers/H';

const Calendar = React.createClass({

    /**
     * 默认的属性
     */
    getDefaultProps() {
        return {
            row_number : 6,
            col_number : 7
        }
    },

    /**
     * 组件初始化状态
     */
    getInitialState() {
        return {
            current_year : H.getFullYear(),
            current_month : H.getMonth(),
            current_day : H.getDate(),
            select_year : H.getFullYear(),
            select_month : H.getMonth(),
            select_day : H.getDate(),
            history_year : undefined,
            history_month : undefined,
            history_day : undefined,
            date_num_array : []
        }
    },

    componentWillReceiveProps(nextProps) {
        // todo
    },

    /**
     * 组件渲染完后执行
     */
    componentDidMount() {
        let { year, month, day} = this.props;

        // 初始化状态
        if(year && month && day) {
            let date_num_array = this._initMonthDayNumber(year),
                first_day = H.weekOfMonth(new Date(year, month - 1));

            this.setState({
                select_year : year,
                select_month : month - 1,
                select_day : day,
                date_num_array : date_num_array,
                first_day : first_day
            });
        }
    },

    /**
     * 给月份数组附上每月天数
     * @param year 年份
     * @private
     */
    _initMonthDayNumber(year) {
        let _date_array = [];

        for (var i = 0; i < 12; i++) {
            switch (i + 1) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    _date_array.push(31);
                    break;
                case 4:
                case 6:
                case 9: