在Angular 4中更改NgbDatepicker的大小

Question

For some reason unknown to me, my NgbDatePicker is much smaller than I want it to be. It currently displays at the following size:

...when I was expecting it to display at the size in the example found here

One weird thing that I noticed is that the following portion of the datepicker in my application has the attribute _ngcontent-c0 set on its div:

...meanwhile the exact same portion of the example found on the website has the attribute _ngcontent-c4 set on its div. This means that their divs aren't even the same. This same attribute is also used in several css selectors.

This is the code in which I make the datepicker appear. I make it appear when an input field is clicked:

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input readonly class="form-control rounded" (click)="d.toggle()" (clickOutside)="onDocumentClick($event, d)" (ngModelChange)="onModelChanged($event)" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <svg><use xlink:href="sprite.svg#calendar"></use></svg>
    </div>
  </div>
</form>

This is the ngOnInit() code of the component that configures the DatePicker:

    ngOnInit(): void {
    let today = new Date();
    let todayInDateStruct = {day: today.getUTCDate(), month: today.getUTCMonth() + 1, year: today.getUTCFullYear()};
    this.config.maxDate = this.maxDate || todayInDateStruct;
    this.config.minDate = this.minDate || {year: 1900, month: 1, day: 1};

    if (this.minDate$) {
        Rx.on(this, this.minDate$, (minDate: NgbDateStruct) => {
            if (minDate) {
                this.config.minDate = minDate;
            }
        });
    }

    /*
     The following line sets the first day of the week on the Calendar to Sunday instead of the default Monday.

     source: https://ng-bootstrap.github.io/#/components/datepicker/api
     */
    this.config.firstDayOfWeek = 7;
    }

Is there any way of increasing the size of the NgbDatepicker without overriding several NgbDatepicker styles?

Answer 1

I think u can use this. create a custom template, for example:

 <ng-template #tpl let-date="date" let-currentMonth="currentMonth" let-selected="selected"> <div class="day">{{ date.day }} </div> </ng-template> 

then set the dayTemplate property: [dayTemplate]="tpl"

and CSS:

 .day { text-align: center; padding: 7px; border-radius: 1rem; width: 100% !important; } .ngb-dp-day{ width: 100% !important; height: 100% !important; } .ngb-dp-weekday{ width: 100% !important; height: 100% !important; } 

the padding is distance between day and day. because the default css for dayview and weekday is "width: 2rem, height: 2rem" so you need to modify it by add "!important".

add " encapsulation: ViewEncapsulation.None " into your component