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

Question

我正在为我的大学做一个项目，我试图在其中显示学生的上课时间。我想知道根据时间属性在正确位置显示讲座信息的最佳方法是什么，讲座的矩形空间应根据左侧的时间覆盖所需的时间范围。

我在下面上传了一个图片链接，说明我是如何尝试让它显示出来的。

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

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>