Vue.js实现日历功能 Vue.js实现日历功能

本文实例为大家分享了Vue.js实现日历功能的具体代码，供大家参考，具体内容如下

文章图片

Github
功能需求
使用 Vue.js 实现指定年月的日历表，配合后台接口数据，添加对应日期的空气质量描述等信息。后台传递当月空气质量指数的数据，前端生成日历表后将空气质量指数添加到对应日期上。
空气质量数据示例：
data.json

{"code": 200,"msg": "","data": [{"time": "2020-08-01","kqzl": "优"},{"time": "2020-08-02","kqzl": "良"},{"time": "2020-08-03","kqzl": "良"}]}

实现方法

.calendar-container {text-align: center; .calendar-week {margin-bottom: 4px; padding: 0 4px; color: #fff; .cw-inner {overflow: hidden; background: #a0a0a0; .cw-item {float: left; padding: 8px 0; }}}.calendar-day {.cd-list {overflow: hidden; .cl-item {float: left; min-height: 30px; box-sizing: border-box; padding: 4px; .ci-inner {background: #f5f5f5; padding: 8px 0; span {display: inline-block; &.aqi {color: #fff; background: #a7cf8c; padding: 0 4px; border-radius: 4px; }&.优 {background: #a7cf8c; }&.良 {background: #f7da64; }&.轻度 {background: #f29e39; }&.中度 {background: #da555d; }&.重度 {background: #b9377a; }&.严重 {background: #881326; }}}}}}}

【Vue.js实现日历功能】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。