vue实现简单日历

  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>
猜你喜欢
