准备工作
提早须要准备好react脚手架开辟环境,由于react已不支持在页面内部经由过程jsx.transform来转义,我们就本身大了个浅易的开辟环境
建立一个文件夹,命名为react-canlendar
cd ./react-canlendar
运转
npm init
一起enter我们取得一个package.json的文件
装置几个我们须要的脚手架依靠包
npm install awesome-typescript-loader typescript webpack webpack-cli -D
装置几个我们须要的类库
npm install @types/react react react-dom --save
基本类库装置终了,最先构建webpack设置
新建一个目次config,config下面新增一个文件,名字叫做webpack.js
var path = require('path')
module.exports = {
entry: {
main: path.resolve(__dirname, '../src/index.tsx')
},
output: {
filename: '[name].js'
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
{test: /\.tsx?$/, use: ['awesome-typescript-loader']}
]
}
}
还须要建立一个index.html文件,这是我们的进口文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/main.js"></script>
</body>
</html>
以上环境只是一个极简朴的环境,实在环境要比这个庞杂的多。
好了,言归正传,我们照样聚焦到日历组件的开辟中来吧
建立一个src文件夹,内部建立一个index.tsx文件。
这个进口文件很简朴就是一个挂载
import * as React from 'react'
import * as ReactDOM from 'react-dom'
ReactDOM.render((
<div>
test
</div>
), document.getElementById('root'))
ok,翻开页面能够看到页面一般显现了test字样。
我们须要建立Calendar组件了。
建立一个components文件夹,内部建立一个Calendar.tsx文件。
import * as React from 'react'
export default class Calendar extends React.Component {
render() {
return (<div>
日历
</div>)
}
}
在index.tsx中把Calendar.tsx引入,并运用起来。因而index.tsx变成这个模样。
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import Calendar from './components/Calendar'
ReactDOM.render((
<div>
<Calendar/>
</div>
), document.getElementById('root'))
能够看到页面显现了日历字样。
要显现日历,起首须要显现日历这个大框以及内部的一个个小框。完成这类规划最简朴的规划就是table了
所以我们起首建立的是这类日历table小框框,以及表头的礼拜分列。
import * as React from 'react'
const WEEK_NAMES = ['日', '一', '二', '三', '四', '五', '六']
const LINES = [1,2,3,4,5,6]
export default class Calendar extends React.Component {
render() {
return (<div>
<table cellPadding={0} cellSpacing={0} className="table">
<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}>{index}</td>
})
}
</tr>
})
}
</tbody>
</table>
</div>)
}
}
能够看到我们运用了一个礼拜数组作为表头,我们依据通例是从周日最先的。你也能够从其他礼拜最先,不过会对下面的日期显现有影响,由于每月的第一天是周几决议第一天显现在第几个格子里。
那为何行数要6行呢?由于我们是依据最大行数来肯定表格的行数的,假如一个月有31天,而这个月的第一天刚好是周六。就肯定会显现6行了。
为了显现悦目,我直接写好了款式安排在index.html中了,这个不主要,不解说。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.table {
border-collapse:collapse;
border-spacing:0;
}
.table td{
border: 1px solid #ddd;
padding: 10px;
}
.table caption .caption-header{
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
padding: 10px;
display: flex;
justify-content: space-between;
}
.table caption .caption-header .arrow {
cursor: pointer;
font-family: "宋体";
transition: all 0.3s;
}
.table caption .caption-header .arrow:hover {
opacity:0.7;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="./dist/main.js"></script>
</body>
</html>
下面就要最先显现日期了,起首要把当前月份的日期显现出来,我们先在组件的state中定义当前组件的状况
state = {
month: 0,
year: 0,
currentDate: new Date()
}
我们定义一个要领猎取当前年月,为何不须要猎取日,由于日历都是按月显现的。猎取日现在看来对我们没有意义,因而新增一个要领,设置当前组件的年月
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()
}
建立两个静态要领猎取年月,为何是静态要领,由于与组件的实例无关,最好放到静态要领上去。
要想绘制一个月还须要知道一个月的天数吧,才好绘制吧
所以我们建立一个数组来示意月份的天数
const MONTH_DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] // 暂定2月份28天吧
组件上建立一个函数,依据月份猎取天数,也是静态的
static getCurrentMonthDays(month: number): number {
return MONTH_DAYS[month]
}
下面另有一个主要的事变,就是猎取当前月份第一天是周几,这模样就能够决议把第一天绘制在那里了。起首要依据年月的第一天取得date,依据这个date猎取周几。
static getDateByYearMonth(year: number, month: number, day: number=1): Date {
var date = new Date()
date.setFullYear(year)
date.setMonth(month, day)
return date
}
这里取得每月的第一天是周几了。
static getWeeksByFirstDay(year: number, month: number): number {
var date = Calendar.getDateByYearMonth(year, month)
return date.getDay()
}
好了,最先在框子插进去日期数字了。由于每一个日期都是不一样的,这个二维数组能够先计算好,或许经由过程函数直接插进去到jsx中心。
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> </span>
}
return number
}
看一下这个函数须要几个参数哈,第一个行数,第二个列数(周几),本月第一天是周几,本月天数。line * 7 + weekIndex
示意当前格子本来是几,减去本月第一天礼拜数字。为何+1,由于索引是从0最先的,而天数则是从1最先。那末<0 || >本月最大天数的
则过滤掉,返回一个空span,只是为了撑开td。其他则直接返回数字。
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> </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)}>></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>)
}
}
能够看到终究的代码多了一些东西,由于我加了月份的切换。
还记的上文我们把二月份天数写28天嘛?要不你们本身改改,推断一下闰年。
建立了一个程序员交换微信群,人人进群交换IT手艺
假如已过期,能够增加博主微信号15706211347,拉你进群