angular calendar scheduler dont show minutes in hour column

Question

Im using angular-calendar-scheduler to create a calendar view with my events.

First of all, i added it in my core.module and set the locale to en and en_US.

registerLocaleData(localeEn);

export function momentAdapterFactory() {
  return adapterFactory(moment);
};

 @NgModule({
  imports: [
    CommonModule,
    MaskitoDirective,
    IonicModule.forRoot(),
    NgToastModule,
    CalendarModule.forRoot({ provide: DateAdapter, useFactory: momentAdapterFactory }),
    SchedulerModule.forRoot({ locale: 'en', headerDateFormat: 'daysRange' }),
  ],
  declarations: [
    SimpleNotifyComponent,
    FormNotifyComponent,
    ConfirmationNotifyComponent,
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: ErrorHandler, useClass: ErrorHandlerService },
    { provide: LOCALE_ID, useValue: 'en-US' },
    { provide: MOMENT, useValue: moment }
  ],
  exports: [IonicModule, NgToastModule, MaskitoDirective, CalendarModule, SchedulerModule],
})
export class LibrariesCoreUtilsModule {}

This is the view (instance of angular-calendar-scheduler):

    <div [ngSwitch]="view">
    <calendar-scheduler-view
      *ngSwitchCase="CalendarView.Week"
      [viewDate]="viewDate"
      [events]="myEventsInput"
      [locale]="locale"
      [viewDays]="viewDays"
      [weekStartsOn]="weekStartsOn"
      [excludeDays]="excludeDays"
      [startsWithToday]="startsWithToday"
      [hourSegments]="hourSegments"
      [dayStartHour]="dayStartHour"
      [dayEndHour]="dayEndHour"
      [dayModifier]="dayModifier"
      [hourModifier]="hourModifier"
      [segmentModifier]="segmentModifier"
      [eventModifier]="eventModifier"
      [showEventActions]="true"
      [showSegmentHour]="false"
      [zoomEventOnHover]="true"
      (dayHeaderClicked)="dayHeaderClicked($event.day)"
      (hourClicked)="hourClicked($event.hour)"
      (segmentClicked)="segmentClicked('Clicked', $event.segment)"
      (eventClicked)="eventClicked('Clicked', $event.event)"
      (eventTimesChanged)="eventTimesChanged($event)"
      [refresh]="refresh"
    >
    </calendar-scheduler-view>
  </div>

and finally the props to fill it:

@Input() myEventsInput: CalendarSchedulerEvent[] = [];

  title = 'Angular Calendar Scheduler Demo';

  CalendarView = CalendarView;

  view: CalendarView = CalendarView.Week;
  viewDate: Date = new Date();
  viewDays: number = DAYS_IN_WEEK;
  refresh: Subject<any> = new Subject();
  locale = 'pt-BR';
  hourSegments: 1 | 2 | 4 | 6 = 4;
  weekStartsOn = 1;
  startsWithToday = true;
  activeDayIsOpen = true;
  excludeDays: number[] = []; // [0];
  weekendDays: number[] = [0, 6];
  dayStartHour = 6;
  dayEndHour = 22;

  minDate: Date = new Date();
  maxDate: Date = endOfDay(addMonths(new Date(), 1));

  dayModifier!: Function;
  hourModifier!: Function;
  segmentModifier: Function;
  eventModifier: Function;

  prevBtnDisabled = false;
  nextBtnDisabled = false;

In all the examples that i found it work, with the same code. But when i run it, the values are show like this:

I need to see the minutes too.

6:00 6:15 6:30 6:45 ...

Answer 1

Probably because you're not providing CalendarDateFormatter to your template.

providers: [
    {
      provide: CalendarDateFormatter,
      useClass: SchedulerDateFormatter
    },
  ],