Angular-calender short date format not working

Question

I would like to use the shorte date format that you can see here customise-date-formats I am using angular-calendar 0.28.28.

But I get this erreur

monthViewDayNumber is not a valid date formatter. Can only be one of monthViewColumnHeader, monthViewDayNumber, monthViewTitle, weekViewColumnHeader, weekViewColumnSubHeader, weekViewTitle, weekViewHour, dayViewHour, dayViewTitle

I have the following code for my provider

import { formatDate } from '@angular/common';
import { Injectable } from '@angular/core';
import { DateFormatterParams } from 'angular-calendar';

@Injectable()
export class CustomDateFormatter {
  // you can override any of the methods defined in the parent class

  public monthViewColumnHeader({ date, locale }: DateFormatterParams): string {
    return formatDate(date, 'EEE', locale);
  }

  public monthViewTitle({ date, locale }: DateFormatterParams): string {
    return formatDate(date, 'MMM y', locale);
  }

  public weekViewColumnHeader({ date, locale }: DateFormatterParams): string {
    return formatDate(date, 'EEE', locale);
  }

  public dayViewHour({ date, locale }: DateFormatterParams): string {
    return formatDate(date, 'HH:mm', locale);
  }
}

Next I have the following UI

  <div class="card">
          <div class="card-header">Events</div>
          <div class="card-body" style="min-height:500px">
            <div class="row text-center">
              <div class="col-md-12">
                <div class="d-inline"
                     mwlCalendarPreviousView
                     [view]="view"
                     [(viewDate)]="viewDate" >
                  <span class="material-icons" style="font-size:20px">
                    chevron_left
                  </span>
                </div>
                <h3 class="d-inline">{{ viewDate | calendarDate:(view + 'ViewTitle'):locale:weekStartsOn }}</h3>
                <div class="d-inline"
                     mwlCalendarNextView
                     [view]="view"
                     [(viewDate)]="viewDate"  >
                  <span class="material-icons" style="font-size:20px">
                    chevron_right
                  </span>
                </div>
              </div>
            </div>
            <ng-template #loading>
              <div class="col-md-12 mb-3">
              <div class="spinner-border text-center text-primary" style="width: 3rem; height: 3rem;" role="status">
                <span class="sr-only">Loading events...</span>
              </div>
              </div>
            </ng-template>
            <div *ngIf="events$ | async; else loading; let events">
              <div class="col-md-12 mb-3" [ngSwitch]="view">
                <mwl-calendar-month-view *ngSwitchCase="CalendarView.Month"
                                         [viewDate]="viewDate"
                                         [events]="events"
                                         [refresh]="refresh"
                                         [activeDayIsOpen]="activeDayIsOpen"
                                         [excludeDays]="excludeDays"
                                         (dayClicked)="dayClicked($event.day)"
                                         (eventClicked)="eventClicked($event.event)"
                                         (eventTimesChanged)="eventTimesChanged($event)">
                </mwl-calendar-month-view>
              </div>
            </div>
          </div>
        </div>

Then here is the component code in part

@Component({
  selector: 'app-kanban-board',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './kanban-board.component.html',
  styleUrls: ['./kanban-board.component.css'],
  providers: [
    {
      provide: CalendarDateFormatter,
      useClass: CustomDateFormatter,
    },
  ],
})
export class KanbanBoardComponent implements OnInit {

  @ViewChild('modalContent', { static: true }) modalContent: TemplateRef<any>;

  view: CalendarView = CalendarView.Month;

  // exclude weekends
  excludeDays: number[] = [0, 6];

  weekStartsOn = DAYS_OF_WEEK.SUNDAY;

  CalendarView = CalendarView;

  viewDate: Date = new Date();
  events$: Observable<CalendarEvent<{ Object: ContractAndMiscellaneousDate }>[]>;

 }

Answer 1

I figured it out I added the following code.

  public monthViewDayNumber({ date, locale }: DateFormatterParams): string {
    return formatDate(date, 'd', locale);
  }

Now it works