After sett ing up, you need a timetable component. If you can't find any information on the Internet, you write one yourself. There may be some bug s
Based on elementui and jquery
Because the cell click event is filled with the color I use, I can't write the event by myself. You can use the parent component to monitor the change of v-model binding data to process the cell click event

html

<template>    
<div :id="id">        
	<el-table            
		border            
		:data="courseData"            
		:row-class-name="tableRowClassName"            
		@cell-click="courseTableCellClick"            
		:highlight-current-row="false"            
		:stripe="false"            
		style="width: 100%">            
		<el-table-column                
			fixed                
			header-align="center"                
			align="center"                
			prop="session"                
			label=""                
			:width="sidebarWidth">            
		</el-table-column>            
		<el-table-column                
			v-for="item in columns"                
			align="center"                
			:key="item.prop"                
			:prop="item.prop"                
			:label="item.label">               
		</el-table-column>        
	</el-table>    
</div>
</template>

js

export default{    
	name: 'course-table',   
	props: {        
		id: {            
			// Unique identification of table, convenient for jquery operation            
			type: String,            
			required: true        
		},        
		topbar: {            
			// Upper sidebar            
			type: Array,            
			required: false,            
			default: function(){                
				return ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven'];            
			}        
		},        
		sidebar: {            
			// Left sidebar            
			type: Array,            
			required: false,            
			default: function(){                
				return ['1','2','3','4','5','6','7','8','9','10','11','12'];            
			}        
		},        
		sidebarWidth: {            
			// Left column width            
			type: Number,            
			require: false,            
			default: function(){                
				return 55            
			}        
		},        
		data: {            
			// data            
			type: Array,            
			required: false,            
			default: function(){                
				var data = [];                
				for(var i = 0; i < this.sidebar.length; i++){                    
					// The format of the incoming parameter is also as follows                    
					// session must be consistent with that in sidebar                    
					data.push({                        
						session: (i + 1).toString(),                        
						Mon: '',                        
						Tue: '',                        
						Wed: '',                        
						Thur: '',                        
						Fri: '',                        
						Sat: '',                        
						Sun: '',                        
						// Selective filling                        
						// Mon_classid: '',                        
						// Tue_classid: '',                        
						// Wed_classid: '',                        
						// Thur_classid: '',                       
						// Fri_classid: '',                        
						// Sat_classid: '',                        
						// Sun_classid: ''                    
					})                
				}                
				return data;            
			}        
		},        
		color: {            
			// colour            
			type: Array,            
			required: false,            
			default: function(){                
				return ['#a0cfff', '#b3e19d', '#f3d19e', '#fab6b6', '#c6e2ff', '#f0f9eb', '#fdf6ec', '#fef0f0'];            
			}        
		},        
		selectChangeColor: {            
			// Click discoloration            
			type: [Boolean, String],            
			required: false,            
			default: function(){                
				return false;            
			}        
		},        
		showBackgroundColor: {            
			// Show background color            
			type: Boolean,            
			required: false,            
			default: function(){                
				return false;            
			}        
		}    
	},    
	data(){        
		return {            
			weekday: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],            	
			selectData: []        
		}    
	},    
	computed: {        
		columns: function(){            
			// Table top bar            
			var data = [];            
			for(var i = 0; i < this.topbar.length; i++){                
				data.push({                    
					prop: this.weekday[i],                    
					label: this.topbar[i]                
				})            
			}            
			return data;        
		},        
		courseData: function(){            
			// Table data display            
			var temp = [];
			this.sidebar.forEach(item => {                
				temp.push({                    
					session: item,                    
					Mon: '',                    
					Tue: '',                    
					Wed: '',                    
					Thur: '',                    
					Fri: '',                    
					Sat: '',                    
					Sun: ''                
				})            
			})
			this.data.forEach(item => {                
				var index = temp.findIndex(citem => {                    
					return item.session == citem.session;                
				})                
				if(index != -1){                    
					for(let key in item){                        
						temp[index][key] = item[key];                    
					}                
				}            
			})
			return temp;        
		},        
		selectTag: function(){            
			// Click mark            
			var temp = [];
			for(var i = 0; i < this.sidebar.length; i++){                
				var option = {                    
					session: this.sidebar[i]                
				};                
				for(let j in this.weekday){                    
					option[this.weekday[j]] = false;                
				}                
				temp.push(option)            
			}
			return temp;        
		},        
		selectColor: function(){            
			// Click color            
			if(typeof(this.selectChangeColor) == 'string'){                
				return this.selectChangeColor;            
			}            
			else if(this.selectChangeColor){                
				return '#a0cfff';            
			}            
			else{                
				return false;            
			}        
		}    
	},    
	methods: {        
		tableRowClassName({row, rowIndex}){            
			row.index = rowIndex;        
		},        
		courseTableCellClick(row, column){            
			// Schedule setting            
			var cindex = this.weekday.indexOf(column.property) + 1;            
			if(column.property != 'session'){                
				if(this.selectChangeColor){                    
					// Turn on click to switch colors                    
					// Return to all cells for switching colors                    
					if(this.selectTag[row.index][column.property]){                        
						// Deselected                        
						this.selectTag[row.index][column.property] = false;                        
						$('#'+ this.id +' .el-table__row').eq(row.index).children('td').eq(cindex).css({'background':'transparent'});                        
						var sindex = this.selectData.findIndex(item => {                            
							return item.coordinate == column.property + '-' + row.session;                        						})                        
						if(sindex != -1){                            
							this.selectData.splice(sindex, 1);                        
						}                        
						this.$emit('input', this.selectData);                    
					}                    
					else{                        
						// Choice                        
						this.selectTag[row.index][column.property] = true;                        
						$('#'+ this.id +' .el-table__row').eq(row.index).children('td').eq(cindex).css({'background':this.selectColor});                        		
						this.selectData.push({                            
							coordinate: column.property + '-' + row.session,                             
							data: this.courseData[row.index][column.property],                            
							classid: this.courseData[row.index][column.property + '_classid']                        						})                        
						this.$emit('input', this.selectData);                    
					}                
				}                
				else{                    
					// Click to switch color                    
					// Return to clicked cell                    
					this.selectData = {                        
						coordinate: column.property + '-' + row.session,                        
						data: this.courseData[row.index][column.property],                        
						classid: this.courseData[row.index][column.property + '_classid']                    
					}                    
					this.$emit('input', this.selectData);                
				}            
			}        
		},        
		cleanSelect(){            
			// wipe data
			this.selectData = [];            
			this.$emit('input', this.selectData);            
			$('#'+ this.id +' .el-table__row td').css({'background':'transparent'})            
			for(var i in this.selectTag){                
				for(let j in this.weekday){                    
					this.selectTag[i][this.weekday[j]] = false;                
				}            
			}
		},        
		isEmpty(value){            
			return (                
				value === undefined ||
				value === null ||                
				(typeof value === 'object' && Object.keys(value).length === 0) ||                
				(typeof value === 'string' && value.trim().length === 0)            
			)        
		}    
	},    
	watch:{        
		data: {            
			handler(data){                
				if(this.showBackgroundColor){                    
					$('#'+ this.id +' .el-table__row td').css({'background':'transparent'});                    
					// Delay, solve the lazy rendering problem of dialog in elementui component                    
					setTimeout(() => {                        
						var temp = [];                        
						data.forEach(item => {                            
							// That's ok                            
							var rindex = this.sidebar.indexOf(item.session);                            
							for(let key in item){                                
								if(key != 'session'){                                    
									// column                                    
									var cindex = this.weekday.indexOf(key) + 1;                                    
									var color = this.color[temp.length%this.color.length];                                    
									// Set the same color for the same content                                    
									var index = temp.findIndex(citem => {                                        
										return citem.data == item[key];                                    
									})                                    
									if(index == -1 && cindex != 0){                                        
										temp.push({                                            
											data: item[key],                                            
											color: this.color[temp.length%this.color.length]                                        
										})                                    
									}                                    
									else if(index != -1){                                        
										color = temp[index].color;                                    
									}                                    
									if(cindex != 0){                                        
										$('#'+ this.id +' .el-table__row').eq(rindex).children('td').eq(cindex).css({'background':color});                                    
									}                                
								}                            
							}                        
						})                    
					},0)                
				}            
			},            
			immediate: true, // First incoming monitoring            
			deep: true  // Deep monitoring, which can monitor the internal changes of arrays and objects        
		}    
	}
}

Design sketch