效果图:
组件:ren-calendar.vue
<template>
<view class="calendar-wrapper">
<view class="header" v-if="headerBar">
<view class="pre" @click="changeMonth('pre')">上个月</view>
<view>{
{y+'年'+formatNum(m)+'月'}}</view>
<view class="next" @click="changeMonth('next')">下个月</view>
</view>
<view class="week">
<view class="week-day" v-for="(item, index) in weekDay" :key="index">{
{ item }}</view>
</view>
<view :class="{ hide: !monthOpen }" class="content" :style="{ height: height }">
<view :style="{ top: positionTop + 'rpx' }" class="days">
<view class="item" v-for="(item, index) in dates" :key="index">
<view class="day" @click="selectOne(item, $event)" :class="{
choose: choose == `${item.year}-${item.month}-${item.date}`&&item.isCurM,
nolm: !item.isCurM,
today: isToday(item.year, item.month, item.date),
isWorkDay: isWorkDay(item.year, item.month, item.date)
}">
{
{ Number(item.date) }}
</view>
<view class="markDay" v-if="isMarkDay(item.year, item.month, item.date)&&item.isCurM"></view>
<!-- <view class="today-text" v-if="isToday(item.year, item.month, item.date)">今</view> -->
</view>
</view>
</view>
<image src="https://i.loli.net/2020/07/16/2MmZsucVTlRjSwK.png" mode="scaleToFill" v-if="collapsible"
@click="toggle" class="weektoggle" :class="{ down: monthOpen }"></image>
</view>
</template>
<script>
export default {
name: 'ren-calendar',
props: {
// 星期几为第一天(0为星期日)
weekstart: {
type: Number,
default: 0
},
// 标记的日期
markDays: {
type: Array,
default: () => {
return [];
}
},
//是否展示月份切换按钮
headerBar: {
type: Boolean,
default: true
},
// 是否展开
open: {
type: Boolean,
default: true
},
//是否可收缩
collapsible: {
type: Boolean,
default: true
},
//未来日期是否不可点击
disabledAfter: {
type: Boolean,
default: false
}
},
data() {
return {
weektext: ['日', '一', '二', '三', '四', '五', '六'],
y: new Date().getFullYear(), /