1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>日历</title>
7 <style>
8 * {
9 padding: 0;
10 margin: 0;
11 }
12
13 ul {
14 list-style-type: none;
15 }
16
17 #calendar {
18 width: 450px;
19 height: 300px;
20 margin: 100px auto;
21 border-radius: 2px;
22 box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
23 0 1px 3px 0 rgba(0, 0, 0, 0.12);
24 }
25
26 .title {
27 font-size: 20px;
28 letter-spacing: 3px;
29 display: flex;
30 justify-content: space-between;
31 background-color: #ed8079;
32 color: #ffffff;
33 }
34
35 .title .arrow {
36 padding: 20px;
37 cursor: pointer;
38 }
39
40 .year-month {
41 display: flex;
42 flex-direction: column;
43 align-items: center;
44 justify-content: space-around;
45 }
46
47 .weekdays {
48 margin: 0;
49 padding: 10px 0;
50 display: flex;
51 flex-wrap: wrap;
52 justify-content: space-around;
53 }
54
55 .weekdays li {
56 display: inline-block;
57 width: 13.6%;
58 text-align: center;
59 }
60
61 .days {
62 padding: 0;
63 background: #ffffff;
64 margin: 0;
65 display: flex;
66 flex-wrap: wrap;
67 justify-content: space-around;
68 }
69
70 .days li {
71 display: inline-block;
72 width: 14.2%;
73 text-align: center;
74 padding-bottom: 8px;
75 padding-top: 8px;
76 }
77
78 .days li .active {
79 padding: 4px 10px;
80 border-radius: 50%;
81 background: #ed8079;
82 color: #fff;
83 }
84
85 .days li .other {
86 padding: 5px;
87 color: gainsboro;
88 }
89
90 .days li:hover {
91 background: #e1e1e1;
92 }
93 </style>
94 </head>
95
96 <body>
97 <div id="calendar">
98 <!-- 标题 -->
99 <div class="title">
100 <div class="arrow"
101 @click="changeMonth('pre')"
102 > ❮ </div>
103 <div class="year-month">
104 <span>{{currentYear}}年{{currentMonth}}月</span>
105 </div>
106
107 <div class="arrow"
108 @click="changeMonth('next')"
109 > ❯ </div>
110 </div>
111 <!-- 星期行 -->
112 <ul class="weekdays">
113 <li
114 v-for='(val,key) in weeks'
115 >
116 <span :style='chooseStyle(key)'>
117 {{val}}
118 </span>
119
120 </li>
121
122 </ul>
123 <!-- 日期 -->
124 <ul class="days">
125 <li
126 v-for='(val,key) in days'
127 >
128 <span
129 :class='chooseClass(val.day)'
130 >
131 {{val.day.getDate()}}</span>
132 </li>
133 </ul>
134 </div>
135 <script src="../vue.js"></script>
136 <script>
137 new Vue({
138 el: "#calendar",
139 data: {
140 currentDay: 1,
141 currentMonth: 1,
142 currentYear: 1970,
143 currentWeek: 1,
144 weeks: ["一", "二", "三", "四", "五", "六", "日"],
145 days: []
146 },
147 created() {
148 this.init();
149 },
150 methods: {
151 init(data) {
152 let day;
153
154 if (data) {
155 day = new Date(data);
156 } else {
157 let now = new Date();
158 day = new Date(this.formDate(now.getFullYear(), now.getMonth() + 1, 1));
159 }
160
161 this.currentDay = day.getDate();
162 this.currentYear = day.getFullYear();
163 this.currentMonth = day.getMonth() + 1;
164
165 this.currentWeek = day.getDay();
166
167 if (!this.currentWeek) {
168 this.currentWeek = 7;
169 }
170
171 this.days.length = 0;
172 let str = this.formDate(
173 this.currentYear,
174 this.currentMonth,
175 this.currentDay
176 );
177
178 for (let i = 2 - this.currentWeek ; i < 37 - this.currentWeek; i++) {
179 let d = new Date(str);
180 d.setDate(i);
181 this.days.push({
182 day: d
183 });
184 }
185
186 // //获取上月末至本月第一天的日期
187 // for (let i = this.currentWeek - 1; i >= 0; i--) {
188 // let d = new Date(str);
189 // d.setDate(d.getDate() - i);
190 // this.days.push({
191 // day: d
192 // });
193 // }
194
195 // //获取剩余的日期
196 // for (let i = 1; i <= 35 - this.currentWeek; i++) {
197 // let d = new Date(str);
198 // d.setDate(d.getDate() + i);
199 // this.days.push({
200 // day: d
201 // });
202 // }
203 },
204
205 //其他月加class名'other'，今天加class名'active'
206 chooseClass(day) {
207 if (day.getMonth() + 1 != this.currentMonth) return "other";
208
209 let a = new Date() - day;
210 if (a > 0 && a < 86400000) return "active";
211 },
212 //改变周六日显示颜色
213 chooseStyle(key) {
214 if (key === 5 || key === 6) return "color:#f1aaab";
215 },
216 //切换月份
217 changeMonth(a) {
218 let d = new Date(this.formDate(this.currentYear, this.currentMonth, 1));
219
220 // setDate(0); 上月最后一天
221 // setDate(-1); 上月倒数第二天
222 // setDate(n) 参数n为 上月最后一天的前后n天
223 a === "pre" ? d.setDate(0) : d.setDate(35);
224
225 this.init(this.formDate(d.getFullYear(), d.getMonth() + 1, 1));
226 },
227 //返回字符串个格式的日期
228 formDate(year, month, day) {
229 return year + "-" + month + "-" + day;
230 }
231 }
232 });
233 </script>
234 </body>
238 </html>
