从日历下载数据

Question

我写了一个这样的界面。现在我希望能够为一周中的每一天确定休息的时间范围，例如星期一我想设定的时间范围是: 6-10，14-17。现在，我要做的是点击，因为拖动(鼠标向下，摩丝，鼠标)似乎相当先进。有人能帮我吗？如何检索给定一天的下列时间设置的数据？

https://stackblitz.com/edit/angular-ivy-vf9esz?file=src%2Fapp%2Fapp.component.html

Answer 1

不是很复杂，但当你开始用简单的方式来做的时候，也许它会对你有帮助：

在这里，您的代码可以很好地使用所需的taht“功能”：https://stackblitz.com/edit/angular-ivy-b1ecw5?file=src/app/app.component.ts

将一些索引添加到HTML中的for's中，并使用click()方法发送它们：

<tr *ngFor="let row of arr, index as day">
   <td class="border-0">
      <p class="text-right mr-2">{{ row.name }}</p>
   </td>
   <td
      (click)="click($event, day, range)"
      class="border"
      style="width: 25px; background-color: rgba(241, 236, 236, 0.363);"
      *ngFor="let cell of row.items, index as range"
   ></td>

在ts中：

  weekDaysRangeSelected = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  ];

click(e, day: number, range: number) {
    console.log('klik');
    e.target.style.backgroundColor = 'red';

    console.log('day, range:', day, range);

    this.weekDaysRangeSelected[day][range] = 1;

    console.log(this.weekDaysRangeSelected);
  }