vue 日历组件

最新推荐文章于 2025-07-17 13:50:03 发布

原创最新推荐文章于 2025-07-17 13:50:03 发布 · 525 阅读

3 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

63 篇文章

订阅专栏

本文档介绍了如何在Vue项目中创建并使用一个日历组件，包括安装、基本使用方法、自定义CSS样式以及展示的最终效果截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

npm i vue-calendar-component --save
cnpm i vue-calendar-component --save  //国内镜像

使用

//vue文件中引入
import Calendar from 'vue-calendar-component';

 components: {
    Calendar
  }

    <Calendar
      v-on:choseDay="clickDay"
      v-on:changeMonth="changeDate"
      // v-on:isToday="clickToday"
      // :markDate=arr // arr=['2018/4/1','2018/4/3'] 标记4月1日和4月3日 简单标记
      //:markDateMore=arr // 多种不同的标记
      // 第一个标记和第二个标记不能同时使用
      // :agoDayHide='1514937600' //某个日期以前的不允许点击  时间戳10位
      // :futureDayHide='1525104000' //某个日期以后的不允许点击  时间戳10位
      // :sundayStart="true" //默认是周一开始 当是true的时候 是周日开始
    ></Calendar>


    clickDay(data) {
      console.log(data); //选中某天
    },
    changeDate(data) {
      console.log(data); //左右点击切换月份
    },
    clickToday(data) {
      console.log(data); // 跳到了本月
    }

css样式

.wh_container{
    height:100%;
    max-height:100%;
}
.wh_container >>> .wh_content_all{
    background-color:#ffffff!important;
    border:2px solid #333;
    height:100%;
}
.wh_container >>> .wh_item_date{
    color:#211d48;
  }
.wh_container >>> .wh_item_date:hover{
    color:#ffffff;
    background: #409EFF;
    /* border-radius: 50%; */
}
.wh_container >>>  .wh_other_dayhide{
    color:#cccccc;
}

.wh_container >>> .wh_content_item{
    margin-bottom: 2px;
    margin-top: 2px;
}

.wh_container >>> .wh_content{
    color:black;
}

.wh_container >>> .wh_top_tag{
    color:white;
    background:#162947;
    border-radius: 50%;
    width:25px;
    height:25px;
}
/* .wh_container >>> .wh_top_tag:nth-of-type(5),.wh_container >>> .wh_top_tag:nth-of-type(6){
background:orange;
} */
.wh_container >>> .wh_content_li{
    color:#162947;
    font-weight: bold;
}
.wh_container >>> .wh_jiantou1{
    border-top: 2px solid #162947;
    border-left: 2px solid #162947;
}
.wh_container >>> .wh_jiantou2{
    border-top: 2px solid #162947;
    border-right: 2px solid #162947;
}


.wh_container >>> .wh_content_item>.wh_isMark{
    background-color: #409EFF;
    color:white;
}
.wh_container >>> .wh_content_item .wh_isToday{
    background-color: #409EFF;
    color: #ffffff;
    border-radius: 0%;
}
.wh_container >>> .wh_content_item .wh_chose_day{
    background-color: #409EFF;
    color: #ffffff;
    border-radius: 0%;
}