angular - Ng Bootstrap日历，自定义布局

Question

我正在使用ng bootstrap获取两个日历，可以从中选择一个范围。
这是代码:

<ngb-datepicker #dp ngModel (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t">

<ng-template #t let-date="date" let-focused="focused">
    <span class="custom-day"
          [class.focused]="focused"
          [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
          [class.faded]="isHovered(date) || isInside(date)"
          (mouseenter)="hoveredDate = date"
          (mouseleave)="hoveredDate = null">
      {{ date.day }}
    </span>
  </ng-template>

但这有其自己的布局，我无法访问HTML以根据需要对其进行更改。
这是默认的样子:

Default Calendar Layout

我需要的是标题中的两面都是:

Custom Layout

有没有办法做到这一点 ？通常情况下，如何在ng-bootstrap上更改此类内容？

任何指导表示赞赏。谢谢!

Answer 1

“键”将覆盖该类。您可以在component.css中使用

    :host /deep/ ngb-datepicker .custom-select{
      -webkit-appearance: caret;
      -moz-appearance: caret;
      appearance: caret;
      background:none;
    }

    :host /deep/ ngb-datepicker .btn-link {
        display: none;
    }        
//If we surrender about "caret" I suppose we can add this css
    :host /deep/ ngb-datepicker .btn-link {
        display: none;
    }

    :host /deep/ ngb-datepicker ngb-datepicker-navigation-select {
        width: 100% !important;
    }
    :host /deep/ ngb-datepicker .custom-select {
        background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath stroke='%23333' stroke-width='.5' fill='none' d='M 1 1 L 2.5 5 L 4 1'/%3E%3C/svg%3E") no-repeat right .75rem center
        width: 48% !important;
        margin-left: 1%;
    }