diff --git a/components/patched-calendar/header.vue b/components/patched-calendar/header.vue
new file mode 100644
index 0000000..afb9f76
--- /dev/null
+++ b/components/patched-calendar/header.vue
@@ -0,0 +1,109 @@
+<template>
+	<view class="u-calendar-header u-border-bottom">
+		<text
+			class="u-calendar-header__title"
+			v-if="showTitle"
+		>{{ title }}</text>
+		<text
+			class="u-calendar-header__subtitle"
+			v-if="showSubtitle"
+		>{{ subtitle }}</text>
+		<view class="u-calendar-header__weekdays">
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[0] }}</text>
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[1] }}</text>
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[2] }}</text>
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[3] }}</text>
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[4] }}</text>
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[5] }}</text>
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[6] }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mpMixin } from 'uview-plus/libs/mixin/mpMixin';
+	import { mixin } from 'uview-plus/libs/mixin/mixin';
+	export default {
+		name: 'u-calendar-header',
+		mixins: [mpMixin, mixin],
+		props: {
+			// 标题
+			title: {
+				type: String,
+				default: ''
+			},
+			// 副标题
+			subtitle: {
+				type: String,
+				default: ''
+			},
+			// 是否显示标题
+			showTitle: {
+				type: Boolean,
+				default: true
+			},
+			// 是否显示副标题
+			showSubtitle: {
+				type: Boolean,
+				default: true
+			},
+			// 星期文本
+			weekText: {
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
+		},
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			name() {
+
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.u-calendar-header {
+		display: flex;
+		flex-direction: column;
+		padding-bottom: 4px;
+
+		&__title {
+			font-size: 16px;
+			color: $u-main-color;
+			text-align: center;
+			height: 42px;
+			line-height: 42px;
+			font-weight: bold;
+		}
+
+		&__subtitle {
+			font-size: 14px;
+			color: $u-main-color;
+			height: 40px;
+			text-align: center;
+			line-height: 40px;
+			font-weight: bold;
+		}
+
+		&__weekdays {
+			@include flex;
+			justify-content: space-between;
+
+			&__weekday {
+				font-size: 13px;
+				color: $u-main-color;
+				line-height: 30px;
+				flex: 1;
+				text-align: center;
+			}
+		}
+	}
+</style>
diff --git a/components/patched-calendar/month.vue b/components/patched-calendar/month.vue
new file mode 100644
index 0000000..aafaaba
--- /dev/null
+++ b/components/patched-calendar/month.vue
@@ -0,0 +1,632 @@
+<template>
+	<view class="u-calendar-month-wrapper" ref="u-calendar-month-wrapper">
+		<view v-for="(item, index) in months" :key="index" :class="[`u-calendar-month-${index}`]"
+			:ref="`u-calendar-month-${index}`" :id="`month-${index}`">
+			<text v-if="index !== 0" class="u-calendar-month__title">{{ monthTitle(item) }}</text>
+			<view class="u-calendar-month__days">
+				<view v-if="showMark" class="u-calendar-month__days__month-mark-wrapper">
+					<text class="u-calendar-month__days__month-mark-wrapper__text">{{ item.month }}</text>
+				</view>
+				<view class="u-calendar-month__days__day" v-for="(item1, index1) in item.date" :key="index1"
+					:style="[dayStyle(index, index1, item1)]" @tap="clickHandler(index, index1, item1)"
+					:class="[item1.selected && 'u-calendar-month__days__day__select--selected']">
+					<view class="u-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]">
+						<text class="u-calendar-month__days__day__select__info"
+							:class="[(item1.disabled || isForbid(item1) ) ? 'u-calendar-month__days__day__select__info--disabled' : '']"
+							:style="[textStyle(item1)]">{{ item1.day }}</text>
+						<text v-if="getBottomInfo(index, index1, item1)"
+							class="u-calendar-month__days__day__select__buttom-info"
+							:class="[(item1.disabled || isForbid(item1) ) ? 'u-calendar-month__days__day__select__buttom-info--disabled' : '']"
+							:style="[textStyle(item1)]">{{ getBottomInfo(index, index1, item1) }}</text>
+						<text v-if="item1.dot" class="u-calendar-month__days__day__select__dot"></text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	// 由于nvue不支持百分比单位，需要查询宽度来计算每个日期的宽度
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	import { mpMixin } from 'uview-plus/libs/mixin/mpMixin';
+	import { mixin } from 'uview-plus/libs/mixin/mixin';
+	import { addUnit, toast, sleep } from 'uview-plus/libs/function/index';
+	import { colorGradient } from 'uview-plus/libs/function/colorGradient';
+	import test from 'uview-plus/libs/function/test';
+	import defProps from 'uview-plus/libs/config/props';
+	import dayjs from 'uview-plus/components/u-datetime-picker/dayjs.esm.min.js';
+	import { t } from 'uview-plus/libs/i18n'
+	export default {
+		name: 'u-calendar-month',
+		mixins: [mpMixin, mixin],
+		props: {
+			// 是否显示月份背景色
+			showMark: {
+				type: Boolean,
+				default: true
+			},
+			// 主题色，对底部按钮和选中日期有效
+			color: {
+				type: String,
+				default: '#3c9cff'
+			},
+			// 月份数据
+			months: {
+				type: Array,
+				default: () => []
+			},
+			// 日期选择类型
+			mode: {
+				type: String,
+				default: 'single'
+			},
+			// 日期行高
+			rowHeight: {
+				type: [String, Number],
+				default: 58
+			},
+			// mode=multiple时，最多可选多少个日期
+			maxCount: {
+				type: [String, Number],
+				default: Infinity
+			},
+			// mode=range时，第一个日期底部的提示文字
+			startText: {
+				type: String,
+				default: '开始'
+			},
+			// mode=range时，最后一个日期底部的提示文字
+			endText: {
+				type: String,
+				default: '结束'
+			},
+			// 默认选中的日期，mode为multiple或range是必须为数组格式
+			defaultDate: {
+				type: [Array, String, Date],
+				default: null
+			},
+			// 最小的可选日期
+			minDate: {
+				type: [String, Number],
+				default: 0
+			},
+			// 最大可选日期
+			maxDate: {
+				type: [String, Number],
+				default: 0
+			},
+			// 如果没有设置maxDate，则往后推多少个月
+			maxMonth: {
+				type: [String, Number],
+				default: 2
+			},
+			// 是否为只读状态，只读状态下禁止选择日期
+			readonly: {
+				type: Boolean,
+				default: () => defProps.calendar.readonly
+			},
+			// 日期区间最多可选天数，默认无限制，mode = range时有效
+			maxRange: {
+				type: [Number, String],
+				default: Infinity
+			},
+			// 范围选择超过最多可选天数时的提示文案，mode = range时有效
+			rangePrompt: {
+				type: String,
+				default: ''
+			},
+			// 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
+			showRangePrompt: {
+				type: Boolean,
+				default: true
+			},
+			// 是否允许日期范围的起止时间为同一天，mode = range时有效
+			allowSameDay: {
+				type: Boolean,
+				default: false
+			},
+			forbidDays: {
+				type: Array,
+				default: () => []
+			},
+			forbidDaysToast: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				// 每个日期的宽度
+				width: 0,
+				// 当前选中的日期item
+				item: {},
+				selected: []
+			}
+		},
+		watch: {
+			selectedChange: {
+				immediate: true,
+				handler(n) {
+					this.setDefaultDate()
+				}
+			}
+		},
+		computed: {
+			// 多个条件的变化，会引起选中日期的变化，这里统一管理监听
+			selectedChange() {
+				return [this.minDate, this.maxDate, this.defaultDate]
+			},
+			// 性能补丁：选中日期的 O(1) 哈希索引。原实现每次点击要对全部 396+ 个格子
+			// 执行 selected.some(dateSame)（dayjs 逐个比对），复杂度 O(格子数 × 选中天数)，
+			// 选中范围越大越卡。selected 为 YYYY-MM-DD 字符串数组，可直接进 Set。
+			selectedSet() {
+				return new Set(this.selected)
+			},
+			// 性能补丁：range 模式选中区间的时间戳边界，避免每格多次 dayjs 解析比较
+			selectedRange() {
+				if (this.mode === 'range' && this.selected.length >= 2) {
+					const first = this.selected[0]
+					const last = this.selected[this.selected.length - 1]
+					return {
+						first,
+						last,
+						firstTs: dayjs(first).valueOf(),
+						lastTs: dayjs(last).valueOf()
+					}
+				}
+				return null
+			},
+			dayStyle(index1, index2, item) {
+				return (index1, index2, item) => {
+					const style = {}
+					let week = item.week
+					// 不进行四舍五入的形式保留2位小数
+					const dayWidth = Number(parseFloat(this.width / 7).toFixed(3).slice(0, -1))
+					// 得出每个日期的宽度
+					// #ifdef APP-NVUE
+					style.width = addUnit(dayWidth, 'px')
+					// #endif
+					style.height = addUnit(this.rowHeight, 'px')
+					if (index2 === 0) {
+						// 获取当前为星期几，如果为0，则为星期天，减一为每月第一天时，需要向左偏移的item个数
+						week = (week === 0 ? 7 : week) - 1
+						style.marginLeft = addUnit(week * dayWidth, 'px')
+					}
+					if (this.mode === 'range') {
+						// 之所以需要这么写，是因为DCloud公司的iOS客户端导致的bug
+						style.paddingLeft = 0
+						style.paddingRight = 0
+						style.paddingBottom = 0
+						style.paddingTop = 0
+					}
+					return style
+				}
+			},
+			daySelectStyle() {
+				return (index1, index2, item) => {
+					let date = dayjs(item.date).format("YYYY-MM-DD"),
+						style = {}
+					// 判断date是否在selected数组中（哈希查找替代逐个 dayjs 比对）
+					if (this.selectedSet.has(date)) {
+						style.backgroundColor = this.color
+					}
+					if (this.mode === 'single') {
+						if (date === this.selected[0]) {
+							// 因为需要对nvue的兼容，只能这么写，无法缩写，也无法通过类名控制等等
+							style.borderTopLeftRadius = '3px'
+							style.borderBottomLeftRadius = '3px'
+							style.borderTopRightRadius = '3px'
+							style.borderBottomRightRadius = '3px'
+						}
+					} else if (this.mode === 'range') {
+						if (this.selected.length >= 2) {
+							// 第一个日期设置左上角和左下角的圆角
+							if (date === this.selectedRange.first) {
+								style.borderTopLeftRadius = '3px'
+								style.borderBottomLeftRadius = '3px'
+							}
+							// 最后一个日期设置右上角和右下角的圆角
+							if (date === this.selectedRange.last) {
+								style.borderTopRightRadius = '3px'
+								style.borderBottomRightRadius = '3px'
+							}
+							// 处于第一和最后一个之间的日期，背景色设置为浅色（时间戳比较替代 dayjs 对象比较）
+							const ts = dayjs(date).valueOf()
+							if (ts > this.selectedRange.firstTs && ts < this.selectedRange.lastTs) {
+								style.backgroundColor = colorGradient(this.color, '#ffffff', 100)[90]
+								// 增加一个透明度，让范围区间的背景色也能看到底部的mark水印字符
+								style.opacity = 0.7
+							}
+						} else if (this.selected.length === 1) {
+							// 之所以需要这么写，是因为uni-app的iOS客户端的bug
+							// 进行还原操作，否则在nvue的iOS，uni-app有bug，会导致诡异的表现
+							style.borderTopLeftRadius = '3px'
+							style.borderBottomLeftRadius = '3px'
+						}
+					} else {
+						if (this.selectedSet.has(date)) {
+							style.borderTopLeftRadius = '3px'
+							style.borderBottomLeftRadius = '3px'
+							style.borderTopRightRadius = '3px'
+							style.borderBottomRightRadius = '3px'
+						}
+					}
+					return style
+				}
+			},
+			// 某个日期是否被选中
+			textStyle() {
+				return (item) => {
+					const date = dayjs(item.date).format("YYYY-MM-DD"),
+						style = {}
+					// 选中的日期，提示文字设置白色
+					if (this.selectedSet.has(date)) {
+						style.color = '#ffffff'
+					}
+					if (this.mode === 'range' && this.selectedRange) {
+						// 如果是范围选择模式，第一个和最后一个之间的日期，文字颜色设置为高亮的主题色
+						const ts = dayjs(date).valueOf()
+						if (ts > this.selectedRange.firstTs && ts < this.selectedRange.lastTs) {
+							style.color = this.color
+						}
+					}
+					return style
+				}
+			},
+			// 获取底部的提示文字
+			getBottomInfo() {
+				return (index1, index2, item) => {
+					const date = dayjs(item.date).format("YYYY-MM-DD")
+					const bottomInfo = item.bottomInfo
+					// 当为日期范围模式时，且选择的日期个数大于0时
+					if (this.mode === 'range' && this.selected.length > 0) {
+						if (this.selected.length === 1) {
+							// 选择了一个日期时，如果当前日期为数组中的第一个日期，则显示底部文字为“开始”
+							if (date === this.selected[0]) return this.startText
+							else return bottomInfo
+						} else {
+							// 如果数组中的日期大于2个时，第一个和最后一个显示为开始和结束日期
+							if (date === this.selected[0] && date === this.selected[1]) {
+								// 如果长度为2，且第一个等于第二个日期，则提示语放在同一个item中
+								return `${this.startText}/${this.endText}`
+							} else if (date === this.selected[0]) {
+								return this.startText
+							} else if (date === this.selected[this.selected.length - 1]) {
+								return this.endText
+							} else {
+								return bottomInfo
+							}
+						}
+					} else {
+						return bottomInfo
+					}
+				}
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		emits: ['monthSelected', 'updateMonthTop'],
+		methods: {
+			init() {
+				// 初始化默认选中
+				this.$emit('monthSelected', this.selected)
+				this.$nextTick(() => {
+					// 这里需要另一个延时，因为获取宽度后，会进行月份数据渲染，只有渲染完成之后，才有真正的高度
+					// 因为nvue下，$nextTick并不是100%可靠的
+					sleep(10).then(() => {
+						this.getWrapperWidth()
+						this.getMonthRect()
+					})
+				})
+			},
+			monthTitle(item) {
+				if (uni.getLocale() == 'zh-Hans' || uni.getLocale() == 'zh-Hant') {
+					return item.year + '年' + (item.month < 10 ? '0' + item.month : item.month) + '月'
+				} else {
+					return (item.month < 10 ? '0' + item.month : item.month) + '/' + item.year
+				}
+			},
+			isForbid(item) {
+				let date = dayjs(item.date).format("YYYY-MM-DD")
+				if (this.mode !== 'range' && this.forbidDays.includes(date)) {
+					return true
+				}
+				return false
+			},
+			// 判断两个日期是否相等
+			dateSame(date1, date2) {
+				return dayjs(date1).isSame(dayjs(date2))
+			},
+			// 获取月份数据区域的宽度，因为nvue不支持百分比，所以无法通过css设置每个日期item的宽度
+			getWrapperWidth() {
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['u-calendar-month-wrapper'], res => {
+					this.width = res.size.width
+				})
+				// #endif
+				// #ifndef APP-NVUE
+				this.$uGetRect('.u-calendar-month-wrapper').then(size => {
+					this.width = size.width
+				})
+				// #endif
+			},
+			getMonthRect() {
+				// 获取每个月份数据的尺寸，用于父组件在scroll-view滚动事件中，监听当前滚动到了第几个月份
+				const promiseAllArr = this.months.map((item, index) => this.getMonthRectByPromise(
+					`u-calendar-month-${index}`))
+				// 一次性返回
+				Promise.all(promiseAllArr).then(
+					sizes => {
+						let height = 1
+						const topArr = []
+						for (let i = 0; i < this.months.length; i++) {
+							// 添加到months数组中，供scroll-view滚动事件中，判断当前滚动到哪个月份
+							topArr[i] = height
+							height += sizes[i].height
+						}
+						// 由于微信下，无法通过this.months[i].top的形式(引用类型)去修改父组件的month的top值，所以使用事件形式对外发出
+						this.$emit('updateMonthTop', topArr)
+					})
+			},
+			// 获取每个月份区域的尺寸
+			getMonthRectByPromise(el) {
+				// #ifndef APP-NVUE
+				// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://uview-plus.jiangruyi.com/js/getRect.html
+				// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
+				return new Promise(resolve => {
+					this.$uGetRect(`.${el}`).then(size => {
+						resolve(size)
+					})
+				})
+				// #endif
+
+				// #ifdef APP-NVUE
+				// nvue下，使用dom模块查询元素高度
+				// 返回一个promise，让调用此方法的主体能使用then回调
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs[el][0], res => {
+						resolve(res.size)
+					})
+				})
+				// #endif
+			},
+			// 点击某一个日期
+			clickHandler(index1, index2, item) {
+				if (this.readonly) {
+					return;
+				}
+				this.item = item
+				const date = dayjs(item.date).format("YYYY-MM-DD")
+				if (item.disabled) return
+				if (this.isForbid(item)) {
+					uni.showToast({
+						title: this.forbidDaysToast
+					})
+					return
+				}
+				// selected 是 YYYY-MM-DD 字符串数组，浅拷贝即可，避免深度克隆的递归开销
+				let selected = this.selected.slice()
+				if (this.mode === 'single') {
+					// 单选情况下，让数组中的元素为当前点击的日期
+					selected = [date]
+				} else if (this.mode === 'multiple') {
+					if (selected.some(item => this.dateSame(item, date))) {
+						// 如果点击的日期已在数组中，则进行移除操作，也就是达到反选的效果
+						const itemIndex = selected.findIndex(item => item === date)
+						selected.splice(itemIndex, 1)
+					} else {
+						// 如果点击的日期不在数组中，且已有的长度小于总可选长度时，则添加到数组中去
+						if (selected.length < this.maxCount) selected.push(date)
+					}
+				} else {
+					// 选择区间形式
+					if (selected.length === 0 || selected.length >= 2) {
+						// 如果原来就为0或者大于2的长度，则当前点击的日期，就是开始日期
+						selected = [date]
+					} else if (selected.length === 1) {
+						// 如果已经选择了开始日期
+						const existsDate = selected[0]
+						// 如果当前选择的日期小于上一次选择的日期，则当前的日期定为开始日期
+						if (dayjs(date).isBefore(existsDate)) {
+							selected = [date]
+						} else if (dayjs(date).isAfter(existsDate)) {
+							// 当前日期减去最大可选的日期天数，如果大于起始时间，则进行提示
+							if(dayjs(dayjs(date).subtract(this.maxRange, 'day')).isAfter(dayjs(selected[0])) && this.showRangePrompt) {
+								if(this.rangePrompt) {
+									toast(this.rangePrompt)
+								} else {
+									toast(t("up.calendar.daysExceed", { days: this.maxRange }))
+								}
+								return
+							}
+							// 如果当前日期大于已有日期，将当前的添加到数组尾部
+							selected.push(date)
+							const startDate = selected[0]
+							const endDate = selected[1]
+							const arr = []
+							let i = 0
+							do {
+								// 将开始和结束日期之间的日期添加到数组中
+								arr.push(dayjs(startDate).add(i, 'day').format("YYYY-MM-DD"))
+								i++
+								// 累加的日期小于结束日期时，继续下一次的循环
+							} while (dayjs(startDate).add(i, 'day').isBefore(dayjs(endDate)))
+							// 为了一次性修改数组，避免computed中多次触发，这里才用arr变量一次性赋值的方式，同时将最后一个日期添加近来
+							arr.push(endDate)
+							selected = arr
+						} else {
+							// 选择区间时，只有一个日期的情况下，且不允许选择起止为同一天的话，不允许选择自己
+							if (selected[0] === date && !this.allowSameDay) return
+							selected.push(date)
+						}
+					}
+				}
+				this.setSelected(selected)
+			},
+			// 设置默认日期
+			setDefaultDate() {
+				if (!this.defaultDate) {
+					// 如果没有设置默认日期，则将当天日期设置为默认选中的日期
+					const selected = [dayjs().format("YYYY-MM-DD")]
+					return this.setSelected(selected, false)
+				}
+				let defaultDate = []
+				const minDate = this.minDate || dayjs().format("YYYY-MM-DD")
+				const maxDate = this.maxDate || dayjs(minDate).add(this.maxMonth - 1, 'month').format("YYYY-MM-DD")
+				if (this.mode === 'single') {
+					// 单选模式，可以是字符串或数组，Date对象等
+					if (!test.array(this.defaultDate)) {
+						defaultDate = [dayjs(this.defaultDate).format("YYYY-MM-DD")]
+					} else {
+						defaultDate = [this.defaultDate[0]]
+					}
+				} else {
+					// 如果为非数组，则不执行
+					if (!test.array(this.defaultDate)) return
+					defaultDate = this.defaultDate
+				}
+				// 过滤用户传递的默认数组，取出只在可允许最大值与最小值之间的元素
+				defaultDate = defaultDate.filter(item => {
+					return dayjs(item).isAfter(dayjs(minDate).subtract(1, 'day')) && dayjs(item).isBefore(dayjs(
+						maxDate).add(1, 'day'))
+				})
+				this.setSelected(defaultDate, false)
+			},
+			setSelected(selected, event = true) {
+				this.selected = selected
+				event && this.$emit('monthSelected', this.selected,'tap')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.u-calendar-month-wrapper {
+		margin-top: 4px;
+	}
+
+	.u-calendar-month {
+
+		&__title {
+			display: flex;
+			flex-direction: column;
+			font-size: 14px;
+			line-height: 42px;
+			height: 42px;
+			color: $u-main-color;
+			text-align: center;
+			font-weight: bold;
+		}
+
+		&__days {
+			position: relative;
+			@include flex;
+			flex-wrap: wrap;
+
+			&__month-mark-wrapper {
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				@include flex;
+				justify-content: center;
+				align-items: center;
+
+				&__text {
+					font-size: 155px;
+					color: rgba(231, 232, 234, 0.83);
+				}
+			}
+
+			&__day {
+				@include flex;
+				padding: 2px;
+				/* #ifndef APP-NVUE */
+				// vue下使用css进行宽度计算，因为某些安卓机会无法进行js获取父元素宽度进行计算得出，会有偏移
+				width: calc(100% / 7);
+				box-sizing: border-box;
+				/* #endif */
+
+				&__select {
+					flex: 1;
+					@include flex;
+					align-items: center;
+					justify-content: center;
+					position: relative;
+
+					&__dot {
+						width: 7px;
+						height: 7px;
+						border-radius: 100px;
+						background-color: $u-error;
+						position: absolute;
+						top: 12px;
+						right: 7px;
+					}
+
+					&__buttom-info {
+						color: $u-content-color;
+						text-align: center;
+						position: absolute;
+						bottom: 5px;
+						font-size: 10px;
+						text-align: center;
+						left: 0;
+						right: 0;
+
+						&--selected {
+							color: #ffffff;
+						}
+
+						&--disabled {
+							color: #cacbcd;
+						}
+					}
+
+					&__info {
+						text-align: center;
+						font-size: 16px;
+
+						&--selected {
+							color: #ffffff;
+						}
+
+						&--disabled {
+							color: #cacbcd;
+						}
+					}
+
+					&--selected {
+						background-color: $u-primary;
+						@include flex;
+						justify-content: center;
+						align-items: center;
+						flex: 1;
+						border-radius: 3px;
+					}
+
+					&--range-selected {
+						opacity: 0.3;
+						border-radius: 0;
+					}
+
+					&--range-start-selected {
+						border-top-right-radius: 0;
+						border-bottom-right-radius: 0;
+					}
+
+					&--range-end-selected {
+						border-top-left-radius: 0;
+						border-bottom-left-radius: 0;
+					}
+				}
+			}
+		}
+	}
+</style>
diff --git a/components/patched-calendar/props.js b/components/patched-calendar/props.js
new file mode 100644
index 0000000..87f019b
--- /dev/null
+++ b/components/patched-calendar/props.js
@@ -0,0 +1,169 @@
+import { defineMixin } from 'uview-plus/libs/vue'
+import defProps from 'uview-plus/libs/config/props.js'
+
+export const props = defineMixin({
+    props: {
+        // 日历顶部标题
+        title: {
+            type: String,
+            default: () => defProps.calendar.title
+        },
+        // 是否显示标题
+        showTitle: {
+            type: Boolean,
+            default: () => defProps.calendar.showTitle
+        },
+        // 是否显示副标题
+        showSubtitle: {
+            type: Boolean,
+            default: () => defProps.calendar.showSubtitle
+        },
+        // 日期类型选择，single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围
+        mode: {
+            type: String,
+            default: () => defProps.calendar.mode
+        },
+        // mode=range时，第一个日期底部的提示文字
+        startText: {
+            type: String,
+            default: () => defProps.calendar.startText
+        },
+        // mode=range时，最后一个日期底部的提示文字
+        endText: {
+            type: String,
+            default: () => defProps.calendar.endText
+        },
+        // 自定义列表
+        customList: {
+            type: Array,
+            default: () => defProps.calendar.customList
+        },
+        // 主题色，对底部按钮和选中日期有效
+        color: {
+            type: String,
+            default: () => defProps.calendar.color
+        },
+        // 最小的可选日期
+        minDate: {
+            type: [String, Number],
+            default: () => defProps.calendar.minDate
+        },
+        // 最大可选日期
+        maxDate: {
+            type: [String, Number],
+            default: () => defProps.calendar.maxDate
+        },
+        // 默认选中的日期，mode为multiple或range是必须为数组格式
+        defaultDate: {
+            type: [Array, String, Date, null],
+            default: () => defProps.calendar.defaultDate
+        },
+        // mode=multiple时，最多可选多少个日期
+        maxCount: {
+            type: [String, Number],
+            default: () => defProps.calendar.maxCount
+        },
+        // 日期行高
+        rowHeight: {
+            type: [String, Number],
+            default: () => defProps.calendar.rowHeight
+        },
+        // 日期格式化函数
+        formatter: {
+            type: [Function, null],
+            default: () => defProps.calendar.formatter
+        },
+        // 是否显示农历
+        showLunar: {
+            type: Boolean,
+            default: () => defProps.calendar.showLunar
+        },
+        // 是否显示月份背景色
+        showMark: {
+            type: Boolean,
+            default: () => defProps.calendar.showMark
+        },
+        // 确定按钮的文字
+        confirmText: {
+            type: String,
+            default: () => defProps.calendar.confirmText
+        },
+        // 确认按钮处于禁用状态时的文字
+        confirmDisabledText: {
+            type: String,
+            default: () => defProps.calendar.confirmDisabledText
+        },
+        // 是否显示日历弹窗
+        show: {
+            type: Boolean,
+            default: () => defProps.calendar.show
+        },
+        // 是否允许点击遮罩关闭日历
+        closeOnClickOverlay: {
+            type: Boolean,
+            default: () => defProps.calendar.closeOnClickOverlay
+        },
+        // 是否为只读状态，只读状态下禁止选择日期
+        readonly: {
+            type: Boolean,
+            default: () => defProps.calendar.readonly
+        },
+        // 	是否展示确认按钮
+        showConfirm: {
+            type: Boolean,
+            default: () => defProps.calendar.showConfirm
+        },
+        // 日期区间最多可选天数，默认无限制，mode = range时有效
+        maxRange: {
+            type: [Number, String],
+            default: () => defProps.calendar.maxRange
+        },
+        // 范围选择超过最多可选天数时的提示文案，mode = range时有效
+        rangePrompt: {
+            type: String,
+            default: () => defProps.calendar.rangePrompt
+        },
+        // 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
+        showRangePrompt: {
+            type: Boolean,
+            default: () => defProps.calendar.showRangePrompt
+        },
+        // 是否允许日期范围的起止时间为同一天，mode = range时有效
+        allowSameDay: {
+            type: Boolean,
+            default: () => defProps.calendar.allowSameDay
+        },
+		// 圆角值
+		round: {
+		    type: [Boolean, String, Number],
+		    default: () => defProps.calendar.round
+		},
+		// 最多展示月份数量
+		monthNum: {
+			type: [Number, String],
+			default: 3
+		},
+        // 星期文案
+        weekText: {
+			type: Array,
+			default: defProps.calendar.weekText
+		},
+        forbidDays: {
+			type: Array,
+			default: defProps.calendar.forbidDays
+		},
+        forbidDaysToast:{
+			type: String,
+			default: defProps.calendar.forbidDaysToast
+		},
+        monthFormat:{
+			type: String,
+			default: defProps.calendar.monthFormat
+		},
+        // 是否页面内展示
+        pageInline:{
+			type: Boolean,
+			default: defProps.calendar.pageInline
+		}
+    }
+})
diff --git a/components/patched-calendar/u-calendar.vue b/components/patched-calendar/u-calendar.vue
new file mode 100644
index 0000000..5a88a9c
--- /dev/null
+++ b/components/patched-calendar/u-calendar.vue
@@ -0,0 +1,421 @@
+<template>
+	<u-popup
+		:show="show"
+		mode="bottom"
+		:closeable="!pageInline"
+		@close="close"
+		:round="round"
+		:pageInline="pageInline"
+		:closeOnClickOverlay="closeOnClickOverlay"
+	>
+		<view class="u-calendar">
+			<uHeader
+				:title="title"
+				:subtitle="subtitle"
+				:showSubtitle="showSubtitle"
+				:showTitle="showTitle"
+				:weekText="weekText"
+			></uHeader>
+			<scroll-view
+				:style="{
+                    height: addUnit(listHeight, 'px')
+                }"
+				scroll-y
+				@scroll="onScroll"
+				:scroll-top="scrollTop"
+				:scrollIntoView="scrollIntoView"
+			>
+				<uMonth
+					:color="color"
+					:rowHeight="rowHeight"
+					:showMark="showMark"
+					:months="months"
+					:mode="mode"
+					:maxCount="maxCount"
+					:startText="startText"
+					:endText="endText"
+					:defaultDate="defaultDate"
+					:minDate="innerMinDate"
+					:maxDate="innerMaxDate"
+					:maxMonth="monthNum"
+					:readonly="readonly"
+					:maxRange="maxRange"
+					:rangePrompt="rangePrompt"
+					:showRangePrompt="showRangePrompt"
+					:allowSameDay="allowSameDay"
+					:forbidDays="forbidDays"
+					:forbidDaysToast="forbidDaysToast"
+					:monthFormat="monthFormat"
+					ref="month"
+					@monthSelected="monthSelected"
+					@updateMonthTop="updateMonthTop"
+				></uMonth>
+			</scroll-view>
+			<slot name="footer" v-if="showConfirm">
+				<view class="u-calendar__confirm">
+					<u-button
+						shape="circle"
+						:text="
+                            buttonDisabled ? confirmDisabledText : confirmText
+                        "
+						:color="color"
+						@click="confirm"
+						:disabled="buttonDisabled"
+					></u-button>
+				</view>
+			</slot>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+import uHeader from './header.vue'
+import uMonth from './month.vue'
+import { props } from './props.js'
+import util from './util.js'
+import dayjs from 'uview-plus/components/u-datetime-picker/dayjs.esm.min.js';
+import Calendar from 'uview-plus/libs/util/calendar.js'
+import { mpMixin } from 'uview-plus/libs/mixin/mpMixin.js'
+import { mixin } from 'uview-plus/libs/mixin/mixin.js'
+import { addUnit, getPx, range, error, padZero } from 'uview-plus/libs/function/index';
+import test from 'uview-plus/libs/function/test';
+/**
+ * Calendar 日历
+ * @description  此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中.
+ * @tutorial https://uview-plus.jiangruyi.com/components/calendar.html
+ *
+ * @property {String}				title				标题内容 (默认 日期选择 )
+ * @property {Boolean}				showTitle			是否显示标题  (默认 true )
+ * @property {Boolean}				showSubtitle		是否显示副标题	(默认 true )
+ * @property {String}				mode				日期类型选择  single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围 （ 默认 'single' )
+ * @property {String}				startText			mode=range时，第一个日期底部的提示文字  (默认 '开始' )
+ * @property {String}				endText				mode=range时，最后一个日期底部的提示文字 (默认 '结束' )
+ * @property {Array}				customList			自定义列表
+ * @property {String}				color				主题色，对底部按钮和选中日期有效  (默认 ‘#3c9cff' )
+ * @property {String | Number}		minDate				最小的可选日期	 (默认 0 )
+ * @property {String | Number}		maxDate				最大可选日期  (默认 0 )
+ * @property {Array | String| Date}	defaultDate			默认选中的日期，mode为multiple或range是必须为数组格式
+ * @property {String | Number}		maxCount			mode=multiple时，最多可选多少个日期  (默认 	Number.MAX_SAFE_INTEGER  )
+ * @property {String | Number}		rowHeight			日期行高 (默认 56 )
+ * @property {Function}				formatter			日期格式化函数
+ * @property {Boolean}				showLunar			是否显示农历  (默认 false )
+ * @property {Boolean}				showMark			是否显示月份背景色 (默认 true )
+ * @property {String}				confirmText			确定按钮的文字 (默认 '确定' )
+ * @property {String}				confirmDisabledText	确认按钮处于禁用状态时的文字 (默认 '确定' )
+ * @property {Boolean}				show				是否显示日历弹窗 (默认 false )
+ * @property {Boolean}				closeOnClickOverlay	是否允许点击遮罩关闭日历 (默认 false )
+ * @property {Boolean}				readonly	        是否为只读状态，只读状态下禁止选择日期 (默认 false )
+ * @property {String | Number}		maxRange	        日期区间最多可选天数，默认无限制，mode = range时有效
+ * @property {String}				rangePrompt	        范围选择超过最多可选天数时的提示文案，mode = range时有效
+ * @property {Boolean}				showRangePrompt	    范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效 (默认 true )
+ * @property {Boolean}				allowSameDay	    是否允许日期范围的起止时间为同一天，mode = range时有效 (默认 false )
+ * @property {Number|String}	    round				圆角值，默认无圆角  (默认 0 )
+ * @property {Number|String}	    monthNum			最多展示的月份数量  (默认 3 )
+ * @property {Array}	            weekText			星期文案  (默认 ['一', '二', '三', '四', '五', '六', '日'] )
+ *
+ * @event {Function()} confirm 		点击确定按钮时触发		选择日期相关的返回参数
+ * @event {Function()} close 		日历关闭时触发			可定义页面关闭时的回调事件
+ * @example <u-calendar  :defaultDate="defaultDateMultiple" :show="show" mode="multiple" @confirm="confirm">
+	</u-calendar>
+ * */
+export default {
+	name: 'u-calendar',
+	mixins: [mpMixin, mixin, props],
+	components: {
+		uHeader,
+		uMonth
+	},
+	data() {
+		return {
+			// 需要显示的月份的数组
+			months: [],
+			// 在月份滚动区域中，当前视图中月份的index索引
+			monthIndex: 0,
+			// 月份滚动区域的高度
+			listHeight: 0,
+			// month组件中选择的日期数组
+			selected: [],
+			scrollIntoView: '',
+			scrollIntoViewScroll: '',
+			scrollTop:0,
+			// 过滤处理方法
+			innerFormatter: (value) => value
+		}
+	},
+	watch: {
+		scrollIntoView: {
+			immediate: true,
+			handler(n) {
+				// console.log('scrollIntoView', n)
+			}
+		},
+		selectedChange: {
+			immediate: true,
+			handler(n) {
+				this.setMonth()
+			}
+		},
+		// 打开弹窗时，设置月份数据
+		show: {
+			immediate: true,
+			handler(n) {
+				if (n) {
+					this.setMonth()
+				} else {
+					// 关闭时重置scrollIntoView，否则会出现二次打开日历，当前月份数据显示不正确。
+					// scrollIntoView需要有一个值变动过程，才会产生作用。
+					this.scrollIntoView = ''
+				}
+			}
+		}
+	},
+	computed: {
+		// 由于maxDate和minDate可以为字符串(2021-10-10)，或者数值(时间戳)，但是dayjs如果接受字符串形式的时间戳会有问题，这里进行处理
+		innerMaxDate() {
+			return test.number(this.maxDate)
+				? Number(this.maxDate)
+				: this.maxDate
+		},
+		innerMinDate() {
+			return test.number(this.minDate)
+				? Number(this.minDate)
+				: this.minDate
+		},
+		// 多个条件的变化，会引起选中日期的变化，这里统一管理监听
+		selectedChange() {
+			return [this.innerMinDate, this.innerMaxDate, this.defaultDate]
+		},
+		subtitle() {
+			// 初始化时，this.months为空数组，所以需要特别判断处理
+			if (this.months.length) {
+				if (uni.getLocale() == 'zh-Hans' || uni.getLocale() == 'zh-Hant') {
+					return this.months[this.monthIndex].year + '年' + (this.months[this.monthIndex].month < 10 ? '0' + this.months[this.monthIndex].month : this.months[this.monthIndex].month) + '月'
+				} else {
+					return (this.months[this.monthIndex].month < 10 ? '0' + this.months[this.monthIndex].month : this.months[this.monthIndex].month) + '/' + this.months[this.monthIndex].year
+				}
+			} else {
+				return ''
+			}
+		},
+		buttonDisabled() {
+			// 如果为range类型，且选择的日期个数不足1个时，让底部的按钮出于disabled状态
+			if (this.mode === 'range') {
+				if (this.selected.length <= 1) {
+					return true
+				} else {
+					return false
+				}
+			} else {
+				return false
+			}
+		}
+	},
+	mounted() {
+		this.start = Date.now()
+		this.init()
+	},
+	emits: ["confirm", "close"],
+	methods: {
+		addUnit,
+		// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
+		setFormatter(e) {
+			this.innerFormatter = e
+		},
+		// month组件内部选择日期后，通过事件通知给父组件
+		monthSelected(e,scene ='init') {
+			this.selected = e
+			if (!this.showConfirm) {
+				// 在不需要确认按钮的情况下，如果为单选，或者范围多选且已选长度大于2，则直接进行返还
+				if (
+					this.mode === 'multiple' ||
+					this.mode === 'single' ||
+					(this.mode === 'range' && this.selected.length >= 2)
+				) {
+				   if( scene === 'init'){
+					 return
+				   }
+				   if( scene === 'tap') {
+					 this.$emit('confirm', this.selected)
+				   }
+				}
+			}
+		},
+		init() {
+			// 校验maxDate，不能小于minDate。
+			if (
+				this.innerMaxDate &&
+                this.innerMinDate &&
+				new Date(this.innerMaxDate).getTime() < new Date(this.innerMinDate).getTime()
+			) {
+				return error('maxDate不能小于minDate时间')
+			}
+			// 滚动区域的高度
+			let bottomPadding = 0;
+			if (this.pageInline) {
+				bottomPadding = 0
+			} else {
+				bottomPadding = 30
+			}
+			this.listHeight = this.rowHeight * 5 + bottomPadding
+			this.setMonth()
+		},
+		close() {
+			this.$emit('close')
+		},
+		// 点击确定按钮
+		confirm() {
+			if (!this.buttonDisabled) {
+				this.$emit('confirm', this.selected)
+			}
+		},
+		// 获得两个日期之间的月份数
+		getMonths(minDate, maxDate) {
+			const minYear = dayjs(minDate).year()
+			const minMonth = dayjs(minDate).month() + 1
+			const maxYear = dayjs(maxDate).year()
+			const maxMonth = dayjs(maxDate).month() + 1
+			return (maxYear - minYear) * 12 + (maxMonth - minMonth) + 1
+		},
+		// 设置月份数据
+		setMonth() {
+			// 最小日期的毫秒数
+			const minDate = this.innerMinDate || dayjs().valueOf()
+			// 如果没有指定最大日期，则往后推3个月
+			const maxDate =
+				this.innerMaxDate ||
+				dayjs(minDate)
+					.add(this.monthNum - 1, 'month')
+					.valueOf()
+			// 最大最小月份之间的共有多少个月份，
+			const months = range(
+				1,
+				this.monthNum,
+				this.getMonths(minDate, maxDate)
+			)
+			// 先清空数组
+			this.months = []
+			for (let i = 0; i < months; i++) {
+				this.months.push({
+					date: new Array(
+						dayjs(minDate).add(i, 'month').daysInMonth()
+					)
+						.fill(1)
+						.map((item, index) => {
+							// 日期，取值1-31
+							let day = index + 1
+							// 星期，0-6，0为周日
+							const week = dayjs(minDate)
+								.add(i, 'month')
+								.date(day)
+								.day()
+							const date = dayjs(minDate)
+								.add(i, 'month')
+								.date(day)
+								.format('YYYY-MM-DD')
+							let bottomInfo = ''
+							if (this.showLunar) {
+								// 将日期转为农历格式
+								const lunar = Calendar.solar2lunar(
+									dayjs(date).year(),
+									dayjs(date).month() + 1,
+									dayjs(date).date()
+								)
+								bottomInfo = lunar.IDayCn
+							}
+							let config = {
+								day,
+								week,
+								// 小于最小允许的日期，或者大于最大的日期，则设置为disabled状态
+								disabled:
+									dayjs(date).isBefore(
+										dayjs(minDate).format('YYYY-MM-DD')
+									) ||
+									dayjs(date).isAfter(
+										dayjs(maxDate).format('YYYY-MM-DD')
+									),
+								// 返回一个日期对象，供外部的formatter获取当前日期的年月日等信息，进行加工处理
+								date: new Date(date),
+								bottomInfo,
+								dot: false,
+								month:
+									dayjs(minDate).add(i, 'month').month() + 1
+							}
+							const formatter =
+								this.formatter || this.innerFormatter
+							return formatter(config)
+						}),
+					// 当前所属的月份
+					month: dayjs(minDate).add(i, 'month').month() + 1,
+					// 当前年份
+					year: dayjs(minDate).add(i, 'month').year()
+				})
+			}
+		},
+		// 滚动到默认设置的月份
+		scrollIntoDefaultMonth(selected) {
+			// 查询默认日期在可选列表的下标
+			const _index = this.months.findIndex(({
+				  year,
+				  month
+			  }) => {
+				month = padZero(month)
+				return `${year}-${month}` === selected
+			})
+			if (_index !== -1) {
+				// #ifndef MP-WEIXIN
+				this.$nextTick(() => {
+					this.scrollIntoView = `month-${_index}`
+					this.scrollIntoViewScroll = this.scrollIntoView
+				})
+				// #endif
+				// #ifdef MP-WEIXIN
+				this.scrollTop = this.months[_index].top || 0;
+				// #endif
+			}
+		},
+		// scroll-view滚动监听
+		onScroll(event) {
+			// 不允许小于0的滚动值，如果scroll-view到顶了，继续下拉，会出现负数值
+			const scrollTop = Math.max(0, event.detail.scrollTop)
+			// 将当前滚动条数值，除以滚动区域的高度，可以得出当前滚动到了哪一个月份的索引
+			for (let i = 0; i < this.months.length; i++) {
+				if (scrollTop >= (this.months[i].top || this.listHeight)) {
+					this.monthIndex = i
+					this.scrollIntoViewScroll = `month-${i}`
+				}
+			}
+		},
+		// 更新月份的top值
+		updateMonthTop(topArr = []) {
+			// 设置对应月份的top值，用于onScroll方法更新月份
+			topArr.map((item, index) => {
+				this.months[index].top = item
+			})
+
+			// 获取默认日期的下标
+			if (!this.defaultDate) {
+				// 如果没有设置默认日期，则将当天日期设置为默认选中的日期
+				const selected = dayjs().format("YYYY-MM")
+				this.scrollIntoDefaultMonth(selected)
+				return
+			}
+			let selected = dayjs().format("YYYY-MM");
+			// 单选模式，可以是字符串或数组，Date对象等
+			if (!test.array(this.defaultDate)) {
+				selected = dayjs(this.defaultDate).format("YYYY-MM")
+			} else {
+				selected = dayjs(this.defaultDate[0]).format("YYYY-MM");
+			}
+			this.scrollIntoDefaultMonth(selected)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.u-calendar {
+	&__confirm {
+		padding: 7px 18px;
+	}
+}
+</style>
diff --git a/components/patched-calendar/util.js b/components/patched-calendar/util.js
new file mode 100644
index 0000000..6303319
--- /dev/null
+++ b/components/patched-calendar/util.js
@@ -0,0 +1,86 @@
+import dayjs from 'uview-plus/components/u-datetime-picker/dayjs.esm.min.js';
+export default {
+    methods: {
+        // 设置月份数据
+        setMonth() {
+            // 月初是周几
+            const day = dayjs(this.date).date(1).day()
+            const start = day == 0 ? 6 : day - 1
+
+            // 本月天数
+            const days = dayjs(this.date).endOf('month').format('D')
+
+            // 上个月天数
+            const prevDays = dayjs(this.date).endOf('month').subtract(1, 'month').format('D')
+
+            // 日期数据
+            const arr = []
+            // 清空表格
+            this.month = []
+
+            // 添加上月数据
+            arr.push(
+                ...new Array(start).fill(1).map((e, i) => {
+                    const day = prevDays - start + i + 1
+
+                    return {
+                        value: day,
+                        disabled: true,
+                        date: dayjs(this.date).subtract(1, 'month').date(day).format('YYYY-MM-DD')
+                    }
+                })
+            )
+
+            // 添加本月数据
+            arr.push(
+                ...new Array(days - 0).fill(1).map((e, i) => {
+                    const day = i + 1
+
+                    return {
+                        value: day,
+                        date: dayjs(this.date).date(day).format('YYYY-MM-DD')
+                    }
+                })
+            )
+
+            // 添加下个月
+            arr.push(
+                ...new Array(42 - days - start).fill(1).map((e, i) => {
+                    const day = i + 1
+
+                    return {
+                        value: day,
+                        disabled: true,
+                        date: dayjs(this.date).add(1, 'month').date(day).format('YYYY-MM-DD')
+                    }
+                })
+            )
+
+            // 分割数组
+            for (let n = 0; n < arr.length; n += 7) {
+                this.month.push(
+                    arr.slice(n, n + 7).map((e, i) => {
+                        e.index = i + n
+
+                        // 自定义信息
+                        const custom = this.customList.find((c) => c.date == e.date)
+
+                        // 农历
+                        if (this.lunar) {
+                            const {
+                                IDayCn,
+                                IMonthCn
+                            } = this.getLunar(e.date)
+                            e.lunar = IDayCn == '初一' ? IMonthCn : IDayCn
+                        }
+
+                        return {
+                            ...e,
+                            ...custom
+                        }
+                    })
+                )
+            }
+        }
+    }
+}
diff --git a/manifest.json b/manifest.json
index 7cbd19c..a9d70ab 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,5 +1,5 @@
 {
-    "name" : "smarthome",
+    "name" : "SEC_Warehouse",
     "appid" : "",
     "description" : "",
     "versionName" : "1.0.0",
diff --git a/pages.json b/pages.json
index 445e240..a1c2ab3 100644
--- a/pages.json
+++ b/pages.json
@@ -57,15 +57,21 @@
     "list": [
       {
         "pagePath": "pages/index/index",
-        "text": "首页"
+        "text": "首页",
+        "iconPath": "static/tabbar/home.png",
+        "selectedIconPath": "static/tabbar/home-active.png"
       },
       {
         "pagePath": "pages/event/index",
-        "text": "事件"
+        "text": "事件",
+        "iconPath": "static/tabbar/event.png",
+        "selectedIconPath": "static/tabbar/event-active.png"
       },
       {
         "pagePath": "pages/mine/index",
-        "text": "我的"
+        "text": "我的",
+        "iconPath": "static/tabbar/mine.png",
+        "selectedIconPath": "static/tabbar/mine-active.png"
       }
     ]
   },
@@ -73,6 +79,7 @@
   "easycom": {
     "autoscan": true,
     "custom": {
+      "^up-calendar$": "@/components/patched-calendar/u-calendar.vue",
       "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue",
       "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue"
     }
diff --git a/pages/event/index.vue b/pages/event/index.vue
index 0458dd1..b2df4bd 100644
--- a/pages/event/index.vue
+++ b/pages/event/index.vue
@@ -4,41 +4,554 @@
     <up-navbar title="事件" :fixed="false" :safe-area-inset-top="true" :border="false" left-icon="" />
 
     <view class="filters">
-      <view><up-button size="mini" type="primary" plain text="全部场所"  /></view>
-      <view><up-button size="mini" type="primary" plain text="全部状态"  /></view>
-      <view><up-button size="mini" type="primary" plain text="时间"  /></view>
+      <view class="filter-cell" @click="openDrawer('scene')">
+        <view class="filter-trigger" :class="{ 'filter-trigger--active': filters.sceneId !== 0 }">
+          <text class="filter-text">{{ sceneLabel }}</text>
+          <up-icon name="arrow-down" size="13" :color="filters.sceneId !== 0 ? '#12a37a' : '#909399'" />
+        </view>
+      </view>
+      <view class="filter-cell" @click="openDrawer('status')">
+        <view class="filter-trigger" :class="{ 'filter-trigger--active': filters.status !== 0 }">
+          <text class="filter-text">{{ statusLabel }}</text>
+          <up-icon name="arrow-down" size="13" :color="filters.status !== 0 ? '#12a37a' : '#909399'" />
+        </view>
+      </view>
+      <view class="filter-cell" @click="openDrawer('time')">
+        <view class="filter-trigger" :class="{ 'filter-trigger--active': !!filters.startDate }">
+          <text class="filter-text">{{ filters.timeText || '时间' }}</text>
+          <up-icon name="arrow-down" size="13" :color="filters.startDate ? '#12a37a' : '#909399'" />
+        </view>
+      </view>
     </view>
 
     <view class="empty-area">
       <up-empty mode="message" text="暂无事件数据" />
     </view>
+    <view class="empty-hint">
+      <text>调整筛选条件后的事件列表将在此展示</text>
+    </view>
+
+    <!-- 场所抽屉：顶部下拉选项列表 -->
+    <up-popup :show="drawer === 'scene'" mode="top" round="24" :overlay-opacity="0.35" :safe-area-inset-bottom="false" :custom-style="{ width: '100vw' }" @close="closeDrawer">
+      <view class="option-drawer">
+        <view class="option-drawer-header">
+          <text class="option-drawer-title">选择场所</text>
+          <view class="option-drawer-close" @click="closeDrawer">
+            <up-icon name="close" size="20" color="#909399" />
+          </view>
+        </view>
+        <view class="option-drawer-list">
+          <view
+            v-for="opt in sceneOptions"
+            :key="opt.id"
+            class="option-drawer-item"
+            :class="{ 'option-drawer-item--active': filters.sceneId === opt.id }"
+            @click="selectScene(opt.id)"
+          >
+            <text class="option-drawer-item__text">{{ opt.name }}</text>
+            <up-icon v-if="filters.sceneId === opt.id" name="checkmark" size="16" color="#2CCB98" />
+          </view>
+        </view>
+      </view>
+    </up-popup>
+
+    <!-- 状态抽屉：顶部下拉选项列表 -->
+    <up-popup :show="drawer === 'status'" mode="top" round="24" :overlay-opacity="0.35" :safe-area-inset-bottom="false" :custom-style="{ width: '100vw' }" @close="closeDrawer">
+      <view class="option-drawer">
+        <view class="option-drawer-header">
+          <text class="option-drawer-title">选择状态</text>
+          <view class="option-drawer-close" @click="closeDrawer">
+            <up-icon name="close" size="20" color="#909399" />
+          </view>
+        </view>
+        <view class="option-drawer-list">
+          <view
+            v-for="opt in statusOptions"
+            :key="opt.id"
+            class="option-drawer-item"
+            :class="{ 'option-drawer-item--active': filters.status === opt.id }"
+            @click="selectStatus(opt.id)"
+          >
+            <text class="option-drawer-item__text">{{ opt.name }}</text>
+            <up-icon v-if="filters.status === opt.id" name="checkmark" size="16" color="#2CCB98" />
+          </view>
+        </view>
+      </view>
+    </up-popup>
+
+    <!-- 时间抽屉：顶部下拉，内嵌日历范围选择 -->
+    <!-- 注意：up-popup 内容区自带 @touchmove.stop.prevent，会吞掉日历内 scroll-view 的滚动手势，
+         所以日历不放在 up-popup 插槽里，而是用条件渲染 + 自绘遮罩实现抽屉 -->
+    <view v-if="drawer === 'time'" class="time-mask" @click="closeDrawer" @touchmove.stop.prevent="noop" />
+    <view v-if="drawer === 'time'" class="time-drawer">
+      <view class="time-drawer-header">
+        <text class="time-drawer-title">选择时间范围</text>
+        <view class="time-drawer-close" @click="closeDrawer">
+          <up-icon name="close" size="20" color="#909399" />
+        </view>
+      </view>
+      <view class="time-drawer-body">
+        <up-calendar
+          :key="calendarKey"
+          mode="range"
+          :show="drawer === 'time'"
+          :page-inline="true"
+          :show-confirm="false"
+          :show-title="false"
+          :show-subtitle="true"
+          :row-height="48"
+          :month-num="calendarMonthNum"
+          :min-date="calendarMinDate"
+          :max-date="calendarMaxDate"
+          :allow-same-day="true"
+          :max-range="31"
+          range-prompt="单次最多选择31天"
+          :show-range-prompt="true"
+          start-text="开始"
+          end-text="结束"
+          color="#2CCB98"
+          :default-date="calendarDefaultDate"
+          @confirm="onCalendarConfirm"
+          @close="closeDrawer"
+        />
+      </view>
+      <!-- 确定按钮：自绘钉底。组件内 footer 在 pageInline 多层嵌套下定位不可控。
+           选满起止日期时 showConfirm=false 的组件会自动 emit confirm（中间态），
+           这里只记录值不关闭抽屉，由这枚按钮确认后才写入筛选 -->
+      <view class="time-drawer-footer">
+        <up-button
+          shape="circle"
+          :text="calendarReady ? '确定' : '请选择起止日期'"
+          color="#2CCB98"
+          :disabled="!calendarReady"
+          @click="onConfirmClick"
+        />
+      </view>
+    </view>
   </view>
 </template>
-
 <script>
-// 当前为静态页占位，不包含交互逻辑。
-export default {}
+import { getSceneList } from '@/api/scene'
+
+// 日历可回溯的年数，按需调整（monthNum 会随 minDate 动态计算，无需同步改）
+const CALENDAR_YEARS_BACK = 1
+
+export default {
+  data() {
+    return {
+      drawer: '', // '' | 'scene' | 'status' | 'time'
+      calendarKey: 0, // 强制重建日历，规避内部 selected 状态残留
+      pendingRange: [], // 日历临时选中的起止日期，点确定按钮才写入 filters
+      filters: {
+        sceneId: 0, // 0 表示全部
+        status: 0,
+        startDate: '',
+        endDate: '',
+        timeText: ''
+      },
+      sceneOptions: [{ id: 0, name: '全部' }],
+      statusOptions: [
+        { id: 0, name: '全部' },
+        { id: 1, name: '未处理' },
+        { id: 2, name: '已处理' },
+        { id: 3, name: '已忽略' }
+      ]
+    }
+  },
+  computed: {
+    sceneLabel() {
+      const hit = this.sceneOptions.find((o) => o.id === this.filters.sceneId)
+      return hit ? hit.name : '全部场所'
+    },
+    statusLabel() {
+      const hit = this.statusOptions.find((o) => o.id === this.filters.status)
+      return hit ? hit.name : '全部状态'
+    },
+    // 日历可选范围：过去一年 ~ 今天（不传 minDate 时组件默认从当月开始，无法回看历史）。
+    calendarMinDate() {
+      const d = new Date()
+      d.setFullYear(d.getFullYear() - CALENDAR_YEARS_BACK)
+      return d.getTime()
+    },
+    calendarMaxDate() {
+      return Date.now()
+    },
+    // up-calendar 的 monthNum 同时参与 maxDate 兜底计算：未传 maxDate 时月份终点是
+    // minDate + monthNum 个月；传了 maxDate 后它又反过来限制可渲染的月份数。
+    // 所以这里动态算出 min~max 实际跨过的月数，保证完整展示过去一年。
+    calendarMonthNum() {
+      return (
+        (new Date(this.calendarMaxDate).getFullYear() -
+          new Date(this.calendarMinDate).getFullYear()) *
+          12 +
+        new Date(this.calendarMaxDate).getMonth() -
+        new Date(this.calendarMinDate).getMonth() +
+        1
+      )
+    },
+    // 日历回显：已选范围作为 defaultDate（range 模式要求数组）。
+    calendarDefaultDate() {
+      const dates = [this.filters.startDate, this.filters.endDate].filter(Boolean)
+      return dates.length === 2 ? dates : []
+    },
+    // 日历当前是否已选满起止日期（pendingRange 在日历选中时更新）。
+    calendarReady() {
+      return this.pendingRange.length >= 2
+    }
+  },
+  onLoad() {
+    this.loadScenes()
+  },
+  methods: {
+    // 动态加载场所列表：复用场景接口，后端 /scene/list 就绪后自动走真实请求。
+    // 失败时保留"全部"选项不阻塞筛选（toast 由请求封装统一弹出）。
+    async loadScenes() {
+      try {
+        const data = await getSceneList()
+        const list = Array.isArray(data) ? data : []
+        this.sceneOptions = [{ id: 0, name: '全部' }, ...list]
+      } catch (error) {
+        this.sceneOptions = [{ id: 0, name: '全部' }]
+      }
+    },
+    noop() {},
+    openDrawer(name) {
+      if (name === 'time') {
+        // 重建日历实例：up-calendar 内部选中态不会随 defaultDate 变化重置
+        this.calendarKey += 1
+        // 回显已提交的日期范围，避免重开抽屉时按钮误判为“未选择”
+        const dates = [this.filters.startDate, this.filters.endDate].filter(Boolean)
+        this.pendingRange = dates.length === 2 ? dates : []
+      }
+      this.drawer = name
+    },
+    closeDrawer() {
+      this.drawer = ''
+    },
+    // 场所/状态抽屉点选：写入筛选值并收起抽屉。
+    selectScene(id) {
+      this.filters.sceneId = id
+      this.closeDrawer()
+      this.handle()
+    },
+    selectStatus(id) {
+      this.filters.status = id
+      this.closeDrawer()
+      this.handle()
+    },
+    // 下拉选项变化：触发筛选回调，便于后续接事件列表接口。
+    handle() {
+      // eslint-disable-next-line no-console
+      console.log('[event filters]', { ...this.filters })
+    },
+    // 日历选中变化（showConfirm=false 时组件在选满起止时自动触发 confirm）：
+    // 只记录临时选择，不关闭抽屉——最终提交由底部自绘确定按钮完成。
+    onCalendarConfirm(dateArr) {
+      if (!Array.isArray(dateArr) || dateArr.length < 2) {
+        return
+      }
+      this.pendingRange = dateArr
+    },
+    // 自绘确定按钮：提交临时选择并写入筛选值。
+    // range 模式选满后 confirm 会带完整日期数组（起止之间每一天都在内），
+    // 所以取数组首尾作为起止日期，而非前两个元素。
+    onConfirmClick() {
+      if (!this.calendarReady) {
+        return
+      }
+      const start = this.pendingRange[0]
+      const end = this.pendingRange[this.pendingRange.length - 1]
+      this.filters.startDate = start
+      this.filters.endDate = end
+      this.filters.timeText = `${start} 至 ${end}`
+      this.closeDrawer()
+      this.handle()
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 @import '@/styles/common.css';
 
 .filters {
-  > view + view {
-    margin-left: 18rpx;
-  }
+  display: flex;
+  align-items: stretch;
   min-height: 96rpx;
   padding: 16rpx 24rpx;
   background: #ffffff;
   border-top: 1rpx solid #ededed;
+}
+
+.filter-cell {
+  flex: 1;
+  min-width: 0;
+
+  + .filter-cell {
+    margin-left: 18rpx;
+  }
+}
+
+.filter-trigger {
+  height: 100%;
+  min-height: 64rpx;
+  padding: 0 20rpx;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  background: #f5f6f8;
+  border: 1rpx solid transparent;
+  border-radius: 12rpx;
+  color: #606266;
+  font-size: 26rpx;
+  transition: background-color 0.2s, border-color 0.2s;
+
+  &--active {
+    background: #e9fff3;
+    border-color: #2ccb98;
+    color: #12a37a;
+  }
+}
+
+.filter-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .empty-area {
-  min-height: 880rpx;
+  min-height: 720rpx;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 120rpx;
+}
+
+.empty-hint {
+  margin-top: -40rpx;
+  text-align: center;
+  font-size: 24rpx;
+  color: #b5b9c0;
+}
+
+/* 场所/状态选项抽屉 */
+.option-drawer {
+  background: #ffffff;
+  padding-bottom: 24rpx;
+  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.08);
+}
+
+.option-drawer-header {
+  padding: 28rpx 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1rpx solid #f0f1f3;
+}
+
+.option-drawer-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #2a2d33;
+}
+
+.option-drawer-close {
+  width: 56rpx;
+  height: 56rpx;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+.option-drawer-list {
+  padding: 12rpx 24rpx;
+}
+
+.option-drawer-item {
+  min-height: 96rpx;
+  padding: 0 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 14rpx;
+
+  &:active {
+    background: #f7f8fa;
+  }
+
+  &--active {
+    background: #e9fff3;
+  }
+}
+
+.option-drawer-item__text {
+  font-size: 30rpx;
+  color: #2a2d33;
+}
+
+.option-drawer-item--active .option-drawer-item__text {
+  color: #2CCB98;
+  font-weight: 600;
+}
+
+/* 时间抽屉：自绘遮罩 + 顶部面板（不经过 up-popup，避免其 touchmove 拦截吞掉日历滚动手势） */
+.time-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 10075;
+}
+
+.time-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 66vh; /* 固定高度：日历窗口+按钮填满，按钮钉底 */
+  z-index: 10076;
+  background: #ffffff;
+  border-bottom-left-radius: 32rpx;
+  border-bottom-right-radius: 32rpx;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.time-drawer-header {
+  padding: 20rpx 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1rpx solid #f0f1f3;
+}
+
+.time-drawer-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #2a2d33;
+}
+
+.time-drawer-close {
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.time-drawer-body {
+  /* 占满抽屉剩余空间；日历内部 scroll-view 通过 calc 抬高到填满 body，
+     组件内的确定按钮再用绝对定位钉回 body 底部，消除按钮下方空白 */
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+/* 日历滚动窗口高度。
+   pageInline 下 up-calendar 内部仍套着 u-popup（.u-popup → .u-transition → .u-popup__content），
+   这几层默认高度都是 auto，导致 scroll-view 的百分比高度无法解析
+   （退化成内容高度=全部月份堆叠、滚动窗口失效）。这里把中间层逐级撑到 100%，
+   再让 scroll-view 用 flex 填满 header 以下的剩余空间，实现自适应、无空隙。 */
+.time-drawer-body :deep(.u-popup),
+.time-drawer-body :deep(.u-transition),
+.time-drawer-body :deep(.u-popup__content) {
+  height: 100%;
+}
+
+.time-drawer-body :deep(.u-calendar) {
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0 16rpx;
+}
+
+.time-drawer-body :deep(.u-calendar-header) {
+  flex-shrink: 0;
+}
+
+.time-drawer-body :deep(.u-calendar .u-scroll-view),
+.time-drawer-body :deep(.u-calendar scroll-view) {
+  flex: 1;
+  min-height: 0;
+  height: auto !important;
+}
+
+/* 确定按钮：不依赖组件内 footer（在多层嵌套里定位/裁切不可控），
+   在 body 底部自绘一枚按钮，选满起止日期后可点 */
+.time-drawer-footer {
+  flex-shrink: 0;
+  padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
+  border-top: 1rpx solid #f0f1f3;
+  background: #ffffff;
+}
+
+/* 副标题（当前滚动到的月份）：弱化为居中小胶囊 */
+.time-drawer-body :deep(.u-calendar-header__subtitle) {
+  align-self: center;
+  margin: 8rpx 0 4rpx;
+  padding: 4rpx 24rpx;
+  background: #f2f3f5;
+  border-radius: 999rpx;
+  height: auto;
+  line-height: 40rpx;
+  font-size: 24rpx;
+  font-weight: 400;
+  color: #6b6f76;
+}
+
+/* 星期行 */
+.time-drawer-body :deep(.u-calendar-header__weekdays) {
+  padding: 8rpx 0;
+  border-bottom: 1rpx solid #f0f1f3;
+}
+
+.time-drawer-body :deep(.u-calendar-header__weekdays__weekday) {
+  text-align: center;
+  font-size: 24rpx;
+  color: #909399;
+  line-height: 44rpx;
+}
+
+.time-drawer-body :deep(.u-calendar-month-wrapper) {
+  /* 不能加横向 padding：首日偏移用 JS 实测容器宽计算、格子宽用 CSS 百分比，
+     两者对 padding 的包含不同会造成偏差，偏移大的月份首行末尾格子会被挤换行 */
+  margin-top: 0;
+}
+
+/* 每月标题行 */
+.time-drawer-body :deep(.u-calendar-month__title) {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #2a2d33;
+  padding: 16rpx 12rpx;
+  line-height: 64rpx;
+  height: 64rpx;
+}
+
+/* 月份背景水印：默认 155px 过大过亮，缩小压淡 */
+.time-drawer-body :deep(.u-calendar-month__days__month-mark-wrapper__text) {
+  font-size: 110rpx;
+  color: rgba(231, 232, 234, 0.4);
+}
+
+.time-drawer-body :deep(.u-calendar-month__days__day) {
+  padding: 8rpx;
+}
+
+/* 日期字号恢复正常可读尺寸（此前随抽屉缩小被误压） */
+.time-drawer-body :deep(.u-calendar-month__days__day__select__info) {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #2a2d33;
+}
+
+/* 开始/结束提示小字 */
+.time-drawer-body :deep(.u-calendar-month__days__day__select__buttom-info) {
+  font-size: 20rpx;
+  color: #6b6f76;
+}
 </style>
diff --git a/pages/mine/index.vue b/pages/mine/index.vue
index 805e80d..2625ae9 100644
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@@ -14,11 +14,8 @@
 
     <up-cell-group :border="false" custom-style="margin: 24rpx; border-radius: 24rpx; overflow: hidden; background: #ffffff;">
       <up-cell title="设备配置" is-link @click="goConfig" />
-      <up-cell title="分享的设备" is-link />
       <up-cell title="场所管理" is-link />
-      <up-cell title="接警人管理" is-link />
       <up-cell title="手机号" :value="phoneText" is-link />
-      <up-cell title="语音广播" is-link />
       <up-cell title="当前版本" value="2.8.44" />
       <up-cell title="退出登录" @click="logout" />
     </up-cell-group>
diff --git a/static/tabbar/event-active.png b/static/tabbar/event-active.png
new file mode 100644
index 0000000..7fff556
Binary files /dev/null and b/static/tabbar/event-active.png differ
diff --git a/static/tabbar/event.png b/static/tabbar/event.png
new file mode 100644
index 0000000..bcf343b
Binary files /dev/null and b/static/tabbar/event.png differ
diff --git a/static/tabbar/home-active.png b/static/tabbar/home-active.png
new file mode 100644
index 0000000..20e780c
Binary files /dev/null and b/static/tabbar/home-active.png differ
diff --git a/static/tabbar/home.png b/static/tabbar/home.png
new file mode 100644
index 0000000..a60c046
Binary files /dev/null and b/static/tabbar/home.png differ
diff --git a/static/tabbar/mine-active.png b/static/tabbar/mine-active.png
new file mode 100644
index 0000000..e2b9626
Binary files /dev/null and b/static/tabbar/mine-active.png differ
diff --git a/static/tabbar/mine.png b/static/tabbar/mine.png
new file mode 100644
index 0000000..a164689
Binary files /dev/null and b/static/tabbar/mine.png differ