jy_total_process_master_cloud_h5/pages/calendar/MyCalendar.vue

<template>
	<view class="page">
		<cu-custom :backUrl="'/pages/index/index'" :isBack="true" bgColor="bg-gradual-blue" >
			<block slot="content">我的日程</block>
		</cu-custom>
		<el-calendar class="page">
			<template v-slot:dateCell="{ data }">
				<view
						@click.stop="selectHandler(data)"
						class="cell"
						:class="{ 'is-selected': data.isSelected }"
				>
					{{ data.day.split("-").slice(1).join("-") }} <br /><br />
<!--					<div v-for="(event, index) in calendarEvents" :key="index" style="text-align: center;margin-top: -15px; overflow: hidden; white-space: nowrap;">-->
<!--						<el-tag-->
<!--								style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"-->
<!--								@click.stop="handleEventClick(event)"-->
<!--								v-if="data.day === event.startDate.substring(0, 10)"-->
<!--						>-->
<!--							{{ event.title }}-->
<!--						</el-tag>-->
<!--					</div>-->
					<div style="text-align: center; margin-top: -15px;overflow: hidden; white-space: nowrap;">
						<el-tag
								v-for="(event, index) in calendarEvents"
								:key="index"
								:style="{ 'text-overflow': 'ellipsis', 'overflow': 'hidden', 'white-space': 'nowrap' }"
								@click.stop="handleEventClick(event)"
								v-if="data.day === event.startDate.substring(0, 10)"
						>
							{{ event.title }}
						</el-tag>
					</div>
				</view>
			</template>
		</el-calendar>
	</view>
</template>
<script>
import myCalendarService from "@/api/calendar/myCalendarService";
export default {
	data() {
		return {
			showForm: false,
			calendarDates: [], // 你的日期数据
			startDate: new Date(),
			endDate: new Date(),
			calendarEvents: [],
		};
	},
	components: {
	},
	activated() {
		this.refreshList();
	},
	methods: {
		// 选择月份
		selectHandler(data) {
			this.startDate = data.day;
			this.endDate = data.day;
			// 使用 $nextTick 确保组件已经准备好
			// this.$nextTick(() => {
			// 	this.$refs.myCalendarForm.init(
			// 			"add",
			// 			"",
			// 			this.startDate,
			// 			this.endDate
			// 	);
			// });
			uni.navigateTo({
				url: '/pages/calendar/MyCalendarForm?method=' + 'add' + '&startDate=' + this.startDate + '&endDate=' + this.endDate // DialogPage 对应的页面路径
			});
		},
		handleEventClick(info) {
			uni.navigateTo({
				url: '/pages/calendar/MyCalendarForm?id=' + info.id + '&method=' + 'edit' // DialogPage 对应的页面路径
			});
		},
		refreshList() {
			myCalendarService.list().then((data) => {
				this.calendarEvents = data;
			});
		},
		formatStartDate(date) {
			const formattedDate = new Date(date);
			const year = formattedDate.getFullYear();
			const month = String(formattedDate.getMonth() + 1).padStart(2, '0');
			const day = String(formattedDate.getDate()).padStart(2, '0');
			const hours = String(formattedDate.getHours()).padStart(2, '0');
			const minutes = String(formattedDate.getMinutes()).padStart(2, '0');
			const seconds = String(formattedDate.getSeconds()).padStart(2, '0');

			return `${year}-${month}-${day}`;
		},

	},
};
</script>
<style>
.is-selected {
	color: #1989fa;
}
</style>