how css apply red in calendar when the time is unvailable

Question

I would like show unavailable time in apply background red, this is a picture to explain what I would like to do

I have hours of work, for example 8H to 17H, if one of the hours is unavailable I would like to apply red color, how I can do that ? I think to save my date "heure" to Array JSON ? or directly JSON ? This is how I tried

  constructor(private _calendar: CalendarModel) {
    let plageJour = this.trancheFin - this.trancheDeb;

    for (let i = 0; i < plageJour; i++) {
      this.libelleTranche.push({"heure":"i + this.trancheDeb","unvailable":true});
    }

  }

And if the hour is unavailble I apply

    <a *ngIf="???" [ngStyle]="{background:invailable}">
        {{ heure }}H-{{heure+1}}H
    </a>

import { Component, OnInit } from '@angular/core';
import { CalendarModel } from '../calendar-model';

@Component({
  selector: 'app-heure',
  templateUrl: './heure.component.html',
  styleUrls: ['./heure.component.css']
})
export class HeureComponent implements OnInit {

  invailable="red";
  trancheDeb: number = 8;
  trancheFin: number = 17;
  dateNow0: number;//le début du jour d'aujourdh'ui à 00H en timestamp

  libelleTranche = new Array(); //calculé fin de tranche - debut de tranche

  constructor(private _calendar: CalendarModel) {
    let plageJour = this.trancheFin - this.trancheDeb;

    for (let i = 0; i < plageJour; i++) {
      this.libelleTranche.push(i + this.trancheDeb);
    }

  }

Answer 1

The thinking is correct, but there are a few wrong things :

• in your template, you wrote inavailable instead of heure.unavailable

• {"heure":"i + this.trancheDeb"} should be {"heure": i + this.trancheDeb}

• { background : heure.unavailable } will just yield { background : true } or { background : false } which won't do anything.

Instead, set a class :

<a [class.red]="heure.unavailable">

Alternatively :

<a [ngClass]="{ red : heure.unavailable }">

and in the CSS :

a.red{
  background-color : red;
}