如何根据对象的时间属性显示特定时间范围内的对象？

Question

我正在为我的大学设计一个项目，试图显示学生的授课时间。我想知道哪种最好的方法是根据他们的时间属性在正确的位置显示讲座信息，讲座的矩形空间应该根据左侧的时间覆盖所需的时间范围。

我已经在下面上传了一个图像链接，关于我如何使其显示。

我想到的一个想法是，将左侧的时间范围划分为较小的块，大约5分钟，然后按像素指定这5分钟将覆盖多少区域。然后，取演讲时间，除以5分钟，然后乘以指定像素乘以5分钟，得出演讲块的高度。

Lecture Object

{
    "title": "Informaciniu sistemu saugumas",
    "type": "Laboratorinis",
    "start_time": "2019-04-30T08:00",
    "end_time": "2019-04-30T09:15",
    "classroom": "503a."
}

我希望能够根据他们的时间值在正确的位置显示演讲时间。

Answer 1

这是我的主意：

将时间表设为表格，使用colspan和rowspan将表格单元格扩展为所需的大小

要获得更好的功能和更复杂的情况，您可以使用Fullcalendar等日历，而不是！

td {
	padding: 10px 20px;
}

.math {
  background: rgba(100, 122, 200, 0.5)  
}

<table border="1">
		<tr>
			<td>8:15</td>
			<td></td>
			<td rowspan="3" class="math"></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>8:30</td>
			<td></td>
			<td style="display: none"></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>8:45</td>
			<td></td>
			<td style="display: none"></td>
			<td></td>
			<td></td>
		</tr>
    <tr>
			<td>9:00</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
</table>