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?
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 }"
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.
Related
I have this div that will make a calendar, the v-for renders days depending of the month.
Also, there are dynamic classes binded by the :class="classesDay(day)".
One of that classes is ".selectable_dates" and it shows only when I click on any day of the month, and it will have the next 5 days as selectable_dates.
<div class="days_grid">
<div
v-for="(day, idx) in cal.monthDaysList"
:key="idx"
class="days_grid_item"
:class="classesDay(day)"
#click="selectDates(day)"
>
<div class="days_grid_item_inside" :class="classesDayInside(day)">
<p>
{{ day && day.date }}
</p>
</div>
<div class="days_grid_item_bg"></div>
</div>
</div>
in CSS I have this:
.days_grid > .selectable_dates:first-child {
color: red;
}
But that :first-child selector doesn't make anything, if I put just .days_grid > .selectable_dates, it will show all the texts in red, but I just need the first child to be in red.
I don't know if it is because that class is dynamic or what, but I can't make it work.
The code that put the classes dynamically is below:
classesDay(day) {
return {
selectable_dates:
this.fromDate !== null &&
this.toDate === null &&
day.Date >= this.fromDate.Date &&
day.Date <= this.maxDate,
};
So I am using ng-bootstraps datepicker to display some user data for each day. I use custom day template to apply certain CSS classes
<ng-template #customDay let-date>
<div
class="custom-day"
[ngClass]="evaluatePresenceType(date)"
>
{{ date.day }}
</div>
</ng-template>
The thing is this method is being called many times for each day which is less than optimal.
Is there a way to apply CSS class to every day just once, when the datepicker is being rendered and not every time I click anywhere?
When you want to use a custom template day to give some class to "specials days" you has two approach:
Use [ngClass] or [class.myClass]="function(date)" as you
indicate
Use DayTemplateData (see the docs)
Well, the doc is not very clear. The idea is to have a function,e.g.
data=(date: NgbDate, current?: {year: number, month: number})=>
{
//see that futhermore the "date" you has an object
//current with two properties: "year" and "month" that is showing
return this.calendar.getWeekday(date)>=6?'square':null
}
Then you use
<input class="form-control" [dayTemplateData]="data"
[dayTemplate]="customDay" ...>
And your template day pass the "data" using let-data=data
<ng-template #customDay let-date let-data="data" ...>
<span class="custom-day" [ngClass]="data" ...>
{{ date.day }}
</span>
</ng-template>
See that if you only want to apply an unique class your function can return true or null and use [class.myClass]="data"
In the stackblitz, I use the two approach and use two counters to show the improve of this another approach
I am new to Angular, and I am trying to style items after the 6th child but it doesn't work. I can color everything, but when I add the nth-child part it doesn't work. Do I have a wrong syntax?
[ngStyle] = "div:nth-child(n+6){'background-color': 'red'}"
<p *ngIf = "status"> Secret Password is Tuna</p>
<div *ngFor="let clickLog of clickLogs"
[ngStyle]="div:nth-child(n+6){{'background-color': 'red'}}">
{{clickLog}}
</div>
<button (click)="clickEvent()">Show Details</button>
<button [disabled]="!checkIfEmty()" (click)="resetUserName()">Reser Username</button>
</div>
You can use pseudo class in the component CSS file.
app.component.css
div:nth-child(n+6) {
background-color: red
}
But you should have proper structure for it in template.
Or you can use index of ngFor.
app.component.ts
<div *ngFor="let clickLog of clickLogs; index as i"
[ngStyle]="{'background-color': i >= 6 ? 'red' : '' }">
{{clickLog}}
</div>
I have a list of checkbox and I want to underline the one that is checked. My code looks like the following:
TS file:
currentQuarter: string;
quarters: Observable<MeseRiferimento[]>;
q1: MeseRiferimento = new MeseRiferimento();
q2: MeseRiferimento = new MeseRiferimento();
ngOnInit() {
q1.desc = "One";
q1.id = "1";
q2.desc = "Two";
q2.id = "2"
currentQuarter = q1.id;
quarters.of([q1, q2]);
}
isQuarterSelected(q: MeseRiferimento): boolean {
return this.currentQuarter === this.getKeyFromQuarter(q);
}
HTML file:
<div *ngFor="let q of quarters | async" class="col-1 my-auto m-stati">
<label class="custom-control custom-checkbox ra-check">
<input type="checkbox" class="custom-control-input" [ngClass]="{'checked': isQuarterSelected(q) }">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">{{q.descrizione}}</span>
</label>
</div>
CSS file:
.custom-control-input:checked~.custom-control-indicator {
color: #fff;
background-color: #3bb8eb;
}
These are the issue with this code:
1. when I load the page, the default checked checkbox has correctly the class 'checked' but the CSS is not applied, i.e. it's not underlined
2. when I manually select a checkbox the class 'checked' correctly applies and the CSS too applies
3. when I manually select another checkbox, the class 'checked' correctly switches from one to the other, but the CSS of the former do not update, i.e. the previous checkbox remains underlined
Thanks for any advice.
.custom-control-input:checked~.custom-control-indicator
:checked doesn't mean that it has the checked class, but it means that it's actually checked. If you want to select the checked class, use a dot in place of a colon:
.custom-control-input.checked~.custom-control-indicator
I want to have simple form validation on the STATES dropdown if and only if the country value is equal to USA or CANADA.
My validation works so far but its not dependent on the selection of USA or CANADA. Basically right now it will force you to select a state even if you select a country other than USA or CANADA.
<div class="row">
<div class="form-group" ng-class="{ 'has-error' : participantForm.country.$invalid && (!participantForm.country.$pristine || isSubmitted) }">
<div class="col-sm-6 key">Country<span class="req">*</span>:</div>
<div class="col-sm-6 val">
<select ng-model="participant.country" name="country" class="form-control" required ng-options="country.Key as country.Value for country in countries">
<option value="">SELECT</option>
</select>
<p ng-show="participantForm.country.$error.required && (!participantForm.country.$pristine || isSubmitted)" class="help-block">Select a country.</p>
</div>
</div>
<div class="row">
<div class="form-group" ng-class="{ 'has-error' : participantForm.state.$invalid && (!participantForm.state.$pristine || isSubmitted) }">
<div class="col-sm-6 key">US State or Canadian Province:</div>
<div class="col-sm-6 val">
<select ng-model="participant.state" name="state" class="form-control" required ng-options="state.Key as state.Value for state in states">
<option value="">SELECT</option>
</select>
<p ng-show="participantForm.state.$error.required && (!participantForm.state.$pristine || isSubmitted)" class="help-block">Your state is required for USA or Canada.</p>
</div>
</div>
If you give a value to the name property of the wrapping form element, AngularJS should automatically put an object on $scope by that name. For example, if you have the following:
<form name="participantForm">
<input name="state" />
</form>
$scope.participantForm will be an angular supplied object that allows you to access info about the form on the page. In addition to that, if there is a name property on a form input element, there will also be an angular supplied object that is a property of the form: $scope.participantForm["state"]
You actually use that in your view logic right now.
You should remove the "required" attribute on the select input element for the state/province so that it stops always requiring an input.
Instead, you should have a function that fires whenever the value of the state/province input changes, checks the value of the country field, and then manually sets the validity of the state/province field appropriately. The function may look like this:
$scope.validateStateField = function() {
var isValid = true;
var country = $scope.participant.country;
if (country === "USA" || country === "Canada") {
var state = $scope.participant.state;
isValid = state != null && state !== '';
}
$scope.participantForm["state"].$setValidity("required", isValid);
}
If you ensure that this function runs when the state field changes and when the user tries to submit the form, then you'll not only change the validity of the input appropriately but you'll also have a correct value to check before you proceed with submission logic:
if ($scope.participantForm.$valid) {
// Proceed because everything checks out
}
I believe there are also ways to create custom validators that are more native to Angular, but this is how I tend to manually approach dependent validation.