<template>
|
<view>
|
<view class="calendar-Time-header under_line">
|
<view class="header-left">
|
<!-- <image :src="lastDisabled ? disable : nodisable" mode="widthFix" @tap="subMonth"></image> -->
|
<image :src="nodisable" mode="widthFix" @tap="subMonth"></image>
|
<text>{{ title_time }}</text>
|
<image
|
src="@/static/meeting/icon/ar_right@2x.png"
|
mode="widthFix"
|
@tap="addMonth"
|
></image>
|
</view>
|
<view class="header-right" @tap="backToToday">回到今天</view>
|
<!-- <text class='calendar-lastMonth' @tap="subMonth" v-bind:class="{'calendar-btn-disabled' : lastDisabled }">{{lastText}}</text>
|
<text class='calendar-TimeH'>{{title_time}}</text>
|
<text class='calendar-nextMonth' @tap="addMonth" v-bind:class="{'calendar-btn-disabled' : nextDisabled }">{{nextText}}</text>
|
<text class='calendar-backToToday' @tap="backToToday">回到今天</text> -->
|
</view>
|
<view class="ClearBoth"></view>
|
<view class="calendar-content">
|
<view class="calendar-row calendar-header">
|
<view class="calendar-col aligncanter">周日</view>
|
<view class="calendar-col aligncanter">周一</view>
|
<view class="calendar-col aligncanter">周二</view>
|
<view class="calendar-col aligncanter">周三</view>
|
<view class="calendar-col aligncanter">周四</view>
|
<view class="calendar-col aligncanter">周五</view>
|
<view class="calendar-col aligncanter">周六</view>
|
</view>
|
<view
|
class="calendar-row calendar-day"
|
v-bind:style="{
|
transform: transformObj,
|
'transition-duration': transformTimeObj,
|
}"
|
@touchstart="touchstart"
|
@touchmove="touchmove"
|
@touchend="touchend"
|
>
|
<view
|
class="calendar-col aligncanter calendar-col-lastMonth"
|
v-for="item in beforeDateList"
|
v-bind:key="item.key"
|
@tap="subMonth"
|
v-bind:class="{ 'calendar-out-of-Date': item.outOfDate }"
|
>{{ item.dateIndex }}
|
<text class="calendar-text">{{ item.markText }}</text>
|
</view>
|
|
<view
|
class="calendar-col aligncanter currentDays"
|
v-bind:class="{
|
'calendar-active': item.dateIndex == currentSelectTime,
|
'calendar-today': item.isToday,
|
'calendar-range': item.isRanges,
|
'calendar-out-of-Date': item.outOfDate,
|
}"
|
v-for="item in dateList"
|
v-bind:key="item.key"
|
@tap="selectedDateFun(item.dateIndex)"
|
>
|
<view class="dayValue">
|
<text
|
class="calendar-date calendar-day-6-7"
|
v-if="item.isDaySunOrSat"
|
>{{ item.dateIndex }}</text
|
>
|
<text v-else class="calendar-date">{{ item.dateIndex }}</text>
|
<text
|
class="calendar-point"
|
v-if="item.pointText"
|
v-bind:style="{
|
color: item.pointTextColor ? item.pointTextColor : maskColor,
|
}"
|
>{{ item.pointText }}</text
|
>
|
<text
|
class="calendar-text"
|
v-bind:style="{
|
color: item.markTextColor ? item.markTextColor : maskColor,
|
}"
|
>{{ item.markText }}</text
|
>
|
</view>
|
</view>
|
|
<view
|
class="calendar-col aligncanter calendar-col-nextMonth"
|
v-for="item in afterDateList"
|
v-bind:key="item.key"
|
@tap="addMonth"
|
v-bind:class="{ 'calendar-out-of-Date': item.outOfDate }"
|
>{{ item.dateIndex }}
|
<text class="calendar-text">{{ item.markText }}</text>
|
</view>
|
</view>
|
<view class="ClearBoth"></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import lunarYearTool from './sloarToLunar.js'
|
import { getDay } from '@/utils/utils.js'
|
export default {
|
name: 'Li-Calendar',
|
props: {
|
/**
|
* @description 当前时间 yyyy-MM-dd
|
*/
|
currentTime: {
|
type: String,
|
default: function () {
|
let timeObj = new Date()
|
return timeObj.getFullYear() + "-" + (timeObj.getMonth() + 1) + "-" + timeObj.getDate()
|
}
|
},
|
/**
|
* @description 标记点列表
|
* time 标记时间 yyyy-MM-dd
|
* text 标记内容
|
* markPoint 是否显示标记点 默认false
|
* markTextColor 标记内容颜色
|
* pointText 左上角标记点内容
|
* pointTextColor 标记点颜色
|
*/
|
mark: {
|
type: Array,
|
default: function () {
|
return undefined
|
}
|
},
|
/**
|
* @description 上月文字
|
*/
|
lastText: {
|
type: String,
|
default: '〈'
|
},
|
/**
|
* @description 下月文字
|
*/
|
nextText: {
|
type: String,
|
default: '〉'
|
},
|
/**
|
* @description 全局标记点颜色，包括点和文字
|
*/
|
maskColor: {
|
type: String,
|
default: '#01AAED'
|
},
|
/**
|
* @description 是否显示农历，mask优先级高
|
*/
|
showLunar: {
|
type: Boolean,
|
default: true
|
},
|
/**
|
* @description 设置标记范围
|
*/
|
range: {
|
type: Object,
|
default: function () {
|
return {
|
rangeStart: undefined, //设置标记范围开始，yyyy-MM-dd
|
rangeEnd: undefined //设置标记范围结束，yyyy-MM-dd
|
}
|
}
|
},
|
/**
|
* @description 是否开启范围选择模式
|
*/
|
rangeMode: {
|
type: Boolean,
|
default: false
|
},
|
/**
|
* @description 日历起始时间 yyyy-MM-dd
|
*/
|
dateStart: {
|
type: String,
|
default: '1970-01-01'
|
},
|
/**
|
* @description 日历结束时间 yyyy-MM-dd
|
*/
|
dateEnd: {
|
type: String,
|
default: '2100-12-31'
|
},
|
/**
|
* @description 是否可以滚动
|
*/
|
canDrag: {
|
type: Boolean,
|
default: true
|
},
|
},
|
created() {
|
this.render()
|
},
|
data() {
|
return {
|
nodisable: require('@/static/meeting/icon/ar_left@2x.png'),
|
disable: require('@/static/meeting/icon/ar_left_disable.png'),
|
|
nextDisabled: false,
|
lastDisabled: true,
|
currentSelectTime: undefined, //点击时保存的dateIndex
|
title_time: '', //顶头文本
|
year: undefined, //当前年
|
month: undefined, //当前月
|
beforeDateList: [], //上个月的日期列表
|
dateList: [], //本月的日期列表
|
afterDateList: [], //下个月的日期列表
|
firstRangeSelected: false, // 范围开始时间是否已经选择
|
rangeStart_: undefined, //标记范围开始，yyyyMM-dd
|
rangeEnd_: undefined, //标记范围结束，yyyyMM-dd
|
transform_x: 0,
|
transform_time: 0,
|
}
|
},
|
methods: {
|
render(setTimeStr) { //初始化
|
let that = this
|
let currentTimeStr = setTimeStr ? setTimeStr : that.currentTime
|
let timeObj = this.toDateByStr(currentTimeStr) //当前选定的时间
|
//计算头部显示的年月
|
let _tempTileMonth = (timeObj.getMonth() + 1)
|
if (_tempTileMonth < 10)
|
_tempTileMonth = '0' + _tempTileMonth
|
this.title_time = timeObj.getFullYear() + "年" + _tempTileMonth + "月"
|
|
//获取当前时间月份1号
|
let firstDayStr = timeObj.getFullYear() + "/" + (timeObj.getMonth() + 1) + "/01"
|
let date = that.toDateByStr(firstDayStr)
|
that.year = date.getFullYear()
|
that.month = date.getMonth() + 1
|
let firstDayWeek = date.getDay() //第一天是星期几
|
let grid_sum = 0 //总格子数 ，用于后面填满格子
|
//获取上一个月的天数
|
let TempMonth
|
let TempYear
|
if (that.month == 1) { //跨年
|
TempMonth = 12
|
TempYear = that.year - 1
|
} else {
|
TempYear = that.year
|
TempMonth = that.month - 1
|
}
|
let TempLastMonthStr = TempYear + "/" + TempMonth + "/01"
|
let lastMonthTotalDay = that.getTotalDay(TempLastMonthStr)
|
let lastMonthStartDay = lastMonthTotalDay - firstDayWeek
|
|
let _dateStart = that.toDateByStr1(that.dateStart)
|
let _dateEnd = that.toDateByStr1(that.dateEnd)
|
// 创建前面的日期
|
that.beforeDateList = []
|
for (let i = 0; i < firstDayWeek; i++) {
|
grid_sum++
|
lastMonthStartDay++
|
let tempObj = {
|
dateIndex: lastMonthStartDay,
|
key: 'before_' + i
|
}
|
|
//判断是否超出日期范围
|
let _tempBeforeDate = new Date(TempYear + "/" + TempMonth + "/" + lastMonthStartDay)
|
if (_dateStart > _tempBeforeDate || _tempBeforeDate > _dateEnd) {
|
tempObj.outOfDate = true
|
}
|
|
//获取农历
|
if (that.showLunar) {
|
let LunarDate = that.sloarToLunar(TempYear, TempMonth, lastMonthStartDay)
|
let tempLunarDay = LunarDate.lunarDay == '初一' ? LunarDate.lunarMonth + '月' : LunarDate.lunarDay
|
tempObj.markText = tempLunarDay
|
}
|
|
that.beforeDateList.push(tempObj)
|
}
|
|
//获取一个月的天数
|
let totalDay = that.getTotalDay(currentTimeStr)
|
|
//生成本月日历
|
let today = new Date()
|
let today_year = today.getFullYear()
|
let today_month = today.getMonth() + 1
|
let today_day = today.getDate()
|
that.dateList = []
|
for (let i = 1; i <= totalDay; i++) { //循环日
|
grid_sum++
|
|
let tempObj = {
|
dateIndex: i,
|
key: 'date_' + i,
|
isRanges: false,
|
isToday: false
|
}
|
//当前日期变量
|
let tempDay = that.toDateByStr(that.year + "/" + that.month + "/" + i)
|
|
//判断是否为当天
|
if (today_year == that.year && today_month == that.month && today_day == i)
|
tempObj.isToday = true
|
|
//周六和周日，特殊处理
|
let tempCurrWeek = tempDay.getDay()
|
if (tempCurrWeek == 0 || tempCurrWeek == 6)
|
tempObj.isDaySunOrSat = true
|
|
//判断是否超出日期范围
|
if (_dateStart > tempDay || tempDay > _dateEnd) {
|
tempObj.outOfDate = true
|
}
|
|
//获取农历
|
if (that.showLunar) {
|
let LunarDate = that.sloarToLunar(that.year, that.month, i)
|
that.lunarMonth = LunarDate.lunarMonth
|
that.lunarYear = LunarDate.lunarYear
|
let tempLunarDay = LunarDate.lunarDay == '初一' ? LunarDate.lunarMonth + '月' : LunarDate.lunarDay
|
tempObj.lunarMonth = LunarDate.lunarMonth
|
tempObj.lunarYear = LunarDate.lunarYear
|
tempObj.lunarDay = LunarDate.lunarDay
|
tempObj.markText = tempLunarDay
|
tempObj.markTextColor = '#454545'
|
}
|
|
//设置了标记点
|
if (that.mark) {
|
for (let z = 0; z < that.mark.length; z++) { //判断是否为标记点
|
let tempDayMark = that.toDateByStr1(that.mark[z].time.trim())
|
if (tempDay.getTime() == tempDayMark.getTime()) {
|
let tempTextStr = that.mark[z].text
|
if (that.mark[z].markPoint != false) { // 是否显示点
|
tempObj.pointText = that.mark[z].pointText ? that.mark[z].pointText : '●'
|
tempObj.pointTextColor = that.mark[z].pointTextColor ? that.mark[z].pointTextColor : undefined
|
}
|
if (tempTextStr != undefined && tempTextStr != "") { // 是否显示文字
|
tempObj.markText = tempTextStr
|
tempObj.markTextColor = that.mark[z].markTextColor ? that.mark[z].markTextColor : undefined
|
}
|
break
|
}
|
}
|
}
|
|
that.dateList.push(tempObj)
|
}
|
|
that.setRange()
|
|
// 创建后面的空白，补够五行
|
that.afterDateList = []
|
if (grid_sum < 42) { // 创建后面的空白，补够五行
|
let j = 0
|
|
//获取下一月
|
let TempMonthNext
|
let TempYearNext
|
if (that.month == 12) { //跨年
|
TempMonthNext = 1
|
TempYearNext = that.year + 1
|
} else {
|
TempYearNext = that.year
|
TempMonthNext = that.month + 1
|
}
|
|
for (let i = grid_sum; i < 42; i++) {
|
j++
|
|
let tempObj = {
|
dateIndex: j,
|
key: 'after_' + j
|
}
|
//获取农历
|
if (that.showLunar) {
|
let LunarDate = that.sloarToLunar(TempYearNext, TempMonthNext, j)
|
let tempLunarDay = LunarDate.lunarDay == '初一' ? LunarDate.lunarMonth + '月' : LunarDate.lunarDay
|
tempObj.markText = tempLunarDay
|
}
|
|
//判断是否超出日期范围
|
let _tempAfterDate = new Date(TempYearNext + "/" + TempMonthNext + "/" + j)
|
if (_dateStart > _tempAfterDate || _tempAfterDate > _dateEnd) {
|
tempObj.outOfDate = true
|
}
|
|
that.afterDateList.push(tempObj)
|
}
|
}
|
},
|
sloarToLunar(year, month, day) {
|
// console.log('----')
|
// console.log(year + "--" +month+ "--" + day)
|
let result = lunarYearTool.sloarToLunar(year, month, day)
|
//console.log(result)
|
return result
|
},
|
getTotalDay(time) { //获取月 日期总数
|
time = time.replace(/-/g, "/")
|
let selectedDate = new Date(time)
|
if (selectedDate == "Invalid Date") {
|
selectedDate = new Date(time + "/01")
|
}
|
|
let dayMany = new Date(selectedDate.getFullYear(), (selectedDate.getMonth() + 1), 0).getDate()
|
return dayMany
|
},
|
toDateByStr(timeStr) { //字符串转换时间，转换失败或者不传字符串则返回当前
|
let timeObj
|
if (timeStr) {
|
timeObj = new Date(timeStr.replace(/-/g, "/"))
|
}
|
if (!timeStr || timeObj == "Invalid Date")
|
timeObj = new Date()
|
return timeObj
|
},
|
toDateByStr1(timeStr) { //字符串转换时间，转换失败或者不传字符串则null
|
try {
|
let timeObj
|
if (timeStr) {
|
timeObj = new Date(timeStr.replace(/-/g, "/"))
|
}
|
if (!timeStr || timeObj == "Invalid Date")
|
return null
|
return timeObj
|
} catch (e) {
|
return null
|
}
|
},
|
getTimeStrFormat(timeStr) { //获取格式化的时间 yyyy-MM-dd
|
let timeObj
|
if (timeStr) {
|
timeObj = new Date(timeStr.replace(/-/g, "/"))
|
}
|
if (!timeStr || timeObj == "Invalid Date")
|
timeObj = new Date()
|
return timeObj.getFullYear() + "-" + (timeObj.getMonth() + 1) + "-" + timeObj.getDate()
|
},
|
selectedDateFun(index) { //点击日期
|
let that = this
|
let selectObj = that.dateList[index - 1]
|
selectObj.year = that.year
|
selectObj.month = that.month
|
selectObj.day = index
|
selectObj.time = that.year + "-" + that.month + "-" + index
|
that.$emit('dayChange', selectObj)
|
|
//判断是否超出日期范围
|
if (that.checkOutOfDate(selectObj.time)) {
|
return
|
}
|
|
that.currentSelectTime = index
|
|
console.log(index)
|
|
//开启了范围选择模式
|
if (that.rangeMode) {
|
if (!that.firstRangeSelected) { //选择开始时间
|
that.firstRangeSelected = !that.firstRangeSelected
|
that.rangeStart_ = selectObj.time
|
that.rangeEnd_ = undefined
|
that.clearRange()
|
} else { //选择了结束时间
|
that.rangeEnd_ = selectObj.time
|
that.firstRangeSelected = !that.firstRangeSelected
|
that.$emit('rangeChange', {
|
start: that.rangeStart_,
|
end: that.rangeEnd_,
|
})
|
that.setRange()
|
}
|
}
|
},
|
addMonth() { //加一个月
|
let that = this
|
that.currentSelectTime = ''
|
let _Month = that.month
|
let _Year = that.year
|
if (that.month == 12) { //跨年
|
_Month = 1
|
_Year += 1
|
} else {
|
_Month += 1
|
}
|
|
let str = _Year + "/" + _Month + "/01"
|
|
//判断是否超出日期范围
|
if (that.checkOutOfDate(str)) {
|
that.nextDisabled = true
|
return
|
}
|
|
that.month = _Month
|
that.year = _Year
|
that.lastDisabled = false
|
|
//检查日期上限值是否在当月内，如果在则不能再切换下个月
|
if (that.checkDateRange(that.year, that.month, 1)) {
|
that.nextDisabled = true
|
}
|
|
if (that.rangeMode) { //开启了范围模式
|
that.currentSelectTime = undefined
|
}
|
|
that.$emit('monthChange', {
|
date: str
|
})
|
that.render(str)
|
},
|
subMonth() { //减一个月
|
let that = this
|
|
that.currentSelectTime = ''
|
|
let _Month = that.month
|
let _Year = that.year
|
if (that.month == 1) { //跨年
|
_Month = 12
|
_Year -= 1
|
} else {
|
_Month -= 1
|
}
|
|
let str = _Year + "/" + _Month + "/01"
|
|
//判断是否超出日期范围
|
let _totalDay = that.getTotalDay(str)
|
if (that.checkOutOfDate(_Year + "/" + _Month + "/" + _totalDay)) {
|
that.lastDisabled = true
|
return
|
}
|
|
that.month = _Month
|
that.year = _Year
|
that.nextDisabled = false
|
|
//检查日期下限值是否在当月内，如果在则不能再切换上个月
|
if (that.checkDateRange(that.year, that.month)) {
|
that.lastDisabled = true
|
}
|
|
if (that.rangeMode) { //开启了范围模式
|
that.currentSelectTime = undefined
|
}
|
|
that.$emit('monthChange', {
|
date: str
|
})
|
that.render(str)
|
},
|
backToToday() { //回到今天
|
let currDate = new Date()
|
let _year = currDate.getFullYear()
|
let _month = currDate.getMonth() + 1
|
|
this.currentSelectTime = getDay().day
|
|
this.$emit('dayChange', { time: getDay().date })
|
|
//如果已经是当月
|
if (_year == this.year && _month == this.month) {
|
return
|
}
|
|
let value = _year + "/" + _month + "/" + currDate.getDate()
|
this.$emit('monthChange', {
|
date: value
|
})
|
this.lastDisabled = true
|
|
this.render(value)
|
},
|
setRange() { //设置范围
|
let that = this
|
let rangeStartDate = that.toDateByStr1(that.rangeStart_)
|
let rangeEndDate = that.toDateByStr1(that.rangeEnd_)
|
if (!rangeStartDate || !rangeEndDate)
|
return
|
if (rangeStartDate > rangeEndDate) { //防止范围出错
|
let tempD = rangeEndDate
|
rangeEndDate = rangeStartDate
|
rangeStartDate = tempD
|
}
|
|
//循环判断范围
|
for (let i = 0; i < that.dateList.length; i++) {
|
let _TempDtStr = that.year + "/" + that.month + "/" + that.dateList[i].dateIndex
|
let _TempDt = that.toDateByStr1(_TempDtStr)
|
that.dateList[i].isRanges = false
|
if (rangeStartDate <= _TempDt && _TempDt <= rangeEndDate) //时间在范围内
|
that.dateList[i].isRanges = true
|
}
|
},
|
clearRange() { //关闭范围模式范围
|
let that = this
|
//循环判断范围
|
for (let i = 0; i < that.dateList.length; i++) {
|
that.dateList[i].isRanges = false
|
}
|
},
|
checkOutOfDate(time) { //判断是否超出日期范围,yyyy-MM-dd
|
let that = this
|
let _dateStart = that.toDateByStr1(that.dateStart)
|
let _dateEnd = that.toDateByStr1(that.dateEnd)
|
let _tempDate = that.toDateByStr1(time)
|
if (_dateStart > _tempDate || _tempDate > _dateEnd) {
|
return true
|
} else
|
return false
|
},
|
checkDateRange(year, month, type) { //判断范围界限值是否在当月内,yyyy-MM-dd,type；1 上限值,其他：下限值
|
let that = this
|
|
let totalDay = that.getTotalDay(year + '/' + month + '/01')
|
let firstD = that.toDateByStr1(year + '/' + month + '/01')
|
let lastD = that.toDateByStr1(year + '/' + month + '/' + totalDay)
|
|
if (type == 1) { //上限值
|
let _dateEnd = that.toDateByStr1(that.dateEnd)
|
if (firstD <= _dateEnd && _dateEnd <= lastD) {
|
return true
|
} else
|
return false
|
} else { //下限值
|
let _dateStart = that.toDateByStr1(that.dateStart)
|
if (firstD <= _dateStart && _dateStart <= lastD) {
|
return true
|
} else
|
return false
|
}
|
},
|
calendarTransform(x, time) { //日历滑动动画
|
this.transform_x = x
|
this.transform_time = time
|
},
|
touchstart(event) {
|
if (!this.canDrag)
|
return
|
this.startPageX = event.touches[0].pageX
|
this.startPageY = event.touches[0].pageY
|
},
|
touchmove(event) {
|
if (!this.canDrag)
|
return
|
let touchmovePageX = event.touches[0].pageX
|
let result = touchmovePageX - this.startPageX
|
this.calendarTransform(result, 0)
|
},
|
touchend(event) {
|
if (!this.canDrag)
|
return
|
let that = this
|
let endPageX = event.changedTouches[0].pageX
|
let endPageY = event.changedTouches[0].pageY
|
let x = Math.abs(that.startPageX - endPageX) //横坐标之差
|
let y = Math.abs(that.startPageY - endPageY) //纵坐标之差
|
|
let screenX = 0
|
try {
|
const res = uni.getSystemInfoSync()
|
screenX = res.windowWidth
|
} catch (e) {
|
console.error(e)
|
return
|
}
|
if (that.startPageX > endPageX) { //左滑
|
let a = Math.atan(y / x)
|
let Rate = x / screenX
|
if (a < Math.PI / 6 && Rate > 0.3) {
|
screenX = -screenX
|
that.calendarTransform(screenX, 300)
|
setTimeout(function () {
|
that.addMonth()
|
that.calendarTransform(0, 0)
|
}, 300)
|
}
|
else {
|
that.calendarTransform(0, 300)
|
}
|
} else {
|
let a = Math.atan(y / x)
|
let Rate = x / screenX
|
if (a < Math.PI / 6 && Rate > 0.3) {
|
that.calendarTransform(screenX, 300)
|
setTimeout(function () {
|
that.subMonth()
|
that.calendarTransform(0, 0)
|
}, 300)
|
}
|
else {
|
that.calendarTransform(0, 300)
|
}
|
}
|
}
|
},
|
watch: {
|
currentTime: function (val, oldVal) { //时间改变
|
let dateNew = this.toDateByStr1(val)
|
if (dateNew.getFullYear() == this.year && (dateNew.getMonth() + 1) == this.month) {
|
console.log('time is not change')
|
} else {
|
this.currentSelectTime = dateNew.getDate()
|
this.render()
|
}
|
},
|
range: function (val, oldVal) { //范围改变
|
if (val.rangeStart != oldVal.rangeStart || val.rangeEnd != oldVal.rangeEnd) {
|
this.rangeStart_ = val.rangeStart
|
this.rangeEnd_ = val.rangeEnd
|
this.setRange()
|
}
|
},
|
mark: function (val, oldVal) { //标记改变
|
this.render()
|
},
|
rangeMode: function (val, oldVal) { //范围改变
|
if (!val) { //如果是关闭范围模式
|
this.rangeStart_ = undefined //标记范围开始，yyyyMM-dd
|
this.rangeEnd_ = undefined //标记范围结束，yyyyMM-dd
|
this.firstRangeSelected = false
|
this.clearRange()
|
}
|
},
|
},
|
computed: {
|
transformObj: function () {
|
return 'translate3d(' + this.transform_x + 'px, 0px, 0px) translateZ(0px)'
|
},
|
transformTimeObj: function () {
|
return this.transform_time + 'ms'
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
.calendar-Time-header {
|
/* text-align: center;
|
height: 50upx;
|
line-height: 50upx;
|
vertical-align: middle;
|
padding: 20upx; */
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20rpx;
|
}
|
.header-left {
|
display: flex;
|
align-items: center;
|
}
|
.header-left image {
|
width: 30rpx;
|
height: 30rpx;
|
}
|
.header-left text {
|
font-size: 32rpx;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #222222;
|
margin: 0 40rpx;
|
}
|
.header-right {
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: $uni-color-primary;
|
}
|
.calendar-TimeH {
|
}
|
.calendar-lastMonth {
|
width: 100upx;
|
font-size: 35upx;
|
margin-right: 10%;
|
padding: 0 5px;
|
text-align: center;
|
}
|
.calendar-nextMonth {
|
width: 100upx;
|
text-align: center;
|
margin-left: 10%;
|
font-size: 35upx;
|
padding: 0 5px;
|
}
|
.calendar-backToToday {
|
text-align: center;
|
font-size: 24upx;
|
position: absolute;
|
right: 5px;
|
}
|
|
.calendar-row:before,
|
.calendar-row:after {
|
display: table;
|
content: " ";
|
}
|
|
.calendar-row:after {
|
clear: both;
|
}
|
|
.calendar-col {
|
width: 14.285714%;
|
max-width: 14.285714%;
|
position: relative;
|
float: left;
|
font-weight: 600;
|
min-height: 80upx;
|
font-size: 28rpx;
|
/* color: #999999; */
|
color: #222222;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
-o-text-overflow: ellipsis;
|
overflow: hidden;
|
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.aligncanter {
|
text-align: center;
|
/* border-bottom: 1rpx solid #E5E5E5; */
|
}
|
|
.calendar-header {
|
color: gray;
|
height: 40upx;
|
line-height: 40upx;
|
vertical-align: middle;
|
font-size: 24upx;
|
}
|
|
.calendar-day {
|
height: 80upx;
|
transform: translate3d(0px, 0px, 0px) translateZ(0px);
|
transition-duration: 0ms;
|
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
|
}
|
|
.calendar-content {
|
}
|
|
.calendar-date {
|
/* color: #000; */
|
}
|
.calendar-today {
|
border-radius: 6rpx;
|
background-color: #e9f4f6;
|
color: $uni-color-primary;
|
/* -moz-box-shadow: 0px 2upx 10upx #ABABAB;
|
-webkit-box-shadow: 0px 2upx 10upx #ABABAB;
|
box-shadow: 0px 2upx 10upx #ABABAB; */
|
}
|
.calendar-today .calendar-point {
|
color: white !important;
|
}
|
|
.calendar-today .calendar-text {
|
color: white !important;
|
}
|
|
.calendar-col-lastMonth .calendar-text {
|
color: gray;
|
}
|
|
.calendar-col-nextMonth .calendar-text {
|
color: gray;
|
}
|
|
/* .calendar-today .calendar-date{
|
color: white;
|
} */
|
|
.calendar-active {
|
color: #ffffff !important;
|
background-color: $uni-color-primary;
|
/* -moz-box-shadow: 0px 2upx 10upx #ABABAB;
|
-webkit-box-shadow: 0px 2upx 10upx #ABABAB;
|
box-shadow: 0px 2upx 10upx #ABABAB; */
|
}
|
/* 范围标记 */
|
.calendar-range {
|
/* color:#01AAED; */
|
border-radius: 0px;
|
background-color: #d9d9d9;
|
-moz-box-shadow: none;
|
-webkit-box-shadow: none;
|
box-shadow: none;
|
}
|
|
.ClearBoth {
|
clear: both;
|
}
|
.calendar-col-nextMonth {
|
color: gray;
|
}
|
.calendar-col-lastMonth {
|
color: gray;
|
}
|
.calendar-btn-disabled {
|
color: gainsboro;
|
}
|
.calendar-point {
|
width: 28rpx;
|
height: 28rpx;
|
box-sizing: border-box;
|
background-color: #f62710;
|
border-radius: 50%;
|
font-size: 16upx;
|
color: #ffffff;
|
top: 2upx;
|
right: 2upx;
|
position: absolute;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.calendar-text {
|
padding: 4rpx 0;
|
width: 100%;
|
font-size: 20upx;
|
color: #f62710;
|
top: 40upx;
|
left: 0px;
|
position: absolute;
|
overflow: hidden;
|
}
|
.dayValue {
|
text-align: center;
|
/* color: #000000; */
|
}
|
|
.calendar-day-6-7 {
|
/* color: orangered; */
|
}
|
|
/* 超出日期范围 */
|
.calendar-out-of-Date {
|
background-color: #eaeaea;
|
}
|
.calendar-out-of-Date .calendar-date {
|
color: gray;
|
}
|
|
/* 以下为实现0.5px底部边界 */
|
.under_line {
|
position: relative;
|
}
|
.under_line:before,
|
.under_line:after {
|
position: absolute;
|
content: " ";
|
height: 1px;
|
width: 100%;
|
left: 0;
|
transform-origin: 0 0;
|
-webkit-transform-origin: 0 0;
|
}
|
/* .fineLine:before{顶部top: 0;background: #000;} */
|
.under_line:after {
|
bottom: 0;
|
}
|
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
.under_line:after,
|
.under_line:before {
|
-webkit-transform: scaleY(0.667);
|
}
|
}
|
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
|
.under_line:after,
|
.under_line:before {
|
-webkit-transform: scaleY(0.5);
|
}
|
}
|
/* 以上为实现0.5px底部边界 */
|
</style>
|
