elementUI 中日历自定义内容 配置具体内容

效果图如下：

代码如下：

<template>

	<div class="con-main">

		<div class="con-list">

			<!-- 日历 -->

			<el-calendar>

				<!-- 插槽 -->

				<template slot="dateCell" slot-scope="{date, data}">

					<!--  date	单元格代表的日期  data { type, isSelected, day}，type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd-->

					<div>

						<!-- 这里加了周六周天的判断 -->

						<div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{data.day}}</div>

						<!-- 数组循环 -->

						<div class="cell" v-for="(item,index) in tableData" >

							<!-- 加数据 -->

							<div v-if="data.day == item.day">

								<div v-for="(it,iIndex) in tableData[index].info">

									<div class="info">

										<i class="el-icon-info"></i>

										<b>【{{it.name}}】 </b>

									</div>

								</div>

							</div>

						</div>

					</div>

				</template>

			</el-calendar>

		</div>

	</div>

</template>

<script>

	export default {

		data() {

			return {

				tableData: [

					{

						day:'2022-11-01',

						info:[

							{

								all:' all1',

								name: 'name1',

							},

							{

								all:'all2',

								name: 'name1',

							},

						],

					},

				],

			}

		},

		created() {},

		mounted() {

		},

		methods: {

		}

	}

</script>

<style lang="scss" scoped>

	div ::v-deep th.gutter {

		display: initial;

	}

	div ::v-deep .el-calendar-day{

		min-height: 110px;

		height: inherit !important;

		position: relative;

		z-index: inherit;

	}

	.notweeked{

		padding: 5px;

		text-align: center;

		background-color: #f1f6fb;

		color: #354158;

	}

	.weeked{

		padding: 5px;

		text-align: center;

		background-color: rgba(255,0,0,.1);

	}

</style>

　　其中样式中的 div ::v-deep .el-calendar-day 设置了最小高度。

　　周末加了样式区分。

elementUI 中日历自定义内容 配置具体内容的相关教程结束。