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 发布文章使用：只允许注册用户才可以访问！

---

React & Calendar的更多相关文章

1. React 学习笔记（学习地址汇总）

   好的博文地址:http://www.ruanyifeng.com/blog/2015/03/react.html 官网学习地址:http://facebook.github.io/react/docs ...

2. react路由深度解析

   先看一段代码能否秒懂很重要 这是app.js  全局js的入口 import React from 'react' import { render } from 'react-dom' import ...

3. react native 中时间选择插件

   npm install react-native-datepicker --save import DatePicker from 'react-native-datepicker'; <Vie ...

4. React Router 4&period;x 开发，这些雷区我们都帮你踩过了

   前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

5. react学习一篇就够了

   webstrom自动格式化代码 命令 js框架 MVC 安装 npm install create-react-app -g 生成项目(项目名npm发包包命名规范 /^[a-z0-9_-]$/) cr ...

6. React Router API文档

   React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...

7. Expo大作战&lpar;四十&rpar;--expo sdk api之 Calendar&comma;Constants

   简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

8. 时间选择控件YearPicker（基于React，antd）

   不知道为什么蚂蚁金服团队没有在ant design的DatePicker中单独给出选择年份的组件,这给我们这种懒人造成了很大的痛苦,自己手造轮子是很麻烦的.毕竟只是一个伸手党,emmmmm..... ...

9. React半科普文

   React半科普文 什么是React getting started 文件分离 Server端编译 定义一个组件 使用property 组件嵌套 组件更新 Virtual DOM react nati ...

随机推荐

1. vmware安装ubuntu卡在install vm-tools

   vmware,安装ubuntu或者centos,都有这个问题:vmware自作聪明,提示说"快速安装",然后会使用一个autoinst.iso文件来快速安装,并且装完系统后该重启了 ...

2. android不要标题栏

   去除标题栏title其实非常简单,他有两种方法,一种是在代码中添加,另一种是在AndroidManifest.xml中添加: 1.在代码中实现: 在此方法setContentView(R.layout ...

3. 九、Socket之TCP编程

   TCP简介 TCP是Transmission Control Protocol(传输控制协议)的简称,是TCP/IP体系中面向连接的运输层协议,在网络中提供全双工的和可靠的服务. TCP最主要的特点: ...

4. php - 微信 - 缓存access&lowbar;token类。

   可扩展性很强. <?php namespace LaneWeChat\Core; /** * 微信Access_Token的获取与过期检查 * Created by Lane. * User: ...

5. python&sol;numpy&sol;tensorflow中，对矩阵行列操作，下标是怎么回事儿？

   Python中的list/tuple,numpy中的ndarrray与tensorflow中的tensor. 用python中list/tuple理解,仅仅是从内存角度理解一个序列数据,而非数学中标量 ...

6. CSS常用属性-xy

   一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...

7. How Flyway works

   The easiest scenario is when you point Flyway to an empty database. It will try to locate its schema ...

8. virtualenv 使用

   一.安装 pip install virtualenv 因为我已经安装了pip,那么就直接用pip来安装了,简单方便. 其它的安装方式请参考官方网站:http://www.virtualenv.org ...

9. 时空KSOA之CS表单工具说明

   CS表单工具说明 1.调用: 1.1.单据事件调用 runbill_表单sn 调用无窗口表单 loadbill_表单sn 调用窗口表单 1.2.功能调用 功能号:LOADCSBILL 参数表单名称 1 ...

10. window&period;screen&period;height和window&period;screen&period;availHeight和document&period;body&period;clientHeight和document&period;documentElement&period;clientHeight

    说这几个属性前 我说一下我的设备 我的设备有两个,一个高度为1080的显示器,一个高度为800的电脑 第一种:window.screen.height 这个方法是获取用户电脑屏幕的高度,是不关浏览器或 ...