Блог

Я смог написать такой интерфейс. Теперь я хотел бы иметь возможность устанавливать диапазоны часов с перерывами для отдельных дней недели, например, для понедельника я хотел бы иметь возможность устанавливать, например, часы: 6-10, 14-17. Прямо сейчас я собираюсь делать это по щелчкам, потому что перетаскивание (mousedown, mousemove, mouseenter) кажется довольно продвинутым. Кто-нибудь может мне помочь с этим? Как получить данные о том, что для данного дня было установлено следующее время?

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

Не очень сложный, но поскольку вы начинаете делать это простым способом, возможно, это вам поможет:

Здесь ваш код отлично работает с нужной вам «функцией»: https://stackblitz.com/edit/angular-ivy-b1ecw5?file=src/app/app.component.ts

Добавьте некоторый индекс к вашим for в HTML и отправьте их с помощью метода 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);
  }