I have a calendar component with days in month.
I have put 2 css classes on a day cell with different colors, one for isToday and one for isWeekend and it works if they are not on the same day, but if they are on the same day, day cell will have the css class for isWeekend and I want to use the other one, isToday class.
There is my html code
<div class="row-calendar">
<div class="day-number" *ngFor="let day of days" [ngClass]="{'today-cell-month':day.isToday === true, 'weekend-cell-month':(day.weekDay === 0 || day.weekDay === 6)}">
<label class="number-label"><span class="day-color"> {{day.name}}</span></label>
</div>
</div>
I tried to change the order
[ngClass]="{'weekend-cell-month':(day.weekDay === 0 || day.weekDay === 6), 'today-cell-month':day.isToday === true,}
because i thought that the class for weekend overrides the one for today but won't work either How can I make the today css class to have priority?
!important
for one you want to trigger.