vue使用vue-calendar-component日历组件（可直接使用）

车银优

已于 2022-06-17 14:33:37 修改

阅读量2.1k

点赞数 3

文章标签： vue.js javascript css

于 2022-06-15 14:28:21 首次发布

本文链接：https://blog.csdn.net/qq_43557395/article/details/125296338

版权

下载
```
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;
    }
}