<template>
<view class="uni-calendar">
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="clean">view>
<view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
<view class="uni-calendar__header-btn-box" @click="close">
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{cancelText}}text>
view>
<view class="uni-calendar__header-btn-box" @click="confirm">
<text class="uni-calendar__header-text uni-calendar--fixed-width">{{okText}}text>
view>
view>
<view class="uni-calendar__header">
<view class="uni-calendar__header-btn-box" @click.stop="pre" v-if="!disabled">
<view class="uni-calendar__header-btn uni-calendar--left">view>
view>
<picker mode="date" :disabled="disabled" :value="date" fields="month" @change="bindDateChange">
<text class="uni-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}text>
picker>
<view class="uni-calendar__header-btn-box" @click.stop="next" v-if="!disabled">
<view class="uni-calendar__header-btn uni-calendar--right">view>
view>
<text class="uni-calendar__backtoday" @click="backtoday" v-if="!disabled">{{todayText}}text>
view>
<view class="uni-calendar__box">
<view v-if="showMonth" class="uni-calendar__box-bg">
<text class="uni-calendar__box-bg-text">{{nowDate.month}}text>
view>
<view class="uni-calendar__weeks">
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SUNText}}text>
view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{monText}}text>
view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{TUEText}}text>
view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{WEDText}}text>
view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{THUText}}text>
view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{FRIText}}text>
view>
<view class="uni-calendar__weeks-day">
<text class="uni-calendar__weeks-day-text">{{SATText}}text>
view>
view>
<swiper style="height: 345px" :current="current" circular @change="changeDate">
<swiper-item v-if="!disableTouch">
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in preWeeksCpd" :key="weekIndex">
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate" :disabled="disabled" :ready="ready">calendar-item>
view>
view>
swiper-item>
<swiper-item>
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeksCpd" :key="weekIndex">
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate" :disabled="disabled" :ready="ready">calendar-item>
view>
view>
swiper-item>
<swiper-item v-if="!disableTouch">
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in nextWeeksCpd" :key="weekIndex">
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
<calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate" :disabled="disabled" :ready="ready">calendar-item>
view>
view>
swiper-item>
swiper>
view>
view>
view>
template>
<script>
import Calendar from './util.js';
import calendarItem from './uni-calendar-item.vue'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const { t } = initVueI18n(messages)
/**
* Calendar 日历
* @description 日历组件可以查看日期,选择任意范围内的日期,打点操作。常用场景如:酒店日期预订、火车机票选择购买日期、上下班打卡等
* @tutorial https://ext.dcloud.net.cn/plugin?id=56
* @property {String} date 自定义当前时间,默认为今天
* @property {Boolean} lunar 显示农历
* @property {String} startDate 日期选择范围-开始日期
* @property {String} endDate 日期选择范围-结束日期
* @property {Boolean} range 范围选择
* @property {Boolean} insert = [true|false] 插入模式,默认为false
* @value true 弹窗模式
* @value false 插入模式
* @property {Boolean} clearDate = [true|false] 弹窗模式是否清空上次选择内容
* @property {Array} selected 打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
* @property {Boolean} showMonth 是否选择月份为背景
* @event {Function} change 日期改变,`insert :ture` 时生效
* @event {Function} confirm 确认选择`insert :false` 时生效
* @event {Function} monthSwitch 切换月份时触发
* @example
*/
export default {
components: {
calendarItem
},
emits:['close','confirm','change','monthSwitch'],
props: {
// 是否禁用滑动
disableTouch: {
type: Boolean,
default: false
},
date: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
selected: {
type: Array,
default () {
return []
}
},
lunar: {
type: Boolean,
default: false
},
startDate: {
type: String,
default: ''
},
endDate: {
type: String,
default: ''
},
range: {
type: Boolean,
default: false
},
insert: {
type: Boolean,
default: true
},
showMonth: {
type: Boolean,
default: true
},
clearDate: {
type: Boolean,
default: true
}
},
data() {
return {
ready: false, // 日历自定义渲染图文是否就绪
calendarDirection: '',
current: 1,
lastCurrent: 1,
show: false,
preWeeks: [],
weeks: [],
nextWeeks: [],
calendar: {},
nowDate: '',
aniMaskShow: false
}
},
computed:{
weeksCpd(){
return this.weeks;
},
preWeeksCpd(){
return this.preWeeks;
},
nextWeeksCpd(){
return this.nextWeeks;
},
/**
* for i18n
*/
okText() {
return t("uni-calender.ok")
},
cancelText() {
return t("uni-calender.cancel")
},
todayText() {
return t("uni-calender.today")
},
monText() {
return t("uni-calender.MON")
},
TUEText() {
return t("uni-calender.TUE")
},
WEDText() {
return t("uni-calender.WED")
},
THUText() {
return t("uni-calender.THU")
},
FRIText() {
return t("uni-calender.FRI")
},
SATText() {
return t("uni-calender.SAT")
},
SUNText() {
return t("uni-calender.SUN")
},
},
watch: {
date(newVal) {
// this.cale.setDate(newVal)
this.init(newVal)
},
startDate(val){
this.cale.resetSatrtDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
},
endDate(val){
this.cale.resetEndDate(val)
this.cale.setDate(this.nowDate.fullDate)
this.weeks = this.cale.weeks
},
selected(newVal) {
const _t = this;
_t.cale.setSelectInfo(_t.nowDate.fullDate, newVal)
// _t.calendarDirection = ''
if(_t.calendarDirection === 'prev') {
_t.nextWeeks = _t.cale.weeks;
console.log("执行1");
}else if(_t.calendarDirection === 'next'){
_t.preWeeks = _t.cale.weeks;
console.log("执行2");
}else {
_t.weeks = _t.cale.weeks
console.log("执行3");
}
_t.ready = true;
}
},
created() {
// 获取日历方法实例
this.cale = new Calendar({
// date: new Date(),
selected: this.selected,
startDate: this.startDate,
endDate: this.endDate,
range: this.range,
})
// 选中某一天
// this.cale.setDate(this.date)
this.init(this.date)
// this.setDay
},
methods: {
changeDateNext(){
const _t = this;
const date = this.cale.getDate(this.nowDate.fullDate, 1, 'month').fullDate
const theDate = this.cale.getDate(date).fullDate;
const preDate = this.cale.getDate(theDate, -1, 'month').fullDate
const nextDate = this.cale.getDate(theDate, +1, 'month').fullDate
this.cale.setDate(preDate, "pre") // 初始上一月份
this.cale.setDate(nextDate, "next") // 初始下一月份
this.cale.setDate(date) // 初始当前月份
this.weeks = this.cale.preWeeks
this.preWeeks = this.cale.nextWeeks
this.nextWeeks = this.cale.weeks
this.nowDate = this.calendar = this.cale.getInfo(date)
_t.monthSwitch()
},
changeDatePre(){
const _t = this;
const date = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
const theDate = this.cale.getDate(date).fullDate;
const preDate = this.cale.getDate(theDate, -1, 'month').fullDate
const nextDate = this.cale.getDate(theDate, +1, 'month').fullDate
this.cale.setDate(preDate, "pre") // 初始上一月份
this.cale.setDate(nextDate, "next") // 初始下一月份
this.cale.setDate(date) // 初始当前月份
this.weeks = this.cale.nextWeeks
this.preWeeks = this.cale.weeks
this.nextWeeks = this.cale.preWeeks
this.nowDate = this.calendar = this.cale.getInfo(date)
_t.monthSwitch()
},
updateMonth(){
const _t = this;
const theDate = _t.nowDate.fullDate;
_t.cale.setDate(_t.cale.getDate(theDate, -1, 'month').fullDate, "pre")
_t.cale.setDate(_t.cale.getDate(theDate, +1, 'month').fullDate, "next")
},
changeDate(e){
const _t = this;
const primaryCurrent = _t.lastCurrent
let current = e.detail.current;
_t.current = current;
if(_t.touchTimer) {
clearTimeout(_t.touchTimer)
_t.touchTimer = null;
_t.lastCurrent = current;
}
_t.touchTimer = setTimeout(() => {
if(primaryCurrent - current == -1 || primaryCurrent - current == 2){
_t.lastCurrent = current;
const nextDate = _t.cale.getDate(_t.nowDate.fullDate, +1, 'month').fullDate
console.log("左滑");
_t.cale.setDate(nextDate)
_t.nowDate = _t.calendar = _t.cale.getInfo(nextDate)
_t.updateMonth();
if(primaryCurrent - current == -1 && current != 1){
_t.ready = false;
_t.changeDateMonth('prev')
_t.calendarDirection = 'prev'
}else if(primaryCurrent - current == 2){
_t.ready = false;
_t.changeDateMonth('next')
_t.calendarDirection = 'next'
}else {
_t.calendarDirection = ''
}
}else{
console.log("右滑");
_t.lastCurrent = current;
const preDate = _t.cale.getDate(_t.nowDate.fullDate, -1, 'month').fullDate
_t.cale.setDate(preDate)
_t.nowDate = _t.calendar = _t.cale.getInfo(preDate)
_t.updateMonth();
if(primaryCurrent - current == 1 && current != 1){
_t.ready = false;
_t.changeDateMonth('next')
_t.calendarDirection = 'next'
}else if(primaryCurrent - current == -2){
_t.ready = false;
_t.changeDateMonth('prev')
_t.calendarDirection = 'prev'
}else {
_t.calendarDirection = ''
}
}
_t.monthSwitch()
console.log("nowDate", _t.nowDate);
},500)
},
// 取消穿透
clean() {},
bindDateChange(e) {
const value = e.detail.value + '-1'
// console.log(this.cale.getDate(value));
this.init(value)
this.setEmit('dateChange');
},
/**
* 初始化日期显示
* @param {Object} date
*/
init(date) {
const _t = this;
// 滑块归位
const theDate = _t.cale.getDate(date).fullDate;
const preDate = _t.cale.getDate(theDate, -1, 'month').fullDate
const nextDate = _t.cale.getDate(theDate, +1, 'month').fullDate
_t.cale.setDate(preDate, "pre") // 初始上一月份
_t.cale.setDate(nextDate, "next") // 初始下一月份
_t.cale.setDate(date) // 初始当前月份
if(_t.calendarDirection) {
_t.changeDateMonth(_t.calendarDirection)
}else {
_t.weeks = _t.cale.weeks
_t.preWeeks = _t.cale.preWeeks
_t.nextWeeks = _t.cale.nextWeeks
}
_t.nowDate = _t.calendar = _t.cale.getInfo(date)
},
changeDateMonth(type){
const _t = this;
if(type == 'prev'){
_t.weeks = _t.cale.preWeeks;
_t.preWeeks = _t.cale.nextWeeks;
_t.nextWeeks = _t.cale.weeks;
}else if(type == 'next'){
_t.weeks = _t.cale.nextWeeks;
_t.nextWeeks = _t.cale.preWeeks;
_t.preWeeks = _t.cale.weeks;
}
},
/**
* 打开日历弹窗
*/
open() {
// 弹窗模式并且清理数据
if (this.clearDate && !this.insert) {
this.cale.cleanMultipleStatus()
// this.cale.setDate(this.date)
this.init(this.date)
}
this.show = true
this.$nextTick(() => {
setTimeout(() => {
this.aniMaskShow = true
}, 50)
})
},
/**
* 关闭日历弹窗
*/
close() {
this.aniMaskShow = false
this.$nextTick(() => {
setTimeout(() => {
this.show = false
this.$emit('close')
}, 300)
})
},
/**
* 确认按钮
*/
confirm() {
this.setEmit('confirm')
this.close()
},
/**
* 变化触发
*/
change() {
if (!this.insert) return
this.setEmit('change')
},
/**
* 选择月份触发
*/
monthSwitch() {
let {
year,
month
} = this.nowDate
this.$emit('monthSwitch', {
year,
month: Number(month)
})
},
/**
* 派发事件
* @param {Object} name
*/
setEmit(name) {
let {
year,
month,
date,
fullDate,
lunar,
extraInfo
} = this.calendar
this.$emit(name, {
range: this.cale.multipleStatus,
year,
month,
date,
fulldate: fullDate,
lunar,
extraInfo: extraInfo || {}
})
},
/**
* 选择天触发
* @param {Object} weeks
*/
choiceDate(weeks) {
if (weeks.disable) return
this.calendar = weeks
// 设置多选
this.cale.setMultiple(this.calendar.fullDate)
this.weeks = this.cale.weeks
this.change()
},
/**
* 回到今天
*/
backtoday() {
let date = this.cale.getDate(new Date()).fullDate
this.init(date)
this.change()
},
/**
* 上个月
*/
pre() {
// const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
// this.setDate(preDate)
// this.monthSwitch()
const _t = this;
let current = _t.lastCurrent = _t.current;
_t.current = --current < 0 ? 2 : current
// console.log("_t.current", _t.current);
},
/**
* 下个月
*/
next() {
// const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
// this.setDate(nextDate)
// this.monthSwitch()
const _t = this;
let current = _t.lastCurrent = _t.current;
_t.current = ++current > 2 ? 0 : current
// console.log("_t.current", _t.current);
},
/**
* 设置日期
* @param {Object} date
*/
setDate(date) {
this.cale.setDate(date)
this.weeks = this.cale.weeks
this.preWeeks = this.cale.preWeeks
this.nextWeeks = this.cale.nextWeeks
this.nowDate = this.cale.getInfo(date)
}
}
}
script>
<style lang="scss" scoped>
.uni-calendar {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-calendar__mask {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
background-color: $uni-bg-color-mask;
transition-property: opacity;
transition-duration: 0.3s;
opacity: 0;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uni-calendar--mask-show {
opacity: 1
}
.uni-calendar--fixed {
position: fixed;
bottom: calc(var(--window-bottom));
left: 0;
right: 0;
transition-property: transform;
transition-duration: 0.3s;
transform: translateY(460px);
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.uni-calendar--ani-show {
transform: translateY(0);
}
.uni-calendar__content {
background-color: #fff;
}
.uni-calendar__header {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
height: 50px;
border-bottom-color: $uni-border-color;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.uni-calendar--fixed-top {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 1px;
}
.uni-calendar--fixed-width {
width: 50px;
// padding: 0 15px;
}
.uni-calendar__backtoday {
position: absolute;
right: 0;
top: 25rpx;
padding: 0 5px;
padding-left: 10px;
height: 25px;
line-height: 25px;
font-size: 12px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
color: $uni-text-color;
background-color: $uni-bg-color-hover;
}
.uni-calendar__header-text {
text-align: center;
width: 100px;
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.uni-calendar__header-btn-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.uni-calendar__header-btn {
width: 10px;
height: 10px;
border-left-color: $uni-text-color-placeholder;
border-left-style: solid;
border-left-width: 2px;
border-top-color: $uni-color-subtitle;
border-top-style: solid;
border-top-width: 2px;
}
.uni-calendar--left {
transform: rotate(-45deg);
}
.uni-calendar--right {
transform: rotate(135deg);
}
.uni-calendar__weeks {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-calendar__weeks-item {
flex: 1;
}
.uni-calendar__weeks-day {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
height: 45px;
border-bottom-color: #F5F5F5;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.uni-calendar__weeks-day-text {
font-size: 14px;
}
.uni-calendar__box {
position: relative;
}
.uni-calendar__box-bg {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.uni-calendar__box-bg-text {
font-size: 200px;
font-weight: bold;
color: $uni-text-color-grey;
opacity: 0.1;
text-align: center;
/* #ifndef APP-NVUE */
line-height: 1;
/* #endif */
}
style>
uni-calendar-item.vue
<template>
<view class="uni-calendar-item__weeks-box"
:style="{ 'background-color': (ready && weeks.extraInfo.color && weeks.extraInfo.clickable) ? weeks.extraInfo.color : ''}"
:class="{
'uni-calendar-item--disable':weeks.disable,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
}"
@click="choiceDate(weeks)">
<view class="uni-calendar-item__weeks-box-item"
:style="{ 'background-color': (ready && weeks.extraInfo && weeks.extraInfo.color && weeks.extraInfo.clickable) ? weeks.extraInfo.color : '' }">
<text class="uni-calendar-item__weeks-box-text" :class="{
'uni-calendar-item--isDay-text': weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.date}}text>
<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
}">{{todayText}}text>
<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}">{{weeks.isDay ? todayText : (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}text>
<view v-if="weeks.extraInfo&&weeks.extraInfo.info&&!weeks.extraInfo.value.includes('_') "
class="uni-calendar-item__weeks-lunar-text"
:class="{
'uni-calendar-item--extra':weeks.extraInfo.info,
'uni-calendar-item--isDay-text':weeks.isDay,
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
'uni-calendar-item--before-checked':weeks.beforeMultiple,
'uni-calendar-item--multiple': weeks.multiple,
'uni-calendar-item--after-checked':weeks.afterMultiple,
'uni-calendar-item--disable':weeks.disable,
}" style="display:flex; position: absolute; left: 0; bottom: 0px; top: 0; right: 0; justify-content: center; align-items: center;">
<view class="power" style="display: flex; align-items: center; justify-content: center; color: #000">
<text class="value">
{{ weeks.extraInfo.value || '' }}
text>
<text style="font-size: 9rpx;">
{{ weeks.extraInfo.triangleLabel || '' }}
text>
view>
view>
view>
view>
template>
<script>
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from './i18n/index.js'
const { t } = initVueI18n(messages)
export default {
emits:['change'],
data(){
return {
testColor: '#f40'
}
},
props: {
ready: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
weeks: {
type: Object,
default () {
return {}
}
},
calendar: {
type: Object,
default: () => {
return {}
}
},
selected: {
type: Array,
default: () => {
return []
}
},
lunar: {
type: Boolean,
default: false
}
},
computed: {
todayText() {
return t("uni-calender.today")
},
},
methods: {
choiceDate(weeks) {
console.log("选中得时间节点:", weeks)
weeks.extraInfo && weeks.extraInfo.clickable && this.$emit('change', weeks)
}
}
}
script>
<style lang="scss" scoped>
.uni-calendar-item__weeks-box {
flex: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
align-items: center;
border: 0.1px solid #F0F0F0;
}
.uni-calendar-item__weeks-box-text {
font-size: $uni-font-size-base;
color: $uni-text-color;
}
.uni-calendar-item__weeks-lunar-text {
font-size: $uni-font-size-sm;
color: $uni-text-color;
}
.uni-calendar-item__weeks-box-item {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
// flex-direction: column;
// justify-content: center;
// align-items: center;
width: 100%;
height: 55px;
overflow: hidden;
}
.uni-calendar-item__weeks-box-circle {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 30px;
display: flex;
align-items: flex-start;
justify-content: flex-end;
clip-path: polygon(0 0, 100% 0, 100% 100%);
opacity: 0.8;
&-label{
color: #000;
font-size: 12rpx;
// transform: rotate(45deg);
// position: absolute;
white-space: nowrap;
margin-top: 5rpx;
margin-right: 5rpx;
}
}
.uni-calendar-item--disable {
// background-color: rgba(249, 249, 249, $uni-opacity-disabled);
background-color: transparent;
color: #000;
// color: $uni-text-color-disable;
}
.uni-calendar-item--isDay-text {
// color: $uni-color-primary;
}
.uni-calendar-item--isDay {
// background-color: $uni-color-primary;
background-color: transparent;
opacity: 0.8;
color: #fff;
}
.uni-calendar-item--extra {
color: $uni-color-error;
opacity: 0.8;
.power{
width:100%;
display: flex;
overflow: hidden;
max-width:100rpx;
.remark-common{
max-width:100rpx;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.value{
@extend .remark-common;
// $charge: #53bf18;
// $discharge: #f3a405;
color: #000;
font-size: 18rpx;
}
}
}
.uni-calendar-item--checked {
// background-color: $uni-color-primary;
color: #000;
opacity: 0.8;
}
.uni-calendar-item--multiple {
background-color: $uni-color-primary;
color: #fff;
opacity: 0.8;
}
.uni-calendar-item--before-checked {
background-color: #ff5a5f;
color: #fff;
}
.uni-calendar-item--after-checked {
background-color: #ff5a5f;
color: #fff;
}
style>