Element Plus el-calendar自定义使用

最新推荐文章于 2025-04-28 15:11:19 发布

原创最新推荐文章于 2025-04-28 15:11:19 发布 · 2.3k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

该代码示例展示了如何在Vue应用中结合ElementPlus的el-calendar组件，利用moment.js库解析时间戳并展示日历事件。组件包含了日历头的按钮操作，如切换年月，以及自定义的日期单元格模板，显示工作日程信息，包括重要性、工作班次和时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结合element plus官网el-calendar的使用
parseTimestampToDate方法用的是 moment.js

<template>
	<el-calendar ref="calendar" v-model="value">
		<template #header="{ date }">
			<el-button-group>
				<el-button size="small" @click="selectDate('prev-year')">
					上一年
				</el-button>
				<el-button size="small" @click="selectDate('prev-month')">
					上个月
				</el-button>
			</el-button-group>
			<span>{{ date }}</span>
			<el-button-group>
				<el-button size="small" @click="selectDate('today')"
					>今天</el-button
				>
				<el-button size="small" @click="selectDate('next-month')">
					下个月
				</el-button>
				<el-button size="small" @click="selectDate('next-year')">
					下一年
				</el-button>
			</el-button-group>
		</template>
		<template #dateCell="{ data }">
			<div
				:class="
					currentShowDate(data.day) && currentShowDate(data.day).date
						? 'calendar-day work-day'
						: 'calendar-day'
				"
				:title="currentShowDate(data.day)?.content"
			>
				<p>
					{{ data.day.split("-").slice(1).join("-") }}
					{{ data.isSelected ? "✔️" : "" }}
				</p>
				<div
					v-if="currentShowDate(data.day)"
					:style="
						currentShowDate(data.day).type == 'important'
							? 'color: #f00'
							: ''
					"
				>
					<p>
						{{ currentShowDate(data.day).workShift }}
						{{ currentShowDate(data.day).workTime }}
					</p>
					<p class="content">{{ currentShowDate(data.day).content }}</p>
				</div>
			</div>
		</template>
	</el-calendar>
</template>

<script>
import { ref } from "vue";
import { parseTimestampToDate } from "@/utils/time.js";

export default {
	name: "clander",
	components: {},
	data() {
		return {
			value: new Date(), //当前选中的日期
			workCycleList: [
				{
					date: "2023-02-02",
					content:
						"生产100个配件，生产100个配件，生产100个配件，生产100个配件，生产100个配件，生产100个配件，生产100个配件",
					type: "important",
					workShift: "白班",
					workTime: "08:00 - 20:00",
				},
				{
					date: "2023-02-03",
					content: "清理机器",
					type: "common",
					workShift: "白班",
					workTime: "08:00 - 18:00",
				},
				{
					date: "2023-02-04",
					content: "日常生产配件",
					type: "common",
					workShift: "白班",
					workTime: "08:00 - 18:00",
				},
				{
					date: "2023-03-01",
					content: "日常生产配件",
					type: "common",
					workShift: "白班",
					workTime: "08:00 - 18:00",
				},
			],
		};
	},
	computed: {
		// 计算当前被选择的时间
		choosedDate() {
			const time = parseTimestampToDate(this.value, "MM/DD/YYYY  HH:mm");
			return time;
		},
	},
	mounted() {},
	methods: {
		currentShowDate(date) {
			let findWorkDay = null;
			findWorkDay = this.workCycleList.find((f) => f.date == date);
			return findWorkDay;
		},
	},
	setup() {
		const calendar = ref();
		const selectDate = (val) => {
			calendar.value.selectDate(val);
		};
		return { calendar, selectDate };
	},
};
</script>

<style lang="scss" scoped>
::v-deep .el-calendar-day {
	padding: 0;
}
.calendar-day {
	width: 100%;
	height: 100%;
	padding: 8px;
}
.work-day {
	background-color: #fef0f0;
}
.is-selected .work-day,
.work-day:hover {
	background-color: var(--el-calendar-selected-bg-color);
}
.content {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
</style>