我试图创建一个预览表，显示事件，我以前在这里寻求帮助，它解决了在表中定位元素的问题。用同样的逻辑，我试图创建一个预览根据持续时间（小时）和根据列采取的位置，并保存在事件列表中。
当我试图使预览它不带我很好的元素有时会出现，并在其他人消失我已经几个小时，但我仍然无法解决它，除了显示预览后，单击事件应保存。
为什么预览 Flink ？
这是我的代码：
堆栈 lightning 战：https://stackblitz.com/edit/angular-ivy-k22v8c?file=src/app/app.component.ts
超文本：

<div class="calendar-container">
  <table
    (mouseenter)="activatePreview()"
    (mouseleave)="deactivatePreview()"
    (mousemove)="calculatePreview($event)"
  >
    <tr>
      <th></th>
      <th class="cell-place" *ngFor="let place of places">{{ place }}</th>
    </tr>
    <tr *ngFor="let hour of hours">
      <td class="cell-hour">{{ hour }}</td>
      <td class="cell" *ngFor="let place of places"></td>
    </tr>
  </table>
  <div *ngIf="previewActive">
    <div class="preview" [ngStyle]="preview.position">
      <p>{{ preview.location }}</p>
    </div>
  </div>
  <div *ngFor="let event of events">
    <div class="event" [ngStyle]="event.position">
      <p>{{ event.location }}</p>
    </div>
  </div>
</div>

TS：

export class AppComponent implements AfterViewInit {
  hours = [
    '8:00 AM',
    '9:00 AM',
    '10:00 AM',
    '11:00 AM',
    '12:00 PM',
    '1:00 PM',
    '2:00 PM',
    '3:00 PM',
    '4:00 PM',
    '5:00 PM',
  ];
  places = ['P1', 'P2', 'P3', 'P4', 'P5'];
  events: any = [];

  cellWidth = 0;
  cellWidthHour = 0;
  cellHeight = 0;

  previewActive = false;
  previewDuration = 2;
  preview: any = {};
  currentCell = null;

  activatePreview() {
    this.previewActive = true;
  }

  deactivatePreview() {
    this.previewActive = false;
    this.currentCell = null;
    this.preview = {};
  }

  calculatePreview(event: any) {
    if (!this.previewActive) {
      return;
    }

    // Get the position of the cursor
    const x = event.clientX;
    const y = event.clientY;

    // Calculate the column (location) of the preview
    const columns = document.getElementsByClassName('cell-place');
    let column;
    for (const col of Array.from(columns)) {
      if (
        col.getBoundingClientRect().left <= x &&
        x <= col.getBoundingClientRect().right
      ) {
        column = col;
        break;
      }
    }

    if (!column) {
      return;
    }
    console.log(column);

    // Calculate the start and end times of the preview
    const rows = document.getElementsByClassName('cell-hour');
    let startIndex = -1;
    let endIndex = -1;
    for (let i = 0; i < rows.length; i++) {
      const row = rows.item(i);
      if (
        row.getBoundingClientRect().top <= y &&
        y <= row.getBoundingClientRect().bottom
      ) {
        startIndex = i;
        endIndex = i + this.previewDuration - 1;
        break;
      }
    }
    console.log(startIndex, endIndex);

    // Check if the preview goes beyond the limit of the table
    if (startIndex === -1 || endIndex === -1 || endIndex >= rows.length) {
      return;
    }

    // Check if the cursor is in a new cell
    const newCell = startIndex + '-' + endIndex;
    console.log(newCell);
    if (newCell === this.currentCell) {
      return;
    }
    this.currentCell = newCell;

    // Update the preview based on the calculations
    const startTime = this.hours[startIndex];
    const endTime = this.hours[endIndex];
    const location = column.innerHTML;

    this.preview = { startTime, endTime, location };
    this.preview.position = this.calculateEventPosition(
      startTime,
      endTime,
      location
    );
    console.log(this.preview);
  }

  constructor() {}

  ngAfterViewInit() {
    // this.getCellSize();
    this.createEvent('11:00 AM', '12:00 PM', 'P3');
  }

  createEvent(startTime: string, endTime: string, location: string) {
    const event: any = { startTime, endTime, location };
    event.position = this.calculateEventPosition(startTime, endTime, location);
    this.events.push(event);
  }

  calculateEventPosition(startTime: string, endTime: string, location: string) {
    const rect = document
      .getElementsByTagName('table')[0]
      .getBoundingClientRect();
    const columns = document.getElementsByClassName('cell-place');
    const rows = document.getElementsByClassName('cell-hour');
    const column = Array.from(columns).find((x) => x.innerHTML == location);
    const start = rows.item(this.hours.indexOf(startTime));
    const end = rows.item(this.hours.indexOf(endTime));

    const left = column.getBoundingClientRect().left - rect.left;
    const top = start.getBoundingClientRect().top - rect.top;
    const width = column.getBoundingClientRect().width;
    const height =
      end.getBoundingClientRect().top - start.getBoundingClientRect().top;

    return {
      height: height + 'px',
      top: top + 'px',
      left: left + 'px',
      width: width + 'px',
    };
  }
}

CSS：

.calendar-container {
  position: relative;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: center;
}

table td {
  height: 25px;
}

.event {
  box-sizing: border-box;
  position: absolute;
  background-color: #f2f2f2;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview {
  box-sizing: border-box;
  position: absolute;
  background-color: yellow;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

我已经创建了预览逻辑的一部分，但它不工作，因为它应该，它给我一个 Flink 错误，有时与延迟，也预览应该只有约小时，另一件事，让我怀疑是我如何才能保存与点击，事件有n持续时间，现在是在硬代码，必须根据位置列。