Angular-calendar: during navigation week view is rendered next to previous week view

I am using the angular-calendar component in an Ionic Angular project and have problems implementing a calendar in week view. When navigating the calendar (forward or backward), the week view gets duplicated and appears in the same view. The picture below shows what I mean. I am looking for the cause of this.



My main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { enableProdMode, importProvidersFrom } from '@angular/core';
import { AppComponent } from './app/app.component';
import { browserLocalPersistence, indexedDBLocalPersistence, provideAuth, getAuth } from '@angular/fire/auth';
import { IonicModule, isPlatform } from '@ionic/angular';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideHttpClient, HttpClient } from '@angular/common/http';
import { provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
import { ServiceWorkerModule } from '@angular/service-worker';
import { IonicStorageModule } from '@ionic/storage-angular';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { routes } from './app/app-routing.module';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { provideAnimations } from '@angular/platform-browser/animations';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { registerLocaleData } from '@angular/common';
import localeFi from '@angular/common/locales/fi';

import { firebaseConfig } from './config/app.config';

enableProdMode();

registerLocaleData(localeFi);

export function translationLoader(http: HttpClient) {
return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

bootstrapApplication(AppComponent, {
providers: [
provideAnimations(),
provideHttpClient(),
provideFirebaseApp( () => initializeApp(firebaseConfig)),
provideAuth(() => {
const auth = getAuth();
if (isPlatform('android')) {
auth.setPersistence(indexedDBLocalPersistence);
} else {
auth.setPersistence(browserLocalPersistence);
}
return auth;
}),
provideRouter(routes, withPreloading(PreloadAllModules)),
importProvidersFrom(
IonicModule.forRoot(),
IonicStorageModule.forRoot(),
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: !isPlatform('android'),
registrationStrategy: 'registerWhenStable:30000'
}),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (translationLoader),
deps: [HttpClient]
}
}),
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory
})
)
]
}).catch(err => console.error(err));


The calendar in the HTML template:

<mwl-calendar-week-view
[locale]="locale"
[refresh]="refresh"
[viewDate]="calendarView.date"
[dayStartHour]="calendarConfig.dayStartHour"
[dayEndHour]="calendarConfig.dayEndHour"
[weekStartsOn]="1"
[hourDuration]="60"
[hourSegments]="calendarConfig.hourSegments"
[excludeDays]="calendarConfig.excludeDays"
[events]="events"
(eventClicked)="handleEvent($event)"
(eventTimesChanged)="eventTimesChanged($event)"
>
</mwl-calendar-week-view>


The events in the image are populated correctly and show up as expected. My instinct tells me something is wrong with the imports, but whatever I tried fails to give any result. Any ideas?

Continue reading...