-
下载
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=['2018/4/1','2018/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
-
修改后的效果展示
vue使用vue-calendar-component日历组件(可直接使用)
于 2022-06-15 14:28:21 首次发布