如何将以下时间选择作为调度组件的一部分来实现？

Question

我有以下生成时间表矩阵的草图（y 轴时间步长和 x 轴日期）：

<table class="table">
  <thead>
  <tr class="header">
    <th></th>
    <th *ngFor="let day of weekDays">
      <small *ngIf="day.isToday">Today</small>
      <br/> {{day.title}}
    </th>
  </tr>
  </thead>
  <tbody *ngIf="this.schedule !== undefined">
  <tr *ngFor="let time of this.schedule.commonTimes">
    <td class="common-time">{{time}}</td>
    <td *ngFor="let day of weekDays">
      <div class="appointment-time" (click)="selectAppointmentTime(this.schedule.groupedDayTimes[day.code][time])"
           *ngIf="this.schedule.groupedDayTimes[day.code] !== undefined && this.schedule.groupedDayTimes[day.code][time] !== undefined">
              <span>
                  {{this.schedule.groupedDayTimes[day.code][time].dateTime.format('hh:mm A')}}
              </span>
      </div>
    </td>
  </tr>
  </tbody>
</table>

并产生以下输出：

但是，它在用户体验方面不是很好，因为 timeStep 15m 的值需要向下滚动很多条目。

因此我想要更像下面的草图，其中基本上 y 轴勾勒出每个小时的开始，天列包含多个时间段：

哪种 HTML 结构最适合实现这种浮动多列方法？有什么关于如何让它也适合移动设备的建议吗？

Answer 1

看到你的问题，我想起了 Masonry，很久以前我就用它来做这样的事情。 https://masonry.desandro.com/faq.html

Masonry FAQ 把我带到了Packery，它支持拖拽交互。 https://packery.metafizzy.co/

然后还有 Isotope，它也有关于所有三个包的一些信息：https://isotope.metafizzy.co/faq.html#difference-between-isotope-masonry-and-packery

如何将以下时间选择作为调度组件的一部分来实现？

How to implement the following time-selection as part of a scheduling component?

html

angular

angular7