el-calendar日历自定义，包括上个月 下个月 时间选择，包括内容自定义

本文章内容包括，日历的自定义样式、日历的时间选

先来日历内容自定义

给你们看下我做的成品 然后你们自己根据实际情况修改

 直接上代码

css样式问题自己调整即可

日期时间选择

下面是整体的代码  你们自己整理一下即可，修改成符合自己逻辑需要的。

 先看css

:deep() {// 我这里是样式穿透
	.el-calendar-day {
		height: 109px;
	}

	// .el-button-group {
	// 	display: none; //隐藏默认样式
	// }
	.el-calendar__header{
		display: none; //隐藏默认样式
	}
	.el-calendar__body{
		padding: 0;
	}
	
	.el-calendar-table{			// 日历头部的样式
		th{
			height: 32px;
			background: #F8FDFF;
			border: 1px solid #E6F0F8;
			border-bottom: 0px solid #E6F0F8;
			padding: 5px 0;
			font-size: 14px;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #555555;
			line-height: 32px;
		}
	}
}

再来HTML

		

			日历
			

				
				
				
			
		
		
		
			
		
	

 JS