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 设置了最小高度。

　　周末加了样式区分。