1

2

3

4

5

6

日历

7

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

94

95

96

97

135

136

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

234

238

标签：flex,vue,日历,days,padding,let,简单,new,day

来源： https://www.cnblogs.com/theblogs/p/10367361.html