Hi!
I’m using Mobiscroll with Angular:
-
@mobiscroll/angular-ivy:
5.26.1
-
@angular/*:
16.1.0
When I render the year calendar view and I change the selectedDate
, the calendar doesn’t update.
Steps to reproduce:
1. Create a new Angular application. This is the command I used to reproduce the issue, in case you want to use it:
npx @angular/cli@latest new test-app --skip-install --standalone --skip-tests --inline-style --inline-template --minimal --skip-git --strict --style scss
2. Install the dependencies and Mobiscroll
3. In the app.component.ts
file, add the following:
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarModule, MbscEventcalendarOptions } from '@mobiscroll/angular-ivy';
@Component({
selector: 'app-root',
standalone: true,
imports: [
MbscEventcalendarModule,
],
template: `
<nav class="row">
<button (click)="handlePrevious()">
Previous Year
</button>
<strong class="text-lg">
{{selectedDate().getFullYear()}}
</strong>
<button (click)="handleNext()">
Next Year
</button>
</nav>
<mbsc-eventcalendar
theme="material"
themeVariant="light"
[selectedDate]="selectedDate()"
[showControls]="false"
[options]="options"
[data]="data"
/>
`,
styles: [`
.row {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
width: auto;
padding: 0.5rem 1rem;
margin-bottom: 2rem;
}
.text-lg {
font-size: 1.5rem;
}
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;
}
`],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
options: MbscEventcalendarOptions = {
view: {
calendar: {
type: 'year',
popover: false,
},
},
};
data: MbscCalendarEvent[] = [
{
date: '2023-04-23',
},
];
selectedDate = signal(new Date());
handleNext(): void {
this.selectedDate.update(oldValue => new Date(oldValue.getFullYear() + 1, 0, 1));
}
handlePrevious(): void {
this.selectedDate.update(oldValue => new Date(oldValue.getFullYear() - 1, 0, 1));
}
}
4. In the styles.scss
import the Mobiscroll styles:
$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-ivy/dist/css/mobiscroll.modular";
5. Serve locally the app with ng serve
6. You should be seeing something like the following:
7. Now here are the most important steps to reproduce the issue:
Click the 11th of January of 2023 once
Now click the “Next Year” button
The calendar is still showing 2023 even though the selectedDate
is at 2024.