微信、飞书小程序日历组件,支持做排期标记
index.ttml 页面引用
<!-- 日历 -->
<my-component
daDts="{{date1}}"
monThs="{{month1}}"
dayAing="{{daybg}}"
dayBing="{{daybg1}}"
dayCing="{{daybg2}}"
dayDing="{{daybg3}}"
dayBor="{{daybor}}"
leisureShow="{{leisureShow}}"
bindmyevent="onMyEvent"/>
index.json 页面引用
"usingComponents": {
"my-component" : "/components/calendar/calendar"
},
"component": true
index.js 回调事件
Page({
data: {
date1:'2020',//当前年
month1:'9',//当前月
daybg:['2','3'], //日历标记 只能传1-31 数字 蓝色
daybg1:['5','6'], //日历标记 2 绿色
daybg2:['8','9'], //日历标记 3 黄色
daybg3:['12','13'], //日历标记 3 灰色
daybor:'', //日历点击加边框
leisureShow:'96'//日历收缩
},
//点击日历触发回调事件
onMyEvent(e) {
// 自定义组件触发事件时提供的detail对象
if(e.detail){
this.setData({
daybor:e.detail.bor
})
}
},
})
组件页面 calendar.ttml
<view class="cles">
<!-- 头部 -->
<view class="cle-head">
<picker mode="date" value="{{date1}}" start="2015-09-01" end="2030-09-01"
bindchange="bindDateChange" fields="year">
<view class="picker">
{{date1}} <image src="../../pages/assets/qualityReview/xiala.png" style="width:36rpx;height:36rpx;"/>
</view>
</picker>
<view class="head-rights">
<image src="../../pages/assets/home/zuo.png" bindtap="handleMont" data-in="left" style="width:36rpx;height:36rpx; cursor: pointer;"/>
<view class="right-tle">{{ month1 }}</view>
<image src="../../pages/assets/home/you.png" bindtap="handleMont" data-in="right" style="width:36rpx;height:36rpx; cursor: pointer;"/>
</view>
</view>
<!-- 周几 -->
<view class="cle-week">
<view>日</view>
<view>一</view>
<view>二</view>
<view>三</view>
<view>四</view>
<view>五</view>
<view>六</view>
</view>
<!-- 日期排版 -->
<view class="{{ cleShow === '576' ? 'cra-main' : 'cra-main1'}}" >
<!-- 上个月 -->
<view class="cra-list" tt:for="{{dayUp}}">
<view class="cra-lists">
<text class="list-rq">{{item}}</text>
<text class="list-bj"></text>
</view>
</view>
<!-- 本月 -->
<view class="cra-list cra-list1" tt:for="{{dayTime}}">
<view class="cra-lists">
<view class="{{ item == daybor ? 'list-rq list-rq1 btn-bor' : 'list-rq list-rq1 btn-bor1' }}" bindtap="onTap" data-bor="{{item}}">
<!-- <view class="list-bg" tt:if="{{ item === daybg[0] || daybg[1] || daybg[2] || daybg[3]}}" >{{item}}</view> -->
<view
data-bor="{{item}}"
class="list-bg list-bg1"
tt:if="{{ item == daybg[0] || item == daybg[1] || item == daybg[2] || item == daybg[3] || item == daybg[4] || item == daybg[5] || item == daybg[6]|| item == daybg[7]|| item == daybg[8]|| item == daybg[9] || item == daybg[10]|| item == daybg[11]|| item == daybg[12]|| item == daybg[13]|| item == daybg[14]|| item == daybg[15]|| item == daybg[16]|| item == daybg[17]|| item == daybg[18]|| item == daybg[19]|| item == daybg[20]|| item == daybg[21]|| item == daybg[22]|| item == daybg[23]|| item == daybg[24]|| item == daybg[25]|| item == daybg[26]|| item == daybg[27]|| item == daybg[28]|| item == daybg[29]|| item == daybg[30]|| item == daybg[31]}}"
>
{{item}}
</view>
<view
data-bor="{{item}}"
class="list-bg list-bg2"
tt:elif="{{ item == daybg1[0] || item == daybg1[1] || item == daybg1[2] || item == daybg1[3] || item == daybg1[4] || item == daybg1[5] || item == daybg1[6]|| item == daybg1[7]|| item == daybg1[8]|| item == daybg1[9] || item == daybg1[10]|| item == daybg1[11]|| item == daybg1[12]|| item == daybg1[13]|| item == daybg1[14]|| item == daybg1[15]|| item == daybg1[16]|| item == daybg1[17]|| item == daybg1[18]|| item == daybg1[19]|| item == daybg1[20]|| item == daybg1[21]|| item == daybg1[22]|| item == daybg1[23]|| item == daybg1[24]|| item == daybg1[25]|| item == daybg1[26]|| item == daybg1[27]|| item == daybg1[28]|| item == daybg1[29]|| item == daybg1[30]|| item == daybg1[31]}}"
>
{{item}}
</view>
<view
data-bor="{{item}}"
class="list-bg list-bg3"
tt:elif="{{ item == daybg2[0] || item == daybg2[1] || item == daybg2[2] || item == daybg2[3] || item == daybg2[4] || item == daybg2[5] || item == daybg2[6]|| item == daybg2[7]|| item == daybg2[8]|| item == daybg2[9] || item == daybg2[10]|| item == daybg2[11]|| item == daybg2[12]|| item == daybg2[13]|| item == daybg2[14]|| item == daybg2[15]|| item == daybg2[16]|| item == daybg2[17]|| item == daybg2[18]|| item == daybg2[19]|| item == daybg2[20]|| item == daybg2[21]|| item == daybg2[22]|| item == daybg2[23]|| item == daybg2[24]|| item == daybg2[25]|| item == daybg2[26]|| item == daybg2[27]|| item == daybg2[28]|| item == daybg2[29]|| item == daybg2[30]|| item == daybg2[31]}}"
>
{{item}}
</view>
<view
data-bor="{{item}}"
class="list-bg list-bg4"
tt:elif="{{ item == daybg3[0] || item == daybg3[1] || item == daybg3[2] || item == daybg3[3] || item == daybg3[4] || item == daybg3[5] || item == daybg3[6]|| item == daybg3[7]|| item == daybg3[8]|| item == daybg3[9] || item == daybg3[10]|| item == daybg3[11]|| item == daybg3[12]|| item == daybg3[13]|| item == daybg3[14]|| item == daybg3[15]|| item == daybg3[16]|| item == daybg3[17]|| item == daybg3[18]|| item == daybg3[19]|| item == daybg3[20]|| item == daybg3[21]|| item == daybg3[22]|| item == daybg3[23]|| item == daybg3[24]|| item == daybg3[25]|| item == daybg3[26]|| item == daybg3[27]|| item == daybg3[28]|| item == daybg3[29]|| item == daybg3[30]|| item == daybg3[31]}}"
>
{{item}}
</view>
<view data-bor="{{item}}" tt:else>{{item}}</view>
</view>
<!-- <text
class="list-bj"
tt:if="{{ item == daybg[0] || item == daybg[1] || item == daybg[2] || item == daybg[3] || item == daybg[4] || item == daybg[5] || item == daybg[6]|| item == daybg[7]|| item == daybg[8]|| item == daybg[9] || item == daybg[10]|| item == daybg[11]|| item == daybg[12]|| item == daybg[13]|| item == daybg[14]|| item == daybg[15]|| item == daybg[16]|| item == daybg[17]|| item == daybg[18]|| item == daybg[19]|| item == daybg[20]|| item == daybg[21]|| item == daybg[22]|| item == daybg[23]|| item == daybg[24]|| item == daybg[25]|| item == daybg[26]|| item == daybg[27]|| item == daybg[28]|| item == daybg[29]|| item == daybg[30]|| item == daybg[31]}}"
>A1</text> -->
<text class="list-bj" tt:else></text>
</view>
</view>
<!-- 下个月 -->
<view class="cra-list" tt:for="{{dayRear}}">
<view class="cra-lists">
<text class="list-rq">{{item}}</text>
<text class="list-bj"></text>
</view>
</view>
</view>
<!-- 展开 -->
<view class="unfold" tt:if="{{cleShow=== '576'}}">
<image src="../../pages/assets/home/zk.png" bindtap="handleUnfold" data-up="96" style="width:48rpx;height:48rpx; cursor: pointer;"/>
</view>
<view class="pack" tt:else>
<image src="../../pages/assets/home/sq.png" bindtap="handleUnfold" data-up="576" style="width:48rpx;height:48rpx; cursor: pointer;"/>
</view>
</view>
组件 calendar.js
Component({
behaviors: [],
properties: {
daDts:String,//当前年
monThs:String, //当前月
dayAing:Array, //标记的日期
dayBing:Array, //标记的日期
dayCing:Array, //标记的日期
dayDing:Array, //标记的日期
leisureShow:{
type: String,
observer: function(newVal, oldVal, changedPath) {
// 通常 newVal 就是新设置的数据, oldVal 是旧数据
this.setData({
cleShow:newVal,
})
}
},//日历缩放
dayBor:{
type: String,
observer: function(newVal, oldVal, changedPath) {
// 通常 newVal 就是新设置的数据, oldVal 是旧数据
this.setData({
daybor:newVal,
})
}
},
},
// 私有数据,可用于模版渲染
data: {
date1:'',//当前年
month1:'',//当前月
date:new Date(),//当前时间
dayTime:[],//当月天数
weeks:'',//当月1号周几
dayUp:[],//上个补多少天
dayRear:[],//下个月补几天
daybg:[], //日历标记 1 蓝色
daybg1:[], //日历标记 1 绿色
daybg2:[], //日历标记 1 黄色
daybg3:[], //日历标记 1 灰色
daybor:'', //日历点击时的颜色
cleShow: '', //日历展开收起
},
// 生命周期函数,可以为函数,或一个在 methods 段中定义的方法名
attached: function () {
// this.selectComponent('.class-name', function(res) {
// console.log(res)
// })
},
ready: function() {
this.setData({
date1:this.data.daDts,
month1:this.data.monThs,
daybg:this.data.dayAing,
daybg1:this.data.dayBing,
daybg2:this.data.dayCing,
daybg3:this.data.dayDing,
cleShow:this.data.leisureShow,
})
this.handle() //初始化
// console.log(this.data.daybg)
},
// 组件自定义方法
methods: {
onLoad() {
},
onTap(e) {
var myEventDetail = e.target.dataset // detail对象,提供给事件监听函数
// var myEventOption = {} // 触发事件的选项
this.triggerEvent(
'myevent',
myEventDetail,
// myEventOption
)
},
//月份选择
onMyEvent: function(e){
let t = e.target.dataset.in
if (t === 'left'){
if(this.data.month1 == 1) {
let ye= parseInt(this.data.date1)
this.setData({ month1:13 })
this.setData({
date1:parseInt(this.data.date1)-1
})
}
this.setData({
month1:parseInt(this.data.month1)-1
})
this.handle()
}
if (t === 'right'){
if(this.data.month1 == 12) {
this.setData({ month1:0 })
this.setData({
date1:parseInt(this.data.date1)+1
})
}
this.setData({
month1:parseInt(this.data.month1)+1
})
this.handle()
}
},
//日历初始化
handle: function(){
let sme = this.data.date1+'-'+this.data.month1+'-1'
let myDate = new Date(sme);
let year = myDate.getFullYear();//获取年
let month = myDate.getMonth()+ 1;//获取月,默认从0开始,所以要加一
// 当前月份的 1 号 星期几
let s1 = year+'-'+month+'-1' //当前月份的 1 号
let myDate2 = new Date(s1);
let dayOne = myDate2.getDay(); //当前月份的 1 号 星期几
let arr1=[]
for( let i=1;i <= this.severalDays(month,year); i++ ){
arr1.push(i)
}
this.setData({ dayTime:arr1 }) //本月天数
//上一个月有多少天 补加多少天
let daybu = [null,'1','2','3','4','5','6'] //一周
let arr2=[]
let days= this.severalDays(month-1,year)
if(daybu != null){
for( let i=0;i < daybu[dayOne]; i++ ){
arr2.push(days-i)
}
arr2.reverse()
}
this.setData({ dayUp:arr2 }) //上个月天数
//下一个月 补加多少天
let dayts = 42 - daybu[dayOne] - this.severalDays(month,year)
let arr3=[]
for( let i=1;i <= dayts; i++ ){
arr3.push(i)
}
this.setData({ dayRear:arr3 }) // 下个月天数
// console.log(arr3,this.dayRear)
},
//展开
handleUnfold: function(e){
let wdh = e.target.dataset.up
// console.log(wdh)
this.setData({
cleShow:wdh
})
},
severalDays: function(datas,year){
switch (datas) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
dayNum = 31;
break;
case 4:
case 6:
case 9:
case 11:
dayNum = 30;
break;
case 2:
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
dayNum = 29;
} else {
dayNum = 28;
}
break;
}
return dayNum
},
// 当前年
bindDateChange: function (e) {
// console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date1: e.detail.value
})
this.handle()
},
// 当前月
handleMont: function(e) {
let t = e.target.dataset.in
if (t === 'left'){
if(this.data.month1 == 1) {
let ye= parseInt(this.data.date1)
this.setData({ month1:13 })
this.setData({
date1:parseInt(this.data.date1)-1
})
}
this.setData({
month1:parseInt(this.data.month1)-1
})
this.handle()
}
if (t === 'right'){
if(this.data.month1 == 12) {
this.setData({ month1:0 })
this.setData({
date1:parseInt(this.data.date1)+1
})
}
this.setData({
month1:parseInt(this.data.month1)+1
})
this.handle()
}
}
}
})
组件 calendar.josn
{
"component": true
}
组件 calendar.ttss
.cles{
border-radius: 0px 0px 20px 20px;
padding: 0 20px;
background: #FFFFFF;
}
.cle-head{
display: flex;
justify-content: space-between;
align-items: center;
height: 100rpx;
}
.head-rights{
display: flex;
align-items: center;
}
.right-tle{
margin: 0 40rpx;
}
.cle-week{
display: flex;
justify-content: space-around;
height: 24px;
font-size: 14px;
font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
font-weight: 400;
color: #AAB4C6;
line-height: 24px;
margin-bottom: 20px;
}
.cra-main{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
height: 576rpx;
overflow: hidden;
}
.cra-main1{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
height: 96rpx;
overflow: hidden;
}
.cra-list{
width: 90rpx;
}
.cra-lists{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.list-bj{
display: inline-block;
width: 24rpx;
height: 24rpx;
font-size: 22rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #2C68FF;
line-height: 32rpx;
}
.list-bg{
width: 100%;
height: 100%;
color: #FFFFFF;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.list-bg1{
background: #2C68FF;
}
.list-bg2{
background: #46B882;
}
.list-bg3{
background: #FAAD15;
}
.list-bg4{
background: #B8B8B8;
}
.list-rq{
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #B8B8B8;
width: 72rpx;
height: 72rpx;
}
.list-rq1{
font-size: 28rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #333333;
}
.unfold,
.pack {
display: flex;
justify-content: center;
align-items: center;
padding: 0 20rpx 20rpx;
}
.btn-bor{
border: 2rpx solid #ccc;
border-radius: 50%;
}
.btn-bor1{
border: 2rpx solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
}