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

【问题标题】：How to display objects in certain time range based on their time property?如何根据时间属性显示特定时间范围内的对象？
【发布时间】：2019-09-18 22:09:56
【问题描述】：

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

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

我想出的一个想法是将左侧的时间范围划分为更小的块，大约 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."
}

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

【问题讨论】：

当没有与这些标签相关的代码时，为什么您的问题会被这些标签标记？您是否期望我们使用这些技术编写代码（可能除了 JS 对象字面量，但那只是数据）？如果是这样，那么这个问题就太宽泛了。当您遇到特定编程问题时，我们可以尝试提供帮助，但我们需要查看您的代码以及您在该代码中的确切位置卡住了。请仅使用与您遇到问题的代码相关的标签进行标记。

标签： javascript mysql node.js express ejs

【解决方案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>

【讨论】：