原始效果:
修改后的效果:
接下来,我们使用它~
1.安装
npm i vue-calendar-component --save
cnpm i vue-calendar-component --save //国内镜像
2.在使用到日历插件的文件中引入
import Calendar from 'vue-calendar-component';
3.原始效果代码
<template>
<div class="con">
<Calendar
v-on:choseDay="clickDay"
v-on:changeMonth="changeDate"
v-on:isToday="clickToday"
></Calendar>
</div>
</template>
<script>
/* eslint-disable */
import Calendar from 'vue-calendar-component';
export default {
components: {
Calendar
},
data() {
return {};
},
created() {},
methods: {
clickDay(data) {
console.log(data); //选中某天
},
changeDate(data) {
console.log(data); //左右点击切换月份
},
clickToday(data) {
console.log(data); // 跳到了本月
}
},
};
</script>
4.修改样式后的代码
<template>
<div class="con">
<div class="now-data-myself">
<div class="now-data-myself-time">{{ date }}</div>
<div class="now-data-myself-week">{{ week }}</div>
</div>
<Calendar
v-on:choseDay="clickDay"
v-on:changeMonth="changeDate"
v-on:isToday="clickToday"
></Calendar>
</div>
</template>
<script>
/* eslint-disable */
import Calendar from 'vue-calendar-component';
export default {
components: {
Calendar
},
data() {
return {
date: "",
week: ""
};
},
created() {
var now = new Date();
this.date = now.getDate();//得到日期
var day = now.getDay();//得到周几
var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
this.week = arr_week[day];
},
methods: {
clickDay(data) {
console.log(data); //选中某天
},
changeDate(data) {
console.log(data); //左右点击切换月份
},
clickToday(data) {
console.log(data); // 跳到了本月
}
},
};
</script>
<style>
.now-data-myself {
width: 40%;
position: absolute;
border-right: 1px solid rgba(227, 227, 227, 0.6);
}
.con {
position: relative;
max-width: 280px;
margin: auto;
}
.con .wh_content_all {
background: transparent !important;
}
.wh_top_changge li {
color: #F56C6C !important;
font-size: 15px !important;
}
.wh_content_item, .wh_content_item_tag {
color: #303133 !important;
}
.wh_content_item .wh_isToday {
background: #00d985 !important;
color: #fff !important;
}
.wh_content_item .wh_chose_day {
background: #409EFF !important;
color: #ffff !important;
}
.wh_item_date:hover {
background: rgb(217, 236, 255) !important;
border-radius: 100px !important;
color: rgb(102, 177, 255) !important;
}
.wh_jiantou1[data-v-2ebcbc83] {
border-top: 2px solid #909399;
border-left: 2px solid #909399;
width: 7px;
height: 7px;
}
.wh_jiantou2[data-v-2ebcbc83] {
border-top: 2px solid #909399;
border-right: 2px solid #909399;
width: 7px;
height: 7px;
}
.wh_top_tag[data-v-2ebcbc83] {
color: #409EFF;
border-top: 1px solid rgba(227, 227, 227, 0.6);
border-bottom: 1px solid rgba(227, 227, 227, 0.6);
}
.wh_container[data-v-2ebcbc83] {
max-width: 280px;
}
.wh_top_changge[data-v-2ebcbc83] {
display: flex;
width: 50%;
margin-left: 43%;
}
.now-data-myself-time {
color: #F56C6C;
font-size: 28px;
height: 30px;
font-family: "Helvetica Neue";
}
.now-data-myself-week {
font-size: 10px;
color: #909399;
}
.wh_top_changge .wh_content_li[data-v-2ebcbc83] {
font-family: Helvetica;
}
</style>
API
属性 | 说明 | 默认 | 是否必传 |
---|---|---|---|
choseDay | 选中某天调用的方法,返回选中的日期 YY-MM-DD | 无 | 否 |
changeMonth | 切换月份调用的方法,返回切换到某月的日期 YY-MM-DD | 无 | 否 |
isToday | 切换月份的时候,如果切到当前月份,调用这个方法,返回当前月今天 | 无 | 否 |
markDate | 如果需要某月的几天被标注,传当月的日期数组。如["2018/2/2","2018/2/6"]被会标注(相同的标记) | 空数组 | 否 |
markDateMore | 需要不同的标记如上Usage 最后一行示例代码 | 空数组 | 否 |
agoDayHide | 某个日期以前的不允许点击 时间戳长度是 10 位 | 0 | 否 |
futureDayHide | 某个日期以后的不允许点击 时间戳长度是 10 位 | 很大 | 否 |
sundayStart | 默认是周一开始 当是true的时候 是周日开始 | false | 否 |
textTop | 日历头部的文字,默认是 [ '日','一', '二', '三', '四', '五', '六'] ,可以根据自己的需求进行不同的修改。 | --- | 否 |
✅ 在 Calendar标签上添加 ref 属性, 暴露出三个方法可以 直接切换月份 例如: <Calendar ref="Calendar"></Calendar> ✅ this.$refs.Calendar.PreMonth(); //调用方法实现转到上个月 ✅ this.$refs.Calendar.NextMonth(); //调用方法实现转到下个月 ✅ this.$refs.Calendar.ChoseMonth('2018-12-12'); //调用方法实现转到某个月 ✅ this.$refs.Calendar.ChoseMonth('2018-12-12',false); //跳转到18年12月12日 但是不选中当天 //第二个参数 false表示不选中日期 。