downloading data from the calendar-CodePudding

I was able to write such an interface. Now I would like to be able to set ranges of hours with breaks for individual days of the week, e.g. for Monday I would like to be able to set e.g. the hours: 6-10, 14-17. Right now, I'm going to do it on clicks because dragging (mousedown, mousemove, mouseenter) seems quite advanced. Can anyone help me with this? How to retrieve data that the following times have been set for a given day?

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

CodePudding user response：

Not very s not very sophisticated, but as you are starting to do it in a simple way, maybe it will help you:

Here your code working fine with taht 'feature' you want: https://stackblitz.com/edit/angular-ivy-b1ecw5?file=src/app/app.component.ts

Add some index to yor for's in the HTML, and send them with your click() method:

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

In the 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);
  }