前端

README.md

@@ -0,0 +1,390 @@
+## 2020-09-06 d-rili 自定义日历
+
+
+## 【----------------------------------------------------------------】
+
+
+## 【亲测有效：看完将掌握：日历js渲染的方法 (不难)】
+
+
+## 【----------------------------------------------------------------】
+
+（收藏不迷路，感谢支持）
+````text
+掌握：
+
+1.月初月末每天的日期
+
+2.item原生组件，如何判断左右滑动：显示对应的年份
+
+````
+
+
+## vue代码
+````vue
+<template>
+	<view>
+		<!--  -->
+		<view class="riliWrapper">
+			<view class="riliWrapperBox">
+				<!-- 日历 -->
+				<view class="signWrapperCalendar" v-if="true">
+					<view class="signWrapperCalendarBox">
+						<!--  -->
+						<swiper @change="_onClickSlideApi" duration="200" :current="slideDataListIndex" circular style="height:550rpx">
+							<swiper-item class="swiper-item" v-for="(calendar,indexa) in 3" :key="indexa" >
+							<view class="signWrapperCalendarBoxTop" >
+								{{year}}年{{month<10?'0'+month:month}}月
+							</view>
+							<view class="signWrapperCalendarBoxCenter">
+								<view class="signWrapperCalendarBoxCenterBox">
+									<view class="signWrapperCalendarBoxCenterBoxTop">
+										<div class="week-number">
+											<span v-for="(item,index) in weekList" :style="{color:(index==0||index==weekList.length-1)&&themeColor}" :key="index">{{item}}</span>
+										</div>
+									</view>
+									<view class="signWrapperCalendarBoxCenterBoxFooter">
+										<view class="each-day" v-for="(dayTime,idx) in dayList" :key="idx" >
+											<view :class="dayTime!=day+2 ?'eachDayBox':'eachDayBoxCheck'" v-if="day">
+												<view class="eachDayBoxBox" :style="dayTime==day?'border-bottom: 1rpx solid #4E6EF2;':''">
+													{{dayTime?dayTime:''}}
+												</view>
+												
+											</view>
+										</view>
+									</view>
+								</view>
+							</view>
+							
+							
+						</swiper-item>
+						</swiper>
+						<!--  -->
+					</view>
+					
+					
+				</view>
+			</view>
+			
+			
+			
+		</view>
+		<!--  -->
+	</view>
+</template>
+
+````
+
+## js代码
+
+````js
+<script>
+	export default {
+		data() {
+			return {
+				weekList: ['日', '一', '二', '三', '四', '五', '六'],
+				//	月份数组【2020-08-01	  2020-09-01   2020-10-01】
+				slideDataList:[],
+				//	月份数组的索引
+				slideDataListIndex:1,
+				year:2020,
+				month:10,
+				day:10,
+				dayList:[],
+				start_time:'',	//	月初的时间戳
+				end_time:'',	//	月末的时间戳
+			};
+		},
+		created() {
+			console.log('created')
+			
+			this._onLoad()
+		},
+		methods:{
+			async _onLoad() {
+				//	获取当前时间 	赋值年，月
+				await this.initTime()
+				
+				//	更新日历
+				await this._runMonth()
+			},
+			//	初始化时间
+			initTime() {
+				var nowTimeData = this._getTimeNowApi()
+				
+				this.year = nowTimeData.year
+				this.month = nowTimeData.month
+				this.day = nowTimeData.day
+				
+				// 今日时间为：2020-9-16
+				console.log('今日时间为：'+this.year+'-'+this.month+'-'+this.day)
+			},
+			
+			async _runMonth() {
+				console.log('==============================================================')
+				
+				//	获取当前月的每一天的数据	1~31
+				await this.initApi()
+				
+				//	根据当前选择的年月，更新start_time   end_time
+				await this._timeApi()
+				
+				console.log(this.start_time)
+				console.log(this.end_time)
+				//	更新记录
+				// await this.onClickSignLog()
+				
+				let dataWeek = await this.getweek(this._getNowApi());
+				
+				// console.log(this._getNowApi())
+				this.slideDataList[0] = []
+				this.slideDataList[1] = dataWeek
+				this.slideDataList[2] = []
+				
+				console.log(this.slideDataList)
+				
+				
+				console.log('==============================================================')
+			},
+			
+			_getTimeNowApi() {
+				//	初始化时间
+				var date = new Date();
+				
+				var year = date.getFullYear();
+				var month = parseInt(date.getMonth()+1);
+				var day = date.getDate();
+				
+				if (month < 10) {
+					month = '0' + month
+				}
+				if (day < 10) {
+					day = '0' + day
+				}
+				
+				let returnData = {
+					year: year,
+					month:parseInt(month),
+					day:day,
+				}
+				
+				return returnData
+			},
+			
+			//	滑动日历触发（左右滑动）
+			_onClickSlideApi(e) {
+				
+				let current = e.detail.current
+				
+				let oldIndex = this.slideDataListIndex
+				
+				this.slideDataListIndex = current
+				
+				if(oldIndex - current == -1 || oldIndex - current == 2){
+					console.log('向右滑动前一个月')
+					if (this.month == 12) {
+						this.year = this.year + 1
+						this.month = 1
+					} else {
+						this.month = this.month+1
+					}
+					
+				} else {
+					console.log('向左滑动后退一个月')
+					if (this.month == 1) {
+						this.year = this.year - 1
+						this.month = 12
+					} else {
+						this.month = this.month - 1
+					}
+				}
+				
+				this._runMonth()
+			},
+			
+			_getNowApi() {
+				console.log('当前日期：'+this.year+'-'+this.month+'-'+this.day)
+				
+				let data = {
+					Day: 1,
+					Month: this.month,
+					Year: this.year
+				}
+				
+				console.log(data)
+				return data
+			},
+			//	获取当前月的每一天的数据
+			initApi() {
+				this.dayList = this.createDayList(this.month, this.year);
+			},
+			
+			//创建每个月日历数据，传入月份1号前面用null填充
+			createDayList(month, year) {
+			    const count = this.getDayNum(month, year),
+			        _week = new Date(year + '/' + month + '/1').getDay();
+			    let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
+				
+			    for (let i = 29; i <= count; i++) {
+			        list.push(i)
+			    }
+			    for (let i = 0; i < _week; i++) {
+			        list.unshift(null)
+			    }
+				
+			    return list;
+			},
+			//计算传入月份有多少天
+			getDayNum(month, year) {
+			    let dayNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+			
+			    if ((year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)) {
+			        dayNum[1] = 29;
+			    }
+			    return dayNum[month - 1]
+			},
+			//	传时间获取月初月末时间
+			_timeApi() {
+				
+				let startDate = this.year+'-'+this.month+'-'+this.day
+				
+				let startData = this._timeMonthStartApi(startDate+' 00:00:00')
+				
+				this.start_time = startData.time_int
+				
+				let endData = this._timeMonthEndApi(startDate+' 00:00:00')
+				
+				this.end_time = endData.time_int
+			},
+			_timeMonthStartApi(timeDate) {
+				var date = new Date(timeDate);
+				
+				date.setDate(1);
+				
+				var month = parseInt(date.getMonth()+1);
+				
+				var day = date.getDate();
+				if (month < 10) {
+				    month = '0' + month
+				}
+				if (day < 10) {
+				    day = '0' + day
+				}
+				
+				let timeDateStart = date.getFullYear() + '-' + month + '-' + day;
+				
+				let returnData = {
+					time_type:'start_time',
+					time_int: Date.parse(timeDateStart+' 00:00:00')/1000,
+					time_date: timeDateStart,
+					year:date.getFullYear(),
+					month:month,
+					day:day,
+				}
+				
+				return returnData
+			},
+			_timeMonthEndApi(timeDate) {
+				var endDate=new Date(timeDate);
+				var currentMonth=endDate.getMonth();
+				
+				var nextMonth=++currentMonth;
+				var nextMonthFirstDay=new Date(endDate.getFullYear(),nextMonth,1);
+				var oneDay=1000*60*60*24;
+				var lastTime = new Date(nextMonthFirstDay-oneDay);
+				var endMonth = parseInt(lastTime.getMonth()+1);
+				var endDay = lastTime.getDate();
+				if (endMonth < 10) {
+					endMonth = '0' + endMonth
+				}
+				if (endDay < 10) {
+					endDay = '0' + endDay
+				}
+				
+				let timeDateEnd = endDate.getFullYear() + '-' + endMonth + '-' + endDay
+				
+				let returnData = {
+					time_type:'end_time',
+					time_int: Date.parse(timeDateEnd+' 00:00:00')/1000,
+					time_date: timeDateEnd,
+					year:endDate.getFullYear(),
+					month:endMonth,
+					day:endDay,
+				}
+				
+				return returnData
+			},
+			//	2020-08-01
+			getweek(date) {
+				let weeks = [];
+				let dates = this.getDates(date);
+				// let len = Math.ceil(dates.weeks.length / 7);
+				// for (let i = 0; i < len; i++) {
+					// weeks.push(dates.weeks.slice(i * 7, 7 + (i * 7)));
+				// }
+				// dates.weeks = weeks
+				return dates;
+			},
+			getDates(date) {
+				let dates = {
+					year: date.Year,
+					month: date.Month,
+					firstDay: new Date(date.Year, date.Month, 1).getDay(),
+					lastDay: new Date(date.Year, date.Month + 1, 0).getDay(),
+					endDate: new Date(date.Year, date.Month + 1, 0).getDate(),
+					weeks: []
+				}
+				
+				//计算上月日期
+				for (let i = dates.firstDay; i > 0; i--) {
+					let dateinfo = {};
+					dateinfo.date = new Date(date.Year, date.Month, -i + 1).getDate();
+					dateinfo.isClick = false;
+					dates.weeks.push(dateinfo);
+				}
+				//计算本月日期
+				for (let i = 1; i <= new Date(date.Year, date.Month + 1, 0).getDate(); i++) {
+					let nowisClick = true;
+					let dateinfo = {};
+					dateinfo.date = i;
+					if (this.dateType == 'dateCustom') {
+						nowisClick = false;
+						if (this.dateCustom[dates.year] && this.dateCustom[dates.year][dates.month]) {
+							for (let j = 0; j < this.dateCustom[dates.year][dates.month].length; j++) {
+								if (this.dateCustom[dates.year][dates.month][j] == i) {
+									nowisClick = true;
+								}
+							}
+						}
+					}
+					dateinfo.isClick = nowisClick;
+					dates.weeks.push(dateinfo);
+				}
+				//计算下月日期
+				let len = 7 - dates.lastDay;
+				if ((42 - dates.weeks.length) >= 7) {
+					len += 7;
+				}
+				for (let i = 1; i < len; i++) {
+					let dateinfo = {};
+					dateinfo.date = i;
+					dateinfo.isClick = false;
+					dates.weeks.push(dateinfo);
+				}
+				return dates;
+			
+			},
+			
+		}
+			
+	}
+</script>
+	
+````
+
+## 更新日志
+
+* 2020年09月16日 v1.0.0
+    *  增加自定义日历【注：可随意左右滑动】
+	*  【亲测可用】
+

components/d-rili/README.md

@@ -0,0 +1,390 @@
+## 2020-09-06 d-rili 自定义日历
+
+
+## 【----------------------------------------------------------------】
+
+
+## 【亲测有效：看完将掌握：日历js渲染的方法 (不难)】
+
+
+## 【----------------------------------------------------------------】
+
+（收藏不迷路，感谢支持）
+````text
+掌握：
+
+1.月初月末每天的日期
+
+2.item原生组件，如何判断左右滑动：显示对应的年份
+
+````
+
+
+## vue代码
+````vue
+<template>
+	<view>
+		<!--  -->
+		<view class="riliWrapper">
+			<view class="riliWrapperBox">
+				<!-- 日历 -->
+				<view class="signWrapperCalendar" v-if="true">
+					<view class="signWrapperCalendarBox">
+						<!--  -->
+						<swiper @change="_onClickSlideApi" duration="200" :current="slideDataListIndex" circular style="height:550rpx">
+							<swiper-item class="swiper-item" v-for="(calendar,indexa) in 3" :key="indexa" >
+							<view class="signWrapperCalendarBoxTop" >
+								{{year}}年{{month<10?'0'+month:month}}月
+							</view>
+							<view class="signWrapperCalendarBoxCenter">
+								<view class="signWrapperCalendarBoxCenterBox">
+									<view class="signWrapperCalendarBoxCenterBoxTop">
+										<div class="week-number">
+											<span v-for="(item,index) in weekList" :style="{color:(index==0||index==weekList.length-1)&&themeColor}" :key="index">{{item}}</span>
+										</div>
+									</view>
+									<view class="signWrapperCalendarBoxCenterBoxFooter">
+										<view class="each-day" v-for="(dayTime,idx) in dayList" :key="idx" >
+											<view :class="dayTime!=day+2 ?'eachDayBox':'eachDayBoxCheck'" v-if="day">
+												<view class="eachDayBoxBox" :style="dayTime==day?'border-bottom: 1rpx solid #4E6EF2;':''">
+													{{dayTime?dayTime:''}}
+												</view>
+												
+											</view>
+										</view>
+									</view>
+								</view>
+							</view>
+							
+							
+						</swiper-item>
+						</swiper>
+						<!--  -->
+					</view>
+					
+					
+				</view>
+			</view>
+			
+			
+			
+		</view>
+		<!--  -->
+	</view>
+</template>
+
+````
+
+## js代码
+
+````js
+<script>
+	export default {
+		data() {
+			return {
+				weekList: ['日', '一', '二', '三', '四', '五', '六'],
+				//	月份数组【2020-08-01	  2020-09-01   2020-10-01】
+				slideDataList:[],
+				//	月份数组的索引
+				slideDataListIndex:1,
+				year:2020,
+				month:10,
+				day:10,
+				dayList:[],
+				start_time:'',	//	月初的时间戳
+				end_time:'',	//	月末的时间戳
+			};
+		},
+		created() {
+			console.log('created')
+			
+			this._onLoad()
+		},
+		methods:{
+			async _onLoad() {
+				//	获取当前时间 	赋值年，月
+				await this.initTime()
+				
+				//	更新日历
+				await this._runMonth()
+			},
+			//	初始化时间
+			initTime() {
+				var nowTimeData = this._getTimeNowApi()
+				
+				this.year = nowTimeData.year
+				this.month = nowTimeData.month
+				this.day = nowTimeData.day
+				
+				// 今日时间为：2020-9-16
+				console.log('今日时间为：'+this.year+'-'+this.month+'-'+this.day)
+			},
+			
+			async _runMonth() {
+				console.log('==============================================================')
+				
+				//	获取当前月的每一天的数据	1~31
+				await this.initApi()
+				
+				//	根据当前选择的年月，更新start_time   end_time
+				await this._timeApi()
+				
+				console.log(this.start_time)
+				console.log(this.end_time)
+				//	更新记录
+				// await this.onClickSignLog()
+				
+				let dataWeek = await this.getweek(this._getNowApi());
+				
+				// console.log(this._getNowApi())
+				this.slideDataList[0] = []
+				this.slideDataList[1] = dataWeek
+				this.slideDataList[2] = []
+				
+				console.log(this.slideDataList)
+				
+				
+				console.log('==============================================================')
+			},
+			
+			_getTimeNowApi() {
+				//	初始化时间
+				var date = new Date();
+				
+				var year = date.getFullYear();
+				var month = parseInt(date.getMonth()+1);
+				var day = date.getDate();
+				
+				if (month < 10) {
+					month = '0' + month
+				}
+				if (day < 10) {
+					day = '0' + day
+				}
+				
+				let returnData = {
+					year: year,
+					month:parseInt(month),
+					day:day,
+				}
+				
+				return returnData
+			},
+			
+			//	滑动日历触发（左右滑动）
+			_onClickSlideApi(e) {
+				
+				let current = e.detail.current
+				
+				let oldIndex = this.slideDataListIndex
+				
+				this.slideDataListIndex = current
+				
+				if(oldIndex - current == -1 || oldIndex - current == 2){
+					console.log('向右滑动前一个月')
+					if (this.month == 12) {
+						this.year = this.year + 1
+						this.month = 1
+					} else {
+						this.month = this.month+1
+					}
+					
+				} else {
+					console.log('向左滑动后退一个月')
+					if (this.month == 1) {
+						this.year = this.year - 1
+						this.month = 12
+					} else {
+						this.month = this.month - 1
+					}
+				}
+				
+				this._runMonth()
+			},
+			
+			_getNowApi() {
+				console.log('当前日期：'+this.year+'-'+this.month+'-'+this.day)
+				
+				let data = {
+					Day: 1,
+					Month: this.month,
+					Year: this.year
+				}
+				
+				console.log(data)
+				return data
+			},
+			//	获取当前月的每一天的数据
+			initApi() {
+				this.dayList = this.createDayList(this.month, this.year);
+			},
+			
+			//创建每个月日历数据，传入月份1号前面用null填充
+			createDayList(month, year) {
+			    const count = this.getDayNum(month, year),
+			        _week = new Date(year + '/' + month + '/1').getDay();
+			    let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
+				
+			    for (let i = 29; i <= count; i++) {
+			        list.push(i)
+			    }
+			    for (let i = 0; i < _week; i++) {
+			        list.unshift(null)
+			    }
+				
+			    return list;
+			},
+			//计算传入月份有多少天
+			getDayNum(month, year) {
+			    let dayNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+			
+			    if ((year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)) {
+			        dayNum[1] = 29;
+			    }
+			    return dayNum[month - 1]
+			},
+			//	传时间获取月初月末时间
+			_timeApi() {
+				
+				let startDate = this.year+'-'+this.month+'-'+this.day
+				
+				let startData = this._timeMonthStartApi(startDate+' 00:00:00')
+				
+				this.start_time = startData.time_int
+				
+				let endData = this._timeMonthEndApi(startDate+' 00:00:00')
+				
+				this.end_time = endData.time_int
+			},
+			_timeMonthStartApi(timeDate) {
+				var date = new Date(timeDate);
+				
+				date.setDate(1);
+				
+				var month = parseInt(date.getMonth()+1);
+				
+				var day = date.getDate();
+				if (month < 10) {
+				    month = '0' + month
+				}
+				if (day < 10) {
+				    day = '0' + day
+				}
+				
+				let timeDateStart = date.getFullYear() + '-' + month + '-' + day;
+				
+				let returnData = {
+					time_type:'start_time',
+					time_int: Date.parse(timeDateStart+' 00:00:00')/1000,
+					time_date: timeDateStart,
+					year:date.getFullYear(),
+					month:month,
+					day:day,
+				}
+				
+				return returnData
+			},
+			_timeMonthEndApi(timeDate) {
+				var endDate=new Date(timeDate);
+				var currentMonth=endDate.getMonth();
+				
+				var nextMonth=++currentMonth;
+				var nextMonthFirstDay=new Date(endDate.getFullYear(),nextMonth,1);
+				var oneDay=1000*60*60*24;
+				var lastTime = new Date(nextMonthFirstDay-oneDay);
+				var endMonth = parseInt(lastTime.getMonth()+1);
+				var endDay = lastTime.getDate();
+				if (endMonth < 10) {
+					endMonth = '0' + endMonth
+				}
+				if (endDay < 10) {
+					endDay = '0' + endDay
+				}
+				
+				let timeDateEnd = endDate.getFullYear() + '-' + endMonth + '-' + endDay
+				
+				let returnData = {
+					time_type:'end_time',
+					time_int: Date.parse(timeDateEnd+' 00:00:00')/1000,
+					time_date: timeDateEnd,
+					year:endDate.getFullYear(),
+					month:endMonth,
+					day:endDay,
+				}
+				
+				return returnData
+			},
+			//	2020-08-01
+			getweek(date) {
+				let weeks = [];
+				let dates = this.getDates(date);
+				// let len = Math.ceil(dates.weeks.length / 7);
+				// for (let i = 0; i < len; i++) {
+					// weeks.push(dates.weeks.slice(i * 7, 7 + (i * 7)));
+				// }
+				// dates.weeks = weeks
+				return dates;
+			},
+			getDates(date) {
+				let dates = {
+					year: date.Year,
+					month: date.Month,
+					firstDay: new Date(date.Year, date.Month, 1).getDay(),
+					lastDay: new Date(date.Year, date.Month + 1, 0).getDay(),
+					endDate: new Date(date.Year, date.Month + 1, 0).getDate(),
+					weeks: []
+				}
+				
+				//计算上月日期
+				for (let i = dates.firstDay; i > 0; i--) {
+					let dateinfo = {};
+					dateinfo.date = new Date(date.Year, date.Month, -i + 1).getDate();
+					dateinfo.isClick = false;
+					dates.weeks.push(dateinfo);
+				}
+				//计算本月日期
+				for (let i = 1; i <= new Date(date.Year, date.Month + 1, 0).getDate(); i++) {
+					let nowisClick = true;
+					let dateinfo = {};
+					dateinfo.date = i;
+					if (this.dateType == 'dateCustom') {
+						nowisClick = false;
+						if (this.dateCustom[dates.year] && this.dateCustom[dates.year][dates.month]) {
+							for (let j = 0; j < this.dateCustom[dates.year][dates.month].length; j++) {
+								if (this.dateCustom[dates.year][dates.month][j] == i) {
+									nowisClick = true;
+								}
+							}
+						}
+					}
+					dateinfo.isClick = nowisClick;
+					dates.weeks.push(dateinfo);
+				}
+				//计算下月日期
+				let len = 7 - dates.lastDay;
+				if ((42 - dates.weeks.length) >= 7) {
+					len += 7;
+				}
+				for (let i = 1; i < len; i++) {
+					let dateinfo = {};
+					dateinfo.date = i;
+					dateinfo.isClick = false;
+					dates.weeks.push(dateinfo);
+				}
+				return dates;
+			
+			},
+			
+		}
+			
+	}
+</script>
+	
+````
+
+## 更新日志
+
+* 2020年09月16日 v1.0.0
+    *  增加自定义日历【注：可随意左右滑动】
+	*  【亲测可用】
+

components/d-rili/d-rili.vue

@@ -0,0 +1,490 @@
+<template>
+	<view>
+		<!--  -->
+		<view class="riliWrapper">
+			<view class="riliWrapperBox">
+				<!-- 日历 -->
+				<view class="signWrapperCalendar" v-if="true">
+					<view class="signWrapperCalendarBox">
+						<!--  -->
+						<swiper @change="_onClickSlideApi" duration="200" :current="slideDataListIndex" circular style="height:550rpx">
+							<swiper-item class="swiper-item" v-for="(calendar,indexa) in 3" :key="indexa" >
+							<view class="signWrapperCalendarBoxTop" >
+								{{year}}年{{month<10?'0'+month:month}}月
+							</view>
+							<view class="signWrapperCalendarBoxCenter">
+								<view class="signWrapperCalendarBoxCenterBox">
+									<view class="signWrapperCalendarBoxCenterBoxTop">
+										<div class="week-number">
+											<span v-for="(item,index) in weekList" :style="{color:(index==0||index==weekList.length-1)&&themeColor}" :key="index">{{item}}</span>
+										</div>
+									</view>
+									<view class="signWrapperCalendarBoxCenterBoxFooter">
+										<view class="each-day" v-for="(dayTime,idx) in dayList" :key="idx" >
+											<view :class="dayTime!=day+2 ?'eachDayBox':'eachDayBoxCheck'" v-if="day">
+												<view class="eachDayBoxBox" :style="dayTime==day?'border-bottom: 1rpx solid #4E6EF2;':''">
+													{{dayTime?dayTime:''}}
+												</view>
+												
+											</view>
+										</view>
+									</view>
+								</view>
+							</view>
+							
+							
+						</swiper-item>
+						</swiper>
+						<!--  -->
+					</view>
+					
+					
+				</view>
+			</view>
+			
+			
+			
+		</view>
+		<!--  -->
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				weekList: ['日', '一', '二', '三', '四', '五', '六'],
+				//	月份数组【2020-08-01	  2020-09-01   2020-10-01】
+				slideDataList:[],
+				//	月份数组的索引
+				slideDataListIndex:1,
+				year:2020,
+				month:10,
+				day:10,
+				dayList:[],
+				start_time:'',	//	月初的时间戳
+				end_time:'',	//	月末的时间戳
+			};
+		},
+		created() {
+			console.log('created')
+			
+			this._onLoad()
+		},
+		methods:{
+			async _onLoad() {
+				//	获取当前时间 	赋值年，月
+				await this.initTime()
+				
+				//	更新日历
+				await this._runMonth()
+			},
+			//	初始化时间
+			initTime() {
+				var nowTimeData = this._getTimeNowApi()
+				
+				this.year = nowTimeData.year
+				this.month = nowTimeData.month
+				this.day = nowTimeData.day
+				
+				// 今日时间为：2020-9-16
+				console.log('今日时间为：'+this.year+'-'+this.month+'-'+this.day)
+			},
+			
+			async _runMonth() {
+				console.log('==============================================================')
+				
+				//	获取当前月的每一天的数据	1~31
+				await this.initApi()
+				
+				//	根据当前选择的年月，更新start_time   end_time
+				await this._timeApi()
+				
+				console.log(this.start_time)
+				console.log(this.end_time)
+				//	更新记录
+				// await this.onClickSignLog()
+				
+				let dataWeek = await this.getweek(this._getNowApi());
+				
+				// console.log(this._getNowApi())
+				this.slideDataList[0] = []
+				this.slideDataList[1] = dataWeek
+				this.slideDataList[2] = []
+				
+				console.log(this.slideDataList)
+				
+				
+				console.log('==============================================================')
+			},
+			
+			_getTimeNowApi() {
+				//	初始化时间
+				var date = new Date();
+				
+				var year = date.getFullYear();
+				var month = parseInt(date.getMonth()+1);
+				var day = date.getDate();
+				
+				if (month < 10) {
+					month = '0' + month
+				}
+				if (day < 10) {
+					day = '0' + day
+				}
+				
+				let returnData = {
+					year: year,
+					month:parseInt(month),
+					day:day,
+				}
+				
+				return returnData
+			},
+			
+			//	滑动日历触发（左右滑动）
+			_onClickSlideApi(e) {
+				
+				let current = e.detail.current
+				
+				let oldIndex = this.slideDataListIndex
+				
+				this.slideDataListIndex = current
+				
+				if(oldIndex - current == -1 || oldIndex - current == 2){
+					console.log('向右滑动前一个月')
+					if (this.month == 12) {
+						this.year = this.year + 1
+						this.month = 1
+					} else {
+						this.month = this.month+1
+					}
+					
+				} else {
+					console.log('向左滑动后退一个月')
+					if (this.month == 1) {
+						this.year = this.year - 1
+						this.month = 12
+					} else {
+						this.month = this.month - 1
+					}
+				}
+				
+				this._runMonth()
+			},
+			
+			_getNowApi() {
+				console.log('当前日期：'+this.year+'-'+this.month+'-'+this.day)
+				
+				let data = {
+					Day: 1,
+					Month: this.month,
+					Year: this.year
+				}
+				
+				console.log(data)
+				return data
+			},
+			//	获取当前月的每一天的数据
+			initApi() {
+				this.dayList = this.createDayList(this.month, this.year);
+			},
+			
+			//创建每个月日历数据，传入月份1号前面用null填充
+			createDayList(month, year) {
+			    const count = this.getDayNum(month, year),
+			        _week = new Date(year + '/' + month + '/1').getDay();
+			    let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
+				
+			    for (let i = 29; i <= count; i++) {
+			        list.push(i)
+			    }
+			    for (let i = 0; i < _week; i++) {
+			        list.unshift(null)
+			    }
+				
+			    return list;
+			},
+			//计算传入月份有多少天
+			getDayNum(month, year) {
+			    let dayNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+			
+			    if ((year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)) {
+			        dayNum[1] = 29;
+			    }
+			    return dayNum[month - 1]
+			},
+			//	传时间获取月初月末时间
+			_timeApi() {
+				
+				let startDate = this.year+'-'+this.month+'-'+this.day
+				
+				let startData = this._timeMonthStartApi(startDate+' 00:00:00')
+				
+				this.start_time = startData.time_int
+				
+				let endData = this._timeMonthEndApi(startDate+' 00:00:00')
+				
+				this.end_time = endData.time_int
+			},
+			_timeMonthStartApi(timeDate) {
+				var date = new Date(timeDate);
+				
+				date.setDate(1);
+				
+				var month = parseInt(date.getMonth()+1);
+				
+				var day = date.getDate();
+				if (month < 10) {
+				    month = '0' + month
+				}
+				if (day < 10) {
+				    day = '0' + day
+				}
+				
+				let timeDateStart = date.getFullYear() + '-' + month + '-' + day;
+				
+				let returnData = {
+					time_type:'start_time',
+					time_int: Date.parse(timeDateStart+' 00:00:00')/1000,
+					time_date: timeDateStart,
+					year:date.getFullYear(),
+					month:month,
+					day:day,
+				}
+				
+				return returnData
+			},
+			_timeMonthEndApi(timeDate) {
+				var endDate=new Date(timeDate);
+				var currentMonth=endDate.getMonth();
+				
+				var nextMonth=++currentMonth;
+				var nextMonthFirstDay=new Date(endDate.getFullYear(),nextMonth,1);
+				var oneDay=1000*60*60*24;
+				var lastTime = new Date(nextMonthFirstDay-oneDay);
+				var endMonth = parseInt(lastTime.getMonth()+1);
+				var endDay = lastTime.getDate();
+				if (endMonth < 10) {
+					endMonth = '0' + endMonth
+				}
+				if (endDay < 10) {
+					endDay = '0' + endDay
+				}
+				
+				let timeDateEnd = endDate.getFullYear() + '-' + endMonth + '-' + endDay
+				
+				let returnData = {
+					time_type:'end_time',
+					time_int: Date.parse(timeDateEnd+' 00:00:00')/1000,
+					time_date: timeDateEnd,
+					year:endDate.getFullYear(),
+					month:endMonth,
+					day:endDay,
+				}
+				
+				return returnData
+			},
+			//	2020-08-01
+			getweek(date) {
+				let weeks = [];
+				let dates = this.getDates(date);
+				// let len = Math.ceil(dates.weeks.length / 7);
+				// for (let i = 0; i < len; i++) {
+					// weeks.push(dates.weeks.slice(i * 7, 7 + (i * 7)));
+				// }
+				// dates.weeks = weeks
+				return dates;
+			},
+			getDates(date) {
+				let dates = {
+					year: date.Year,
+					month: date.Month,
+					firstDay: new Date(date.Year, date.Month, 1).getDay(),
+					lastDay: new Date(date.Year, date.Month + 1, 0).getDay(),
+					endDate: new Date(date.Year, date.Month + 1, 0).getDate(),
+					weeks: []
+				}
+				
+				//计算上月日期
+				for (let i = dates.firstDay; i > 0; i--) {
+					let dateinfo = {};
+					dateinfo.date = new Date(date.Year, date.Month, -i + 1).getDate();
+					dateinfo.isClick = false;
+					dates.weeks.push(dateinfo);
+				}
+				//计算本月日期
+				for (let i = 1; i <= new Date(date.Year, date.Month + 1, 0).getDate(); i++) {
+					let nowisClick = true;
+					let dateinfo = {};
+					dateinfo.date = i;
+					if (this.dateType == 'dateCustom') {
+						nowisClick = false;
+						if (this.dateCustom[dates.year] && this.dateCustom[dates.year][dates.month]) {
+							for (let j = 0; j < this.dateCustom[dates.year][dates.month].length; j++) {
+								if (this.dateCustom[dates.year][dates.month][j] == i) {
+									nowisClick = true;
+								}
+							}
+						}
+					}
+					dateinfo.isClick = nowisClick;
+					dates.weeks.push(dateinfo);
+				}
+				//计算下月日期
+				let len = 7 - dates.lastDay;
+				if ((42 - dates.weeks.length) >= 7) {
+					len += 7;
+				}
+				for (let i = 1; i < len; i++) {
+					let dateinfo = {};
+					dateinfo.date = i;
+					dateinfo.isClick = false;
+					dates.weeks.push(dateinfo);
+				}
+				return dates;
+			
+			},
+			
+		}
+			
+	}
+</script>
+
+<style lang="scss">
+.riliWrapper {
+	width: 100%;
+	// height: 499rpx;
+	// background-color: #9bf;
+	// padding: 0 5%;
+	display: flex;
+	justify-content: center;
+	.riliWrapperBox {
+		width: 90%;
+		// height: 499rpx;
+		// background-color: #9bf;
+	}
+	//	日历
+	.signWrapperCalendar {
+		margin-top: 30rpx;
+		
+		width: 100%;
+		border: 3rpx solid #9bf;
+		.signWrapperCalendarBox {
+			width: 100%;
+			// height: 499rpx;
+			background: #FFFFFF;
+			border-radius: 10rpx;
+			// background-color: #9bf;
+			.signWrapperCalendarBoxTop {
+				width: 100%;
+				height: 72rpx;
+				// background-color: red;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-bottom: 2rpx solid #EFEFEF;
+			}
+			
+			.signWrapperCalendarBoxBit {
+				width: 100%;
+				height: 2rpx;
+				border: 2rpx solid #EFEFEF;
+	
+			}
+			
+			.signWrapperCalendarBoxCenter {
+				width: 100%;
+				height: 425rpx;
+				// background-color: #fff;
+				// padding: 30rpx 30rpx;
+				padding: 30rpx 0rpx;
+				display: flex;
+				justify-content: center;
+				.signWrapperCalendarBoxCenterBox {
+					width: 90%;
+					height: 100%;
+					// background-color: #9000FF;
+					
+					.signWrapperCalendarBoxCenterBoxTop {
+						.week-number {
+						    background: #fff;
+						    padding: 0 1%;
+						    span {
+						        display: inline-block;
+						        text-align: center;
+						        height: 40px;
+						        line-height: 40px;
+						        width: 14.2857143%;
+								color: #333333;
+						    }
+						}
+					}
+					
+					.signWrapperCalendarBoxCenterBoxFooter {
+						width: 100%;
+						// hei
+						// background-color: red;
+						.each-day {
+						    position: relative;
+						    display: inline-block;
+							// display: flex;
+							// justify-content: flex-start;
+						    text-align: center;
+						    vertical-align: middle;
+						    width: 14.28%;
+						    font-size: 25rpx;
+						    height: 50rpx;
+						    margin-top:4rpx;
+						    padding-top:4rpx;
+							.eachDayBox {
+								width: 100%;
+								height: 100%;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+								
+								.eachDayBoxBox {
+									width: 36rpx;
+									height: 36rpx;
+									// background: #FCEEE0;
+									border-radius: 50%;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+								}
+	
+							}
+							//
+							.eachDayBoxCheck {
+								width: 100%;
+								height: 100%;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+								
+								.eachDayBoxBox {
+									width: 36rpx;
+									height: 36rpx;
+									background: #FCEEE0;
+									border-radius: 50%;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									color: red;
+								}
+							
+							}
+							//
+						}
+					}
+				}
+			}
+			
+			
+			
+		}
+	
+	}
+}
+</style>

components/tale-calendar/calendar.vue

@@ -0,0 +1,315 @@
+<template>
+	<view class="content">
+		<view>
+			<view class="flex year-month">
+				<view @click="prevMonth"><</view>
+				<view>
+					<picker mode="date" fields="month" @change="monthChange">
+						<text class="bold">{{time.year}} . {{time.month + 1}}</text>
+					</picker>
+				</view>
+				<view @click="nextMonth">></view>
+			</view>
+			<view class="flex">
+				<view class="flex-item flex" v-for="item in weeks" >
+					<text class="week">{{item}}</text>
+				</view>
+			</view>
+			<view class="flex-wrap">
+				<template v-for="item in visibleDays" :Key="item.day">
+					<view class="day-box flex-column">
+						<text
+							class="day"
+							@click="clickDate(item.day)"
+							:style="[
+							isToday(item.day) && todayObj,
+							isClick(item.day) && selectedObj,
+						]"
+							:class="[
+							{selected: isClick(item.day)},
+							{notCurrentMonth: !isCurrentMonth(item.day)}
+						]"
+						>{{item.day | dayFilter}}</text>
+						<template v-if="showText">
+							<text
+								v-if="isCurrentMonth(item.day)"
+								class="day-text"
+								:style="{color: textColor}"
+							>
+								{{item.data.value || ''}}
+							</text>
+						</template>
+						<template v-if="showDot">
+							<text
+								v-if="isCurrentMonth(item.day) && item.data.dot && item.data.active"
+								class="day-dot"
+							></text>
+							<text
+								v-if="isCurrentMonth(item.day) && item.data.dot && !item.data.active"
+								class="day-dot dot-gray"
+							></text>
+						</template>
+					</view>
+				</template>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	const getYearMonthDay = (date) => {
+		let year = date.getFullYear();
+		let month = date.getMonth();
+		let day = date.getDate();
+		return {
+			year,
+			month,
+			day
+		}
+	}
+	const getDate = (year, month, day) => {
+		return new Date(year, month, day)
+	}
+
+	export default {
+		data() {
+			return {
+				iArr: [1,2,3,4,5,6],
+				jArr: [1,2,3,4,5,6,7],
+				value: new Date(),
+				weeks: ['日', '一', '二', '三', '四', '五', '六'],
+				click_time: {},
+				month_data: this.extraData,
+				time: this.defaultTime,
+				todayObj: {
+					background: this.bgColor,
+					color: '#ffffff'
+				},
+				selectedObj: {
+					background: this.selColor,
+					color: '#ffffff'
+				}
+			}
+		},
+		props: {
+			bgColor: {
+				type: String,
+				default: '#4198f8'
+			},
+			selColor: {
+				type: String,
+				default: '#4198f8'
+			},
+			textColor: {
+				type: String,
+				default: '#4198f8'
+			},
+			defaultTime: {
+				type: Object,
+				default: ()=> {
+					return {
+						year: getYearMonthDay(new Date()).year,
+						month: getYearMonthDay(new Date()).month
+					}
+				}
+			},
+			extraData: {
+				type: Array,
+				default: ()=> {
+					return [] // {date: '2020-6-3', value: '签到', dot: true, active: true}
+				}
+			},
+			showText: {
+				type: Boolean,
+				default: true
+			},
+			showDot: {
+				type: Boolean,
+				default: false
+			}
+		},
+		filters: {
+			dayFilter(val) {
+				return val.getDate();
+			}
+		},
+    watch: {
+      extraData:{
+        handler(newV, oldV) {
+          if (newV !== oldV) {
+            this.month_data = newV
+          }
+        },
+        deep:true
+      }
+    },
+		computed: {
+			visibleDays() { // 计算当月展示日期
+				let {time: {year, month}, month_data} = this;
+				let currentFirstDay = getDate(year, month, 1);
+				let week = currentFirstDay.getDay();
+				let startDay = currentFirstDay - week * 60 * 60 * 1000 * 24;
+				let arr = [];
+				for(let i = 0; i < 42; i++) {
+					let day = new Date(startDay + i * 60 * 60 * 1000 * 24);
+					let {year: dayY, month: dayM, day: dayD} = getYearMonthDay(day);
+					let data = {};
+					for (let item of month_data) {
+						let dateString = item.date;
+						let dateArr = dateString.indexOf('-') !== -1
+							? dateString.split('-')
+							: dateString.indexOf('/') !== -1
+								? dateString.split('/')
+								: [];
+						if (dateArr.length === 3
+							&& Number(dateArr[0]) === Number(dayY)
+							&& Number(dateArr[1]) === (Number(dayM) + 1)
+							&& Number(dateArr[2]) === Number(dayD)) {
+							data = item
+						}
+					}
+					let obj = {
+						day,
+						data
+					}
+					arr.push(obj)
+				}
+				return arr
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			isCurrentMonth(date) { // 是否当月
+				let {year, month} = getYearMonthDay(getDate(this.time.year, this.time.month, 1));
+				let {year: y, month:m} = getYearMonthDay(date);
+				return year === y && month === m;
+			},
+			isToday(date) { // 是否当天
+				let {year, month, day} = getYearMonthDay(new Date());
+				let {year: y, month: m, day: d} = getYearMonthDay(date);
+				return year === y && month === m && day === d;
+			},
+			isClick(date) { // 是否是点击日期
+				let {click_time} = this;
+				if (!click_time.day) return false;
+				let {year, month, day} = getYearMonthDay(getDate(click_time.year, click_time.month, click_time.day));
+				let {year: y, month: m, day: d} = getYearMonthDay(date);
+				return year === y && month === m && day === d;
+			},
+			clickDate(date) { // 点击日期
+				let {year, month, day} = getYearMonthDay(date);
+				this.click_time = {year, month, day};
+				this.$emit('calendarTap', {year, month, day})
+			},
+			prevMonth() { // 上一月
+				let { time: { year, month} } = this;
+				let d = getDate(year, month, 1);
+				d.setMonth(d.getMonth() - 1);
+				this.time = getYearMonthDay(d);
+				// this.click_time = {};
+        this.$emit('monthTap', getYearMonthDay(d))
+			},
+			nextMonth() { // 下一月
+				// 获取当前的年月的日期
+				let { time: { year, month} } = this;
+				let d = getDate(year, month, 1);
+				d.setMonth(d.getMonth() + 1);
+				this.time = getYearMonthDay(d);
+				// this.click_time = {};
+        this.$emit('monthTap', getYearMonthDay(d))
+			},
+			monthChange(e) {
+				let {value} = e.detail;
+				let timeArr = value.split('-');
+				this.time = {year: timeArr[0], month: timeArr[1] - 1, day: 1};
+        this.$emit('monthTap',{year: timeArr[0], month: timeArr[1] - 1, day: 1})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.content {
+		width: 750rpx;
+		margin: 0 auto;
+	}
+	.flex {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-direction: row;
+	}
+	.flex-wrap {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		flex-direction: row;
+	}
+	.flex-column {
+		width: 100%;
+		height: 106rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center;
+	}
+	.flex-item {
+		flex: 1;
+	}
+	.bold {
+		font-weight: bold;
+		font-size: 28rpx;
+	}
+	.year-month {
+		width: 400rpx;
+		margin: 0 auto 20rpx;
+		padding-top: 20rpx;
+	}
+	.week {
+		margin: 20rpx 20rpx 40rpx;
+		width: 60rpx;
+		text-align: center;
+		color: #999999;
+	}
+	.day-box {
+		width: 100rpx;
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+	}
+	.day {
+		width: 60rpx;
+		height: 60rpx;
+		line-height: 60rpx;
+		border-radius: 50%;
+		text-align: center;
+		font-weight: 600;
+	}
+	.day-text {
+		font-size: 22rpx;
+	}
+	.day-dot {
+		width: 12rpx;
+		height: 12rpx;
+		border-radius: 50%;
+		background: #4cd964;
+		&.dot-gray {
+			background: gray;
+		}
+	}
+	.today, .selected {
+		background: #4198f8;
+		color: #ffffff;
+	}
+	.notCurrentMonth {
+		color: #999999;
+		pointer-events: none;
+		background: none;
+	}
+</style>

package.json

@@ -1,11 +1,38 @@
 {
-    "id": "mao-scroll",
-    "name": "MaoUI 文字向上滚动 多行滚动 多行滑动",
-    "version": "1.2",
-    "description": "多行文字向上滚动自动消失 适用于公告 新闻 动态 中将结果 最新订单等场景",
-    "keywords": [
-        "公告",
-        "订单",
-        "新闻"
-    ]
-}
+	"name": "your extension name",
+	"description": "your extension description",
+	"displayName": "your extension display name",
+	"version": "0.0.0",
+	"publisher": "your name",
+	"engines": {
+		"HBuilderX": "^2.7.0"
+	},
+	"categories": [
+		"Other"
+	],
+	"main": "./extension",
+	"activationEvents": [
+		"onCommand:extension.helloWorld"
+	],
+	"contributes": {
+		"commands": [{
+			"command": "extension.helloWorld",
+			"title": "Hello World"
+		}],
+		"menus": {
+			"editor/context": [{
+					"command": "extension.helloWorld",
+					"group": "z_commands",
+					"when": "editorTextFocus"
+				},
+				{
+					"group": "z_commands"
+				}
+			]
+		}
+	},
+	"extensionDependencies": [
+		"plugin-manager"
+	],
+	"dependencies": {}
+}

pages/clock/the_clock_record.vue

@@ -1,11 +1,13 @@
 <template>
 	<view>
+				<!-- <d-rili></d-rili> -->
+				<calendar showDot='true' :extraData='extraData' bgColor='#22C572' @monthTap='monthTap'></calendar>
 		<view class="uni-container">
-			<view class="top">
+			<!-- <view class="top">
 				<view class="center">月份</view>
 				<view @click='show=true'>{{createDate}}</view>
 				<u-picker v-model="show" mode="time" @confirm='dateChange($event)' :params="params"></u-picker>
-			</view>
+			</view> -->
 			<uni-table border stripe emptyText="暂无更多数据">
 				<!-- 表头行 -->
 				<uni-tr>
@@ -49,9 +51,16 @@
 </template>
 
 <script>
+	import dRili from '@/components/d-rili/d-rili.vue';
+	import calendar from '@/components/tale-calendar/calendar.vue';
 	export default {
+		components:{
+			dRili,
+			calendar
+		},
 		data() {
 			return {
+				extraData:[{date: '2022-10-10', value: '签到', dot: true, active: true}],
 				isSHowBtn: true,
 				show: false,
 				tableData: [],
@@ -82,6 +91,7 @@
 			this.createDate = _day.getFullYear() + "." + (_day.getMonth() + 1);
 			this.createDate1 = _day.getFullYear() + "-" + (_day.getMonth() + 1);
 		},
+		
 		onReachBottom() { //上拉触底函数
 			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
 				this.currentPage += 1
@@ -89,6 +99,10 @@
 			this.getData()
 		},
 		methods: {
+			monthTap(e){
+				this.createDate1 = e.year + "-" + e.month
+				console.log(e)
+			},
 			dateChange(e) {
 				console.log(e)
 				this.createDate = e.year + "." + e.month

pages/leave/the_leave.vue

@@ -90,7 +90,9 @@
 </template>
 
 <script>
+	
 	export default {
+		
 		data() {
 			return {
 				

pages/leave/the_leave_record.vue

@@ -1,5 +1,6 @@
 <template>
 	<view>
+		<d-rili></d-rili>
 		<view class='wrap' v-for="(item, index) in tableData" :key="index">
 			<view class="wenzi audit1" v-if="item.approveStatus == '待人事审核' || item.approveStatus == '待主管审核' ">审核中</view>
 			<view class="wenzi audit2" v-if="item.status == '已通过'">已通过</view>
@@ -60,7 +61,11 @@
 </template>
 
 <script>
+	import dRili from '@/components/d-rili/d-rili.vue';
 	export default {
+		components:{
+			dRili
+		},
 		data() {
 			return {
 				pageSize: 10,