基础用法
<lm-calendar></lm-calendar>
Attributes
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| initDate |
初始化日期值 |
String / Date / Number |
-- |
new Date() |
| width |
日历宽度 |
String / Number |
-- |
100% |
| height |
日历高度 |
String/ Number |
-- |
100% |
| calendarClass |
日历自定义样式类名 |
String |
-- |
-- |
| titleClass |
年月标题自定义样式类名 |
String |
-- |
-- |
| titleH |
年月标题高度 |
String / Number |
-- |
35px |
| titleBk |
年月标题颜色 |
String |
-- |
#ffffff |
| bodyBk |
日历体背景 |
String |
-- |
#ffffff |
| bodyClass |
日历体自定义样式类名 |
String |
-- |
-- |
| dateDefaultClass |
自定义日期默认类名 |
String |
-- |
-- |
| dateActivDateClass |
自定义日期选中类名 |
String |
-- |
-- |
| dateDisabledDateClass |
自定义日期不可用类名 |
String |
-- |
-- |
| titleDateConnector |
标题日期连接符 |
String |
-- |
-- |
| insertData |
插入的数据 |
Array |
-- |
[] |
| weeks |
日历头部周数据 |
Array |
-- |
['日','一','二','三','四','五','六'] |
| dateProp |
自定义表示时间的字段 |
String |
-- |
-- |
| calenCellClass |
日历单元格自定义样式 |
String |
-- |
-- |
| firstRowCellClass |
日历第一行单元格自定义样式 |
String |
-- |
-- |
| cellBorder |
是否有边框 |
Boolean |
-- |
-- |
| cellTitleHeight |
日历标题高度 |
String / Number |
-- |
40px |
| cellTitleColor |
日历标题颜色 |
String |
-- |
#333333 |
| options |
配置 |
Object |
-- |
{ range:[] } |
Slots
| name |
说明 |
| calendarTitle |
日历顶部标题内容 |
| calendarHead |
日历头内容 |
| changeMonthBtn |
月份切换按钮 |
| weeks |
日历头部周数据 |
| day |
日期 |
| haveDataTag |
有数据标志 |
Events
| 事件名 |
说明 |
回调参数 |
| getChooseDate |
选择日期 |
(date:String) |
| monthChange |
月份改变 |
(date:String) |
使用示例
<template>
<div class="canlendarExample">
<lm-calendar ref="canlendar" @getChooseDate="checkDate=>date=checkDate" :insert-data="insertData" :options="{range:['',new Date()]}" date-prop="hasDataDate" @monthChange="v=>date=v">
<template #weeks>
<div class="weeksBox rowCenter">
<div class="weekItem rowCenter font16" v-for="(week,index) in weeks" :key="week">
<span class="week">{{week}}</span>
<span class="rightLine verticalLine"></span>
<span class="leftLine verticalLine" v-if="index===0"></span>
</div>
</div>
</template>
<template #calendarHead="{currentYear,currentMonth,changeMonth}">
<div class="canlendar-top-box">
<div class="canlendar-top-inner-box rowCenter">
<div class="rowCenter year-back-box">
<span class="changeMonth rowCenter el-icon-caret-left" @click="changeMonth(0)"></span>
<strong style="margin:0 20px;">{{date}}</strong>
<span class="changeMonth rowCenter el-icon-caret-right" @click="changeMonth(1)"></span>
</div>
<span class="violet back-today font14 rowCenter" @click="changeMonth(2)">返回今天</span>
</div>
</div>
</template>
<template #haveDataTag="{day}">
<div class="haveDataTag rowCenter font12 violet"></div>
</template>
<template #day="{day,index}">
<div class="dayBox columnStart" :class="[day.dateClass,index%7===0 ? 'dayBorderLeft' : '',index<7 ? 'dayBorderTop' : '']">
<span class="font30 daySpan">{{day.day}}</span>
<div class="otherDataBox font20 rowBtween">
<i class="iconfont icon-weather-qing" :style="{color:'#333333'}"></i>
<i class="iconfont icon-weather-duoyun" :style="{color:'#333333'}"></i>
<i class="iconfont icon-weather-xiaoyu" :style="{color:'#333333'}"></i>
<i class="iconfont icon-weather-yin" :style="{color:'#333333'}"></i>
</div>
</div>
</template>
</lm-calendar>
</div>
</template>
<script>
import {formatDate} from "lm-ui-element/lib/utils/global-methods";
export default {
name: "LmCanlendarComponent",
components: {},
props: {},
data() {
return {
insertData: [],//插入的数据
date:'',//日期
changeMonth:null,//月份改变函数
weeks:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
}
},
computed: {},
created() {
this.date=formatDate(new Date(),'-')
let roundNumArr=[]
for(let i=0;i<10;i++){
let roundNum=Math.floor(Math.random()*(28-1+1)+1)
roundNum<0 && (roundNum='0'+roundNum)
roundNumArr.push(roundNum)
}
let year=new Date().getFullYear()
let month=new Date().getMonth()+1
month<0 && (month='0'+month)
for(let i=0;i<roundNumArr.length;i++){
this.insertData.push({
hasDataDate:`${year}-${month}-${roundNumArr[i]}`
})
}
},
mounted() {
},
methods: {
//月份改变
getMonthChange({changeMonth,currentYear,currentMonth,type}){
console.log(currentYear,currentMonth)
let currentMonthArr=[currentMonth-1,currentMonth+1]
this.$sunRainMethods.getMonthChange(changeMonth,type,{currentYear,currentMonth:currentMonthArr[type],that:this})
},
},
watch: {}
}
</script>
<style lang="scss" scoped type="text/scss">
@import "lm-ui-element/lm-ui-element-style/src/common/mix";
.canlendarExample{
.customCalendarHeadBox{
background:#ffffff;
padding:20px;
border-bottom:solid 1px #dddddd;
.monthBox{
.changeMonthBtnBox{
width:50px;
font-weight: bold;
margin-right:20px;
cursor:pointer;
}
.monthTextBox{
strong{
cursor:default;
letter-spacing: 2px;
}
}
}
}
.canlendar-top-box{
margin-bottom:20px;
.canlendar-top-inner-box{
width:100%;
position: relative;
.year-back-box{
.changeMonth{
width: 38px;
height: 38px;
background: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 2px;
cursor:pointer;
}
}
.back-today{
margin-right:10px;
cursor:pointer;
@include positionTopRightSizeIndex($width:auto,$height:auto,$translateX:-50%,$translateY:-50%,$top:50%);
}
}
}
.dayBox{
height:40px;
border-right:solid 1px #cccccc;
border-bottom:solid 1px #cccccc;
padding:10px 0 10px 15px;
align-items: flex-start;
position: relative;
}
.dateDefaultCss{
.daySpan{
color:#333333;
}
}
.dateActiveCss{
background:rgba(84, 94, 188, 0.2);
.daySpan{
color:#333333;
}
}
.disableDateCss{
}
.dayBorderLeft{
border-left:solid 1px #cccccc;
}
.dayBorderTop{
border-Top:solid 1px #E7E9FC;
}
.haveDataTag{
@include positionLeftBottomSizeIndex($width:6px,$height:6px,$radius:50%,$bottom:10px,$left:50%,$translateX:-50%);
background:#37C37C;
}
.otherDataBox{
flex-wrap:wrap;
@include positionTopRightSizeIndex($width:50%,$height:72px,$top:5px,$right:1px);
.iconfont{
width:50%;
}
}
.weeksBox{
width:100%;
.weekItem{
height:48px;
width:14%;
border-top:solid 1px #cccccc;
border-bottom:solid 1px #cccccc;
background:#ebeef5;
position: relative;
.week{
}
.verticalLine{
background:#cccccc;
@include positionTopRightSizeIndex($width:1px,$height:48px);
}
.leftLine{
left:0;
}
}
}
}
</style>
<style>
.canlendarExample .calen-cell{
margin-bottom:0 !important;
}
.canlendarExample .body-title{
border-bottom:solid 1px #cccccc;
border-top:solid 1px #cccccc;
background:#eeeeee;
}
</style>
