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>