Ng-Bootstrap Datepicker、Angular4で特定の日を強調する方法

Question

私にはタスクの配列があり、それぞれに日付が含まれています。私はdatepickerで一致する日を強調したいが、それを達成するためにドキュメントで見つけることはできないようだ。誰でも手伝うことができますか？ここで

https://ng-bootstrap.github.io/#/components/datepicker/api

私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()}; 
    } 
} 

とHTML：立ち往生他の誰のために

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker> 

Answer 1

、私はカスタムdayTemplateを定義する必要がありました。ここで

は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> 

と活字体：

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; 
     } 
    } 
    } 

}