Поместите события календаря в таблицу по часам и отобразите длину события по времени начала и окончания в таблице.

Question

Я пытаюсь создать таблицу, в которой часы рабочего дня размещены слева и отображают события дня справа. Затем события начинаются во время начала события и заканчиваются во время окончания события. Я чувствую, что я как-то близок, я использую строки и colspan, которые просто портят мне настроение.

Пример массива событий

public actions = [
{
  title: 'Test Event',
  type: 'events',
  color: 'bg-primary',
  description: 'Lorem Ipsum Lorem Ipsum...',
  start_time: moment(new Date(2020, 4, 6, 7, 0)),
  end_time: moment(new Date(2020, 4, 6, 8, 0)),
}];
public times = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
public selectedTimes: any = [];

Этот блок кодов объединяет действия с объектом времени.

Object.keys(this.times).forEach(key => {
  let data = {
    time: this.times[key],
    events: []
  }
  let time = this.times[key];
  for (var i = this.actions.length - 1; i >= 0; i--) {
    let event = this.actions[i];
    if(event.type == this.selectedAction && event.start_time.hour() == time) {
      let eventLength = event.end_time.diff(event.start_time, 'hours')
      event['lengthInHours'] = eventLength;
      data.events.push(event);
    }  
  }
  this.selectedTimes.push(data);
});

Затем, наконец, шаблон html

<div class="events-wrapper">
<table class="table events-table">
    <tbody>
        <ng-container *ngFor="let time of selectedTimes">
            <tr>
                <td rowspan="3" class="align-middle" width="25%" [ngClass]="{ 'font-weight-bold text-info' : time.time == currentTime }">{{time.time | timeFormat}}</td>
            </tr>
            <ng-container *ngIf="time.events.length">
                <tr>
                    <td class="{{event.color}} text-white" *ngFor="let event of time.events">
                        {{event.title}}<br/>
                        {{event.start_time.format('h:mm a')}} - {{event.end_time.format('h:mm a')}}
                    </td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </ng-container>
            <ng-container *ngIf="!time.events.length">
                <tr>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </ng-container>
        </ng-container>
    </tbody>
</table>
</div>

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

.events-wrapper {
    height: 60%;
    overflow: scroll;
}

.events-table > tbody > tr > td {
    font-size: 12px;
}

На этом рисунке показана таблица без добавления каких-либо событий. Обратите внимание на строку в середине каждого часа, обозначающую полчаса.

На этом рисунке показана таблица с добавленными событиями. Обратите внимание, что строки больше не заканчиваются sh в каждой строке, и события не начинаются и не заканчиваются в назначенное время.

ОБНОВЛЕНИЕ

При использовании начальной загрузки классов d-flex, justify-content -ween и align-items-center мне удалось получить некоторый желаемый результат. За исключением того, что до сих пор не хватает «конечного» времени. Например, событие, которое заканчивается в 9:00 утра, должно быть расширено до слота 9:00 утра.

<div class="events-wrapper">
<div class="d-flex justify-content-between align-items-center border-bottom" *ngFor="let time of selectedTimes">
    <span class="time p-2">{{time.time | timeFormat}}</span>
    <span class="{{event.color}} event p-2 text-white" *ngFor="let event of time.events">
        {{event.title}}<br/>
        {{event.start_time.format('h:mm a')}} - {{event.end_time.format('h:mm a')}}
    </span>
</div>
</div>