Я использую angular-calendar-scheduler для создания представления календаря с моими событиями.
Прежде всего, я добавил его в свой core.module и установил локаль en и 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 {}
Это представление (экземпляр angular-календаря-планировщика):
<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>
и, наконец, реквизит для его заполнения:
@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;
Во всех примерах, которые я нашел, это работает с одним и тем же кодом. Но когда я запускаю его, значения отображаются следующим образом:
Мне тоже нужно посмотреть протокол.
6:00 6:15 6:30 6:45 ...
Возможно, вам придется изменить часовой сегмент.
#От часСегментов: 1 | 2 | 4 | 6 = 4;
#К часСегменты: число = 4;
Вероятно, потому, что вы не указали CalendarDateFormatter
в своем шаблоне.
providers: [
{
provide: CalendarDateFormatter,
useClass: SchedulerDateFormatter
},
],
Здравствуйте, спасибо за помощь. Тип «номер» не может быть присвоен типу «1 | 2 | 4 | 6'. 87 [hourSegments] = "hourSegments"