Bootstrap

el-calendar自定义

实现效果:

 需求:

 1、按钮组文字改成左右箭头,按钮位置改变

2、自定义颜色

PS:position-absolute、position-relative是全局定义的关于定位有关样式

        pl、pr、pt、pb、ml、mr、mt、mb是全局定义的关于padding和margin有关样式

        具体间距需要自行调整

	<el-card
			style="width: 350px; height: 338px; border-radius: 10px"
			class="position-relative"
		>
			<div class="position-absolute btn-style">
				<el-button
					class="today-btn"
					@click="calendarValue = Date.now()"
					>今</el-button
				>
			</div>
			<p class="pl-2 mt-2 mb-1">日历</p>
			<el-calendar
				ref="calendar"
				v-model="calendarValue"
				style="--el-calendar-border: none !important"
			>
			</el-calendar>
		</el-card>

data数据

calendarValue: new Date()

css样式

	/deep/.el-card__body {
		padding: 0;
	}

    // 今日按钮样式
	.btn-style {
		top: 52px;
		left: 115px;
		.today-btn {
			padding: 0px;
			width: 32px;
			height: 22px;
			line-height: 5px;
			color: #000;
			background: #ffffff;
			border-radius: 4px;
			font-size: 12px;
			border: 1px solid #d9d9d9;
		}
	}

    // 上个月、下个月按钮样式
	::v-deep .el-button-group > .el-button:first-child:before {
		content: '<';
	}
	::v-deep .el-button-group > .el-button:last-child:before {
		content: '>';
	}
	::v-deep .el-button-group > .el-button:not(:first-child):not(:last-child) {
		color: #444444;
	}
	::v-deep .el-button-group > .el-button:first-child span,
	::v-deep .el-button-group > .el-button:last-child span {
		display: none;
	}
	::v-deep .el-button-group > .el-button:not(:last-child) {
		margin-right: -15px;
	}
	::v-deep .el-button-group > .el-button:first-child:before,
	::v-deep .el-button-group > .el-button:last-child:before {
		width: 16px;
		height: 16px;
		color: #444444;
	}
    // 去除文字
	::v-deep .el-button-group > .el-button:not(:first-child):not(:last-child) {
		span {
			display: none;
		}
	}

	::v-deep .el-button-group > .el-button {
		border: 0;
		background: transparent;
	}
	/deep/.el-calendar-table__row td {
		// 去掉边框
		border: none !important;
		// 缩小高度
		.el-calendar-day {
			height: 32px;
			line-height: 18px;
			// 设置居中
			text-align: center;
		}
	}

    // 自定义选中、悬浮颜色
	::v-deep .el-calendar-table .el-calendar-day:hover {
		color: #fff;
		background-color: #ff5e79 !important;
	}
	::v-deep .el-calendar-table .is-today {
		color: #303133;
	}
	::v-deep .el-calendar-table .is-selected {
		color: #fff;
		background-color: #ff5e79 !important;
	}
	::v-deep .el-calendar__header {
		display: flex;
		justify-content: space-between;
		padding: 0px 20px;
		border: none;
	}

;