下载
npm i vue-calendar-component
vue文件引入
import Calendar from 'vue-calendar-component';components: {Calendar}
使用
<div class="con"><Calendar:sundayStart="true"//默认是周一开始 当是true的时候 是周日开始:choseDay="handleclickDay":changeMonth="handlechangeMonth":isToday="handleisToday":agoDayHide="String(today)"// 因为是Number格式 要转换成String 不然会报错></Calendar>// :markDate=arr // arr=['/4/1','/4/3'] 标记4月1日和4月3日 简单标记// :markDateMore=arr // 多种不同的标记// 第一个标记和第二个标记不能同时使用// :agoDayHide='1514937600' //某个日期以前的不允许点击 时间戳10位// :futureDayHide='1525104000' //某个日期以后的不允许点击 时间戳10位// :sundayStart="true" //默认是周一开始 当是true的时候 是周日开始</div>data(){return {// 今天之前的日期不可点击today:parseInt(new Date(new Date().getTime() - 24*60*60*1000)/1000),}}// 今天handleclickDay(data){},// 左右点击切换月份handlechangeMonth(data){},// 跳到本月handleisToday(data){}
css
/deep/ .con {position:absolute;top: 40px;right: 0;z-index:999;.wh_top_changge li{color:#000;}.wh_jiantou1{border-top: 2px solid #000;border-left: 2px solid #000;}.wh_jiantou2 {border-top: 2px solid #000;border-right: 2px solid #000;}.wh_content_all{background:#fff !important;border: 1px solid rgba(238, 238, 238, 1);}.wh_content_item{color:#000;}.wh_item_date:hover{background: #eee;color:#fff;}.wh_content_item .wh_isToday{background: #186CFF ;color:#fff;}.wh_content_item .wh_chose_day{background: #eee;color:#fff;}}
相关API
修改后的效果展示
