React & Calendar

React & Calendar

日历

---

https://github.com/YutHelloWorld/calendar/blob/master/src/Calendar.js

// 国际化 i18n & L10n ??? local.config.json 

  renderTable() {
    const weekdays = this.props.locale === 'en' ? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
      : ['日', '一', '二', '三', '四', '五', '六']
    return (
      <table className="calendar-table">
        <tbody onClick={this.handleSelectDate}>
          <tr>
            {
              weekdays.map((w, i) => <th key={w} >{w}</th>)
            }
          </tr>
          {this.state.list.map(arr => {
            return (
              <tr key={arr[0]}>
                {arr.map(value =>
                  (<td key={value}>
                    <span
                      data-date={value}
                      className={this.getClassName(value)}
                    >
                      {value.slice(8)}
                    </span>
                  </td>)
                )}
              </tr>
            )
          })}
        </tbody>
      </table>
    )
}

https://github.com/YutHelloWorld/calendar/blob/master/src/utils/index.js

/**
 * 获取日历展示日期列表
 *
 * @export
 * @param {Number} y
 * @param {Number} m
 * @returns
 */
export function getDateList(y, m) {
  const year = y
  const month = m - 1
  let list = []
  const now = new Date(year, month)
  const monthEnd = new Date(year, month + 1, 0) // 当月最后一天
  const lastMonthEnd = new Date(year, month, 0) // 上月最后一天
  const firstDay = now.getDay() // 当月第一天
  const mEDate = monthEnd.getDate()
  const lMEDate = lastMonthEnd.getDate()

  // 计算上月出现在  中的日期
  for (let i = 0; i < firstDay; i++) {
    const tempM = month > 0 ? month : 12
    const tempY = month > 0 ? year : year - 1
    const strMonth = tempM < 10 ? `0${tempM}` : tempM
    list.unshift(`${tempY}-${strMonth}-${lMEDate - i}`)
  }

  // 当月
  for (let i = 1; i < mEDate + 1; i++) {
    const strI = i < 10 ? '0' + i : i
    const tempM = month + 1
    const strMonth = tempM < 10 ? `0${tempM}` : tempM
    list.push(`${year}-${strMonth}-${strI}`)
  }

  const tempLen = 42 - list.length

  // 下月
  for (let i = 1; i < tempLen + 1; i++) {
    const strI = i < 10 ? '0' + i : i
    const tempM = month + 2 < 13 ? month + 2 : 1
    const tempY = month + 2 < 13 ? year : year + 1
    const strMonth = tempM < 10 ? `0${tempM}` : `${tempM}`
    list.push(`${tempY}-${strMonth}-${strI}`)
  }
  return list
}

const weeks = ["日", "一", "二", "三", "四", "五", "六"];

https://cloud.tencent.com/developer/article/1497665

https://segmentfault.com/a/1190000016296697

import * as React from 'react'

const WEEK_NAMES = ['日', '一', '二', '三', '四', '五', '六']
const LINES = [1,2,3,4,5,6]
const MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

export default class Calendar extends React.Component {
  state = {
    month: 0,
    year: 0,
    currentDate: new Date()
  }

  componentWillMount() {
    this.setCurrentYearMonth(this.state.currentDate)
  }

  setCurrentYearMonth(date) {
    var month = Calendar.getMonth(date)
    var year = Calendar.getFullYear(date)
    this.setState({
      month,
      year
    })
  }

  static getMonth(date: Date): number{
    return date.getMonth()
  }

  static getFullYear(date: Date): number{
    return date.getFullYear()
  }

  static getCurrentMonthDays(month: number): number {
    return MONTH_DAYS[month]
  }

  static getWeeksByFirstDay(year: number, month: number): number {
    var date = Calendar.getDateByYearMonth(year, month)
    return date.getDay()
  }

  static getDayText(line: number, weekIndex: number, weekDay: number, monthDays: number): any {
    var number = line * 7 + weekIndex - weekDay + 1
    if ( number <= 0 || number > monthDays ) {
      return <span>&nbsp;</span>
    }

    return number
  }

  static formatNumber(num: number): string {
    var _num = num + 1
    return _num < 10 ? `0${_num}` : `${_num}`
  }

  static getDateByYearMonth(year: number, month: number, day: number=1): Date {
    var date = new Date()
    date.setFullYear(year)
    date.setMonth(month, day)
    return date
  }

  checkToday(line: number, weekIndex: number, weekDay: number, monthDays: number): Boolean {
    var { year, month } = this.state
    var day = Calendar.getDayText(line, weekIndex, weekDay, monthDays)
    var date = new Date()
    var todayYear = date.getFullYear()
    var todayMonth = date.getMonth()
    var todayDay = date.getDate()

    return year === todayYear && month === todayMonth && day === todayDay
  }

  monthChange(monthChanged: number) {
    var { month, year } = this.state
    var monthAfter = month + monthChanged
    var date = Calendar.getDateByYearMonth(year, monthAfter)
    this.setCurrentYearMonth(date)
  }

  render() {
    var { year, month } = this.state
    console.log(this.state)

    var monthDays = Calendar.getCurrentMonthDays(month)
    var weekDay = Calendar.getWeeksByFirstDay(year, month)

    return (<div>
      {this.state.month}
      <table cellPadding={0} cellSpacing={0} className="table">
        <caption>
          <div className="caption-header">
            <span className="arrow" onClick={this.monthChange.bind(this, -1)}><</span>
            <span>{year} - {Calendar.formatNumber(month)}</span>
            <span className="arrow" onClick={this.monthChange.bind(this, 1)}>&gt;</span>
          </div>
        </caption>
        <thead>
          <tr>
            {
              WEEK_NAMES.map((week, key) => {
                return <td key={key}>{week}</td>
              })
            }
          </tr>
        </thead>
        <tbody>
        {
          LINES.map((l, key) => {
            return <tr key={key}>
              {
                WEEK_NAMES.map((week, index) => {
                  return <td key={index} style={{color: this.checkToday(key, index, weekDay, monthDays) ? 'red' : '#000'}}>
                    {Calendar.getDayText(key, index, weekDay, monthDays)}
                  </td>
                })
              }
            </tr>
          })
        }
        </tbody>
      </table>
    </div>)
  }
}

https://github.com/LingyuCoder/react-lunar-calendar/blob/master/index.jsx

---

https://rsuitejs.com/components/calendar

https://github.com/rsuite/rsuite

https://www.cnblogs.com/ajanuw/p/10100320.html

http://www.alloyteam.com/2015/10/react-teaching-step-by-step-teach-you-how-to-write-a-calendar-control/

https://github.com/hanse/react-calendar

https://github.com/BelkaLab/react-yearly-calendar

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---