<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="colors">
<div class="blue">Blue</div>
<div class="red">Red</div>
<div class="pink">Pink</div>
</div>
<table>
<tr>
<th></th>
<th>ПН, 27.05</th>
<th>ВТ, 28.05</th>
<th>СР, 29.05</th>
<th>ЧТ, 30.05</th>
<th>ПТ, 31.05</th>
<th>СБ, 01.06</th>
<th>ВС, 02.06</th>
</tr>
<tr>
<th rowspan="2" class="hours">19:00</th>
<td></td>
<td rowspan="2" class="shp">Шпагат<br/>Юлия</td>
<td></td>
<td rowspan="2" class="shp">Шпагат<br/>Юлия</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="mar">Хатха Йога<br/>Марина</td>
<td class="mar">Хатха Йога<br/>Марина</td>
<td class="mar">Хатха Йога<br/>Марина</td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="2" class="hours">20:00</th>
<td></td>
<td rowspan="2" class="strip">Стрип Пластика Юлия</td>
<td></td>
<td rowspan="2" class="strip">Стрип Пластика Юлия</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="nat">Functional Trainin<br/>Наталья</td>
<td class="nat">Functional Trainin<br/>Наталья</td>
<td class="nat">Functional Trainin<br/>Наталья</td>
<td ></td>
<td></td>
</tr>
<tr>
<th rowspan="2" class="hours">21:00</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th rowspan="2" class="hours">22:00</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script type="text/javascript">
$('.colors').hide();
$('td').on('click', function(){
$('td').attr('contenteditable', true);
$('.colors').show();
});
$('div.blue').on('click', function(){
$('td').css({'backgroundColor':'blue'});
})
</script>
</body>
</html>td.hours{
height: 150px;
width: 150px;
text-align: right;
}
body{
background: lightgray;
}
td{
background: #fff;
}
td{
border-radius: 5px;
height: 50px;
width: 100px;
text-align: center;
outline: none;
}
.mar{
background: lightgreen;
}
.nat{
background: green;
}
.shp{
background: #95ffc8;
}
.strip{
background: #ffe06e;
}
table{
}
.colors{
font-size: 20px;
position: absolute;
top: 30px;
left: 55%;
}
<div class="colors">
<div class="color" data-color="blue">Blue</div>
<div class="color" data-color="red">Red</div>
<div class="color" data-color="pink">Pink</div>
</div>let selectedTD = null;
const $colors = $('.colors').on('click', '.color', function() {
$(selectedTD).css('backgroundColor', this.dataset.color);
selectedTD = null;
$colors.hide();
}).hide();
$('table').on('click', 'td', function() {
selectedTD = selectedTD === this ? null : this;
$colors.toggle(!!selectedTD);
});