angularbootstrap-5angular-ui-bootstrapng-bootstrap

Add a icon on selected date in NGB Calendar

I am using ng-bootstrap datepicker to display calender in my app inline calendar, the calendar does not display a curent day icon like this.

enter image description here

Any idea for this? I tried with so many times but I was unable to find a way.

Solution

  • This link will help!

    You can completely replace how each date is rendered by providing a custom template and rendering anything you want inside. You'll get a date context available inside the template with info on whether current date is disabled, selected, focused, etc.

    For more info on what is provided in the template context, see the DayTemplateContext API

    Do the follow:

    <ngb-datepicker
            [dayTemplate]="t"
            #d1
            [formControl]="reactModel"
            [startDate]="model2"
            (dateSelect)="datePicked($event)"
          >
            <ng-template #t let-date>
              <button>{{ date.day }}</button>
            </ng-template>
          </ngb-datepicker>

    Here is the Stackblitz.