Angular calendar half hour in day view

Question

so i'm using the angular calendar, you can see this on https://mattlewis92.github.io/angular-calendar/#/kitchen-sink and i want set the half hour into segment hour.

So i follow this: https://github.com/mattlewis92/angular-calendar/issues/287

I've set this code into styles.scss

.cal-day-view .cal-hour-segment.cal-after-hour-start .cal-time {
  display: block;
}

But doesn't works, so, partially works: this is my result:

As you can see the segment show the same hour, every 07 08 ecc.. Maybe i didn't set something settings?

Someone can help me?

this is my html code:

 <mwl-calendar-day-view
          [viewDate]="viewDate"
          [events]="eventsArray[i]"
          [refresh]="refresh"
          [hourSegmentTemplate]="dayHourSegmentTemplate"
          [dayStartHour]="07"
          [dayStartMinute]="00"
          [dayEndHour]="22"
          [dayEndMinute]="00"
          (eventClicked)="eventClicked($event)"
          (dayClicked)="dayClicked($event)"
          (hourSegmentClicked)="hourSegmentGetClicked($event.date)"
          [eventTemplate]="eventTemplate"
          [eventTitleTemplate]="customDayTemplate"
          [hourSegments]="4"
        >
        </mwl-calendar-day-view>

Answer 1

I found the solution

Set in the app.module.ts

class CustomDateFormatter extends CalendarNativeDateFormatter {
  public dayViewHour({ date, locale }: DateFormatterParams): string {
    return new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: 'numeric' }).format(date);
  }
}

the add into providers

{ provide: CalendarDateFormatter, useClass: CustomDateFormatter }

thats works