Ng-Bootstrap Datepicker how to highlight specific days in Angular4
I have a set of tasks, each containing a date. I would like to highlight the relevant days in the datepicker, but cannot seem to find in the documentation how to do this. Who can help?
https://ng-bootstrap.github.io/#/components/datepicker/api
Here is my typescript:
import { Component, OnInit } from '@angular/core';
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
const now = new Date();
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
model: NgbDateStruct;
date: {year: number, month: number};
selectToday() {
this.model = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
}
}
And the Html:
<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
+3
source to share
1 answer
For someone stuck, I had to define a custom dayTemplate.
Here is the Html:
<ngb-datepicker #dp
[(ngModel)]="model"
(navigate)="date = $event.next"
[dayTemplate]="customDay">
</ngb-datepicker>
<ng-template #customDay let-date="date" let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused">
<span class="custom-day lol"
[class.weekend]="isWeekend(date)"
[class.focused]="focused"
[class.bg-primary]="selected"
[class.hidden]="date.month !== currentMonth"
[class.text-muted]="disabled"
[class.has-task]="hasTask(date)"
(click)="showTasks(date)">
{{ date.day }}
</span>
</ng-template>
And Typescript:
import { Component, OnInit } from '@angular/core';
import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { UserService } from '../../services/user.service';
const now = new Date();
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
constructor(private userService: UserService) {
}
ngOnInit() {
}
model: NgbDateStruct;
selectToday() {
this.model = {
year: now.getFullYear(),
month: now.getMonth() + 1,
day: now.getDate(),
};
}
isWeekend(date: NgbDateStruct) {
const d = new Date(date.year, date.month - 1, date.day);
return d.getDay() === 0 || d.getDay() === 6;
}
isDisabled(date: NgbDateStruct, current: {month: number}) {
return date.month !== current.month;
}
hasTask(date: NgbDateStruct) {
return this.dateHasTask(date);
}
showTasks(date: NgbDateStruct) {
if (this.dateHasTask(date)){
// TODO show popup
alert(date);
}
}
dateHasTask(date: NgbDateStruct): boolean {
for (var i = 0; i < this.userService.user.tasks.length; i++) {
var taskDate = new Date(this.userService.user.tasks[i].date);
var day: number = taskDate.getDate();
var month: number = taskDate.getMonth() + 1;
var year: number = taskDate.getFullYear();
if (day === date.day && month === date.month && year === date.year) {
return true;
}
}
}
}
+3
source to share