1

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?

1
  • you can use !important for one you want to trigger.
    – Lia
    Commented Dec 15, 2018 at 7:44

2 Answers 2

2

remove the weekend-cell-month when the day is today

[ngClass]="{'weekend-cell-month':((day.weekDay === 0 || day.weekDay === 6)&& !day.isToday), 
'today-cell-month':day.isToday }"
1

Try this

<div class="row-calendar">
    <div class="day-number" *ngFor="let day of days" [ngClass]="(day.weekDay === 0 || 
    day.weekDay === 6) && !day.isToday?'weekend-cell-month':'today-cell-month'">
        <label class="number-label"><span class="day-color"> {{day.name}}</span></label>
    </div>
</div>

It will apply the week-cell-month class if the day is weekend and not the day is today, and if the day is today the the class today-cell will be applied.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.