JSFiddle - React, Tailwind, and code Playground
HTML
<table class="table-condensed calendar">
<thead>
<tr class="dotw">
<td>ПН</td>
<td>ВТ</td>
<td>СР</td>
<td>ЧТ</td>
<td>ПТ</td>
<td>СБ</td>
<td>ВС</td>
</tr>
</thead>
<tbody>
<tr>
<td class="off-date">31</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td class="event-number">5</td>
<td>6</td>
</tr>
<tr class="event-text">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="event-background">Концерт в
<br> омске</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr class="event-text">
<td></td>
<td></td>
<td></td>
<td></td>
...
CSS
.calendar tbody {
position: relative;
}
.event-number {
background: #134699;
color: #fff;
}
.event-background {
position: absolute;
display: none;
}
JavaScript
$(document).ready(function(){
$(".event-number").click(function(){
$(".event-background").slideToggle("slow");
return false;
});
});