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();
		},
		created() {
			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>