My environment is the following:
- Mobiscroll 5.22.3
- Angular 15.2.0
I have been able to reproduce the error outside of my application. I will explain the steps to follow to reproduce it:
1. Create a new Angular application by executing with the Angular CLI the following command:
ng new test-app --skip-install
Make sure that you’re using Angular 15.
2. Install Mobiscroll version 5.22.3
3. In the file main.ts I changed it to the following (it won’t affect the end result):
import { bootstrapApplication } from '@angular/platform-browser';
import { EnvironmentProviders, Provider } from '@angular/core';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent).catch(err => console.error(err));
4. In the file styles.scss I have the following:
$mbsc-material-theme: true;
$mbsc-datepicker: true;
$mbsc-eventcalendar: true;
$mbsc-forms: true;
$mbsc-grid-layout: true;
$mbsc-popup: true;
$mbsc-select: true;
@import "@mobiscroll/angular/dist/css/mobiscroll.modular";
5. Remove any module or routing module (you won’t be needing them as we’re using standalone components)
6. In the file app.component.ts I changed it to the following:
import {
MbscCalendarEvent,
MbscEventcalendar,
MbscEventcalendarModule,
MbscEventcalendarOptions,
} from '@mobiscroll/angular';
import { Component, ViewChild } from '@angular/core';
@Component({
standalone: true,
imports: [
MbscEventcalendarModule,
],
selector: 'app-root',
template: `
<div class="row">
<button (click)="handlePrevious()">
Previous Year
</button>
<button (click)="handleNext()">
Next Year
</button>
</div>
<mbsc-eventcalendar
#calendar
locale="ca"
theme="material"
themeVariant="light"
[showControls]="false"
[options]="options"
[data]="data"
></mbsc-eventcalendar>
`,
styles: [`
.row {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
width: auto;
padding: 0.5rem 1rem;
margin-bottom: 2rem;
}
button {
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0.5rem;
height: 40px;
border: none;
color: #000;
background-color: #DEDEDE;
border-radius: 0.25rem;
cursor: pointer;
appearance: none;
}
`],
})
export class AppComponent {
@ViewChild('calendar') private readonly _calendarEl?: MbscEventcalendar;
options: MbscEventcalendarOptions = {
view: {
calendar: {
type: 'year',
popover: false,
},
},
};
data: MbscCalendarEvent[] = [
{
allDay: true,
date: '2023-04-23',
},
];
selectedDate = new Date();
handleNext(): void {
this.selectedDate = new Date(this.selectedDate.getFullYear() + 1, 0, 1);
this._calendarEl?.navigate(this.selectedDate);
}
handlePrevious(): void {
this.selectedDate = new Date(this.selectedDate.getFullYear() - 1, 0, 1);
this._calendarEl?.navigate(this.selectedDate);
}
}
7. Now serve the app locally by executing the following command:
ng serve
8. Now you should be seeing the following page:
10. Click the buttons on top and you should see that the anual calendar view changes the year.
11. Now click the selected date (the one that has a blue background color).
12. Now try to click one of the buttons on top of the calendar. Nothing should happen when it should. I would expect the calendar view to change the year but this is not happening even though I’m calling the MbscEventCalendar.navigate() method.
