Как отобразить объекты в определенном временном диапазоне, основываясь на их свойстве времени? - PullRequest
Новая
       17

Как отобразить объекты в определенном временном диапазоне, основываясь на их свойстве времени?

1 голос
/ 30 апреля 2019

Я делаю проект для своего университета, в котором я пытаюсь показать время лекций студентов. Мне было интересно, что будет лучшим подходом для отображения информации лекции в правильном положении, основанном на их свойстве времени, прямоугольное пространство лекции должно охватывать необходимый временной диапазон, основанный на времени на левой стороне.

Я загрузил ссылку на изображение ниже, о том, как я пытался ее отобразить.

enter image description here

Одна из идей, которые я выдвинул, - это разделить временные диапазоны с левой стороны на более мелкие куски, примерно на 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."
}

Я хотел бы иметь возможность отображать время лекций в правильном положении на основе их значений времени.

1 Ответ

0 голосов
/ 30 апреля 2019

Вот моя идея:

Создайте свое расписание в таблице, увеличьте ячейку таблицы до желаемого размера, используя 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>
...