Skip to content

Commit 130553c

Browse files
11034093641103409364
committed
1 parent c0d07e8 commit 130553c

4 files changed

Lines changed: 221 additions & 116 deletions

File tree

‎React/calendar/src/App.js‎

Lines changed: 7 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,15 @@
11
import React from 'react';
22
import Calendar from './components/Calendar';
33

4-
class App extends React.Component {
5-
constructor(props) {
6-
super(props);
4+
function App() {
5+
return (
6+
<div className="App " style = {{'display': 'block'}}>
7+
<h3>calendar</h3>
8+
<Calendar callback = {d => console.log(d)} />
79

8-
this.state = {
10+
</div>
11+
);
912

10-
}
11-
this.init();
12-
}
13-
14-
init() {
15-
let dateNow = new Date();
16-
this.setState = ({
17-
'year': dateNow.getFullYear(),
18-
'month': dateNow.getMonth(),
19-
'date': dateNow.getDate(),
20-
'day': dateNow.getDay(),
21-
})
22-
}
23-
24-
render() {
25-
return (
26-
<div className="App">
27-
{/* <p>请选择日期
28-
<input type="text"></input> </p>*/}
29-
<Calendar dateNow={this.state} />
30-
31-
</div>
32-
);
33-
}
3413

3514
}
3615

‎React/calendar/src/components/Calendar.js‎

Lines changed: 168 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,174 @@
11
import React from 'react';
22
import './Calendar.scss';
33

4-
function Calendar(props) {
5-
return (
6-
<table className="Calendar">
7-
<thead className="Calendar-head">
8-
<tr>
9-
<th className="prev">&lt; </th>
10-
<th colSpan="5" className="">{console.log(props)}</th>
11-
<th className="next">&gt; </th>
12-
</tr>
13-
<tr>
14-
<th>日</th>
15-
<th>一</th>
16-
<th>二</th>
17-
<th>三</th>
18-
<th>四</th>
19-
<th>五</th>
20-
<th>六</th>
21-
</tr>
22-
</thead>
23-
<tbody className="Calendar-body">
24-
<tr>
25-
<td>1</td>
26-
<td>1</td>
27-
<td>1</td>
28-
<td>11</td>
29-
<td>11</td>
30-
<td>11</td>
31-
<td>11</td>
32-
</tr>
33-
<tr>
34-
<td>1</td>
35-
<td>1</td>
36-
<td>1</td>
37-
<td>11</td>
38-
<td>11</td>
39-
<td>11</td>
40-
<td>11</td>
41-
</tr>
42-
<tr>
43-
<td>1</td>
44-
<td>1</td>
45-
<td>1</td>
46-
<td>11</td>
47-
<td>11</td>
48-
<td>11</td>
49-
<td>11</td>
50-
</tr>
51-
<tr>
52-
<td>1</td>
53-
<td>1</td>
54-
<td>1</td>
55-
<td>11</td>
56-
<td>11</td>
57-
<td>11</td>
58-
<td>11</td>
59-
</tr>
60-
<tr>
61-
<td>1</td>
62-
<td>1</td>
63-
<td>1</td>
64-
<td>11</td>
65-
<td>11</td>
66-
<td>11</td>
67-
<td>11</td>
68-
</tr>
69-
<tr>
70-
<td>1</td>
71-
<td>1</td>
72-
<td>1</td>
73-
<td>11</td>
74-
<td>11</td>
75-
<td>11</td>
76-
<td>11</td>
77-
</tr>
78-
</tbody>
79-
<tfoot>
80-
<tr>
81-
<td></td>
82-
<td colSpan="5">today</td>
83-
<td></td>
84-
</tr>
85-
</tfoot>
86-
</table>
87-
)
4+
class Calendar extends React.Component {
5+
constructor(props) {
6+
super(props);
7+
this.dateNow = new Date();
8+
this.state = {
9+
// 今天的年月日周
10+
'tdYear': this.dateNow.getFullYear(),
11+
'tdMonth': this.dateNow.getMonth(), //月份 0 到 11
12+
'tdDate': this.dateNow.getDate(),
13+
'tdDay': this.dateNow.getDay(),
14+
// 选中的年月日周
15+
'selecYear': this.dateNow.getFullYear(),
16+
'selecMonth': this.dateNow.getMonth(),
17+
'selecDate': this.dateNow.getDate(),
18+
'selecDay': this.dateNow.getDay(),
19+
}
20+
}
21+
// 计算某月的天数,计算方法：下月的上一天,也就是本月的最后一天，就是天数
22+
getMonDays(Y, M) {
23+
// 先得到下一个月第一天的date对象
24+
let d = new Date(Y, M + 1, 1);
25+
// d-1毫秒就是这月的最后一天
26+
return (new Date(d - 1)).getDate();
27+
}
28+
// 计算某月一号是星期几
29+
get1day(Y, M) {
30+
let d = new Date(Y, M, 1);
31+
return d.getDay();
32+
}
33+
// 设置新的日期
34+
setDate(Y, M, D) {
35+
D = D !== undefined ? D : this.state.selecDate;
36+
37+
let d = new Date(Y, M, D);
38+
this.setState({
39+
'selecYear': d.getFullYear(),
40+
'selecMonth': d.getMonth(),
41+
'selecDate': d.getDate(),
42+
'selecDay': d.getDay(),
43+
});
44+
45+
let selec = {
46+
'year': d.getFullYear(),
47+
'month': d.getMonth() + 1,
48+
'date': d.getDate(),
49+
'day': d.getDay(),
50+
}
51+
// 回调函数，参数为选中的年月日周组成的对象
52+
this.props.callback(selec);
53+
}
54+
55+
nextMonth() {
56+
this.setDate(this.state.selecYear, this.state.selecMonth + 1);
57+
}
58+
59+
nextYear() {
60+
this.setDate(this.state.selecYear + 1, this.state.selecMonth);
61+
}
62+
63+
prevMonth() {
64+
this.setDate(this.state.selecYear, this.state.selecMonth - 1);
65+
}
66+
prevYear() {
67+
this.setDate(this.state.selecYear - 1, this.state.selecMonth);
68+
}
69+
// 判断当前日历页，是不是当前月
70+
isThisMon() {
71+
if (this.state.tdYear === this.state.selecYear
72+
&& this.state.tdMonth === this.state.selecMonth
73+
) {
74+
return true
75+
} else {
76+
return false;
77+
}
78+
}
79+
80+
render() {
81+
const LEN = 42;
82+
const DAYARR = ['日', '一', '二', '三', '四', '五', '六'];
83+
// 这个月的天数
84+
let thisMonDays = this.getMonDays(this.state.selecYear, this.state.selecMonth);
85+
// 上个月的天数
86+
let prevMonDays = this.getMonDays(this.state.selecYear, this.state.selecMonth - 1);
87+
88+
// td 数组，长度42，存放当前页所有的日期，包含当前月，上个月，下个月
89+
let tdArr = [];
90+
91+
// 当前月
92+
let thisMonArr = [...Array(thisMonDays + 1).keys()].slice(1);
93+
94+
thisMonArr = thisMonArr.map((item) => {
95+
return (<td
96+
className={item === this.state.tdDate && this.isThisMon() ? 'cur today ' : 'cur'}
97+
key={item}
98+
onClick={() => this.setDate(this.state.selecYear, this.state.selecMonth, item)}
99+
>{item}
100+
</td>)
101+
})
102+
103+
// 上个月
104+
// 根据每月1号是周几，填充数组开头部分
105+
for (let i = 0; i < this.get1day(this.state.selecYear, this.state.selecMonth); i++) {
106+
tdArr.unshift(<td
107+
onClick={() => this.setDate(this.state.selecYear, this.state.selecMonth - 1, prevMonDays - i)}
108+
key={prevMonDays - i}
109+
>{prevMonDays - i}
110+
</td>);
111+
}
112+
113+
tdArr = tdArr.concat(thisMonArr);
114+
115+
// 下个月
116+
// 剩余长度
117+
let l = LEN - tdArr.length;
118+
for (let i = 0; i < l; i++) {
119+
tdArr.push(<td
120+
key={i + 1}
121+
onClick={() => this.setDate(this.state.selecYear, this.state.selecMonth + 1, i + 1)}
122+
>{i + 1}
123+
</td>);
124+
}
125+
// 日历的每一行，值初始化为下标
126+
let trArr = [...Array(7).keys()]
127+
128+
return (
129+
<table className="Calendar">
130+
<thead className="Calendar-head">
131+
<tr>
132+
133+
<th className="prevY" onClick={() => this.prevYear()}>&lt;&lt;</th>
134+
<th className="prevM" onClick={() => this.prevMonth()}>&lt; </th>
135+
<th colSpan="3" className="">
136+
{
137+
`${this.state.selecYear} 年 ${this.state.selecMonth + 1} 月`
138+
}
139+
</th>
140+
<th className="nextM" onClick={() => this.nextMonth()}>&gt; </th>
141+
<th className="nextY" onClick={() => this.nextYear()}>&gt;&gt;</th>
142+
</tr>
143+
<tr>
144+
{
145+
DAYARR.map((item) => <th key={item}>{item}</th>)
146+
}
147+
</tr>
148+
</thead>
149+
<tbody className="Calendar-body">
150+
{
151+
trArr.map((item, index) => {
152+
return (
153+
<tr key={item}>
154+
{tdArr.slice(index * 7, index * 7 + 7)}
155+
</tr>
156+
)
157+
})
158+
}
159+
</tbody>
160+
<tfoot>
161+
<tr>
162+
<td
163+
colSpan="7"
164+
onClick={() => this.setDate(this.state.tdYear, this.state.tdMonth, this.state.tdDate)}
165+
>{`今天 ${this.state.tdYear}-${this.state.tdMonth + 1}-${this.state.tdDate} 周${DAYARR[this.state.tdDay]}`}</td>
166+
</tr>
167+
</tfoot>
168+
</table>
169+
)
170+
}
171+
88172
}
89173

90174
export default Calendar;

‎React/calendar/src/components/Calendar.scss‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,53 @@
1616
font-family: serif;
1717
}
1818

19+
th.prevY,
20+
th.prevM,
21+
22+
th.nextY,
23+
th.nextM {
24+
cursor: pointer;
25+
26+
&:hover {
27+
background-color: #b8cde4;
28+
}
29+
30+
&:active {
31+
background-color: #3178c9;
32+
}
33+
34+
}
35+
36+
37+
38+
td.cur {
39+
color: #000;
40+
}
41+
42+
td.today {
43+
background-color: #b8cde4;
44+
color: #3178c9;
45+
font-weight: bold;
46+
}
47+
1948
td {
49+
color: #c2c2c2;
2050
cursor: pointer;
2151
font-family: Calibri, Arial;
2252

2353
&:hover {
2454
background-color: #b8cde4;
2555
}
56+
2657
&:active {
2758
background-color: #3178c9;
59+
color: #fff;
2860
}
2961
}
3062

31-
td.today {
32-
background-color: #3178c9;
63+
tfoot {
64+
td {
65+
color: #3178c9;
66+
}
3367
}
3468
}

‎React/calendar/src/index.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,17 @@ body {
66
height: 100%;
77
display: flex;
88
justify-content: center;
9+
align-items: center;
910
background-color: #37474F;
1011
}
1112
.App {
12-
width: 900px;
13-
height: 500px;
13+
/* width: 500px;
14+
height: 500px; */
15+
}
16+
17+
.App h3 {
18+
color: #fff;
19+
font-size: 30px;
20+
padding: 10px 0;
21+
font-family: 'Courier New', Courier, monospace;
1422
}

0 commit comments

Comments
 (0)