Hi,
This topic is related to one that was created a few days ago and was fixed in version 5.17.1 of Mobiscroll:
I’m creating a new topic because, although they’re related, they appear with different user interactions.
Steps to reproduce:
1. Define an Event Calendar (Mobiscroll 5.17.1) in a new Angular application (Angular 14.0.0).
In the styles.scss file:
@import "~@mobiscroll/angular/dist/css/mobiscroll";
In the AppModule file:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
theme: 'material',
themeVariant: 'light',
});
@NgModule({
declarations: [
AppComponent
],
imports: [
MbscModule,
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In the AppComponent TS file:
view: MbscEventcalendarView = {
calendar: {
type: 'year',
},
};
events: MbscCalendarEvent[] = [
{
title: 'Event 2022/1/1',
date: new Date(2022, 0, 1),
},
{
title: 'Event 2022/4/15',
date: new Date(2022, 3, 15),
},
{
title: 'Event 2022/6/6',
date: new Date(2022, 5, 6),
},
{
title: 'Event 2022/6/24',
date: new Date(2022, 5, 24),
},
];
handleCellClick(event: MbscCellClickEvent): void {
console.log('CELL CLICK: ', event);
}
In the AppComponent HTML file:
<mbsc-eventcalendar
[view]=“view”
[data]=“events”
[headerTemplate]="headerTmpl"
(onCellClick)="handleCellClick($event)"
>
<ng-template #headerTmpl>
<mbsc-calendar-nav></mbsc-calendar-nav>
<mbsc-calendar-prev class="ml-auto"></mbsc-calendar-prev>
<mbsc-calendar-today></mbsc-calendar-today>
<mbsc-calendar-next></mbsc-calendar-next>
</ng-template>
</mbsc-eventcalendar>
2. Serve the aplication (ng serve)
Open the pop up navigation (mbsc-calendar-nav) and select the current year (2022).
You should see something like the following:
Also see how the onCellClick Event is getting fired when one selects a year in the popup navigation.
