Event Calendar Popup navigation fires CellClickEvents when selecting a Year

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.

Looks like this is another issue, not related to the previous one.

That’s right, the onCellClick event should fire when a year is selected, and the popup should not be displayed - the popup only appears, when there are events for 1st Jan.

I created a report for this to fix in the next release.

Hi @Josep_Ponsati :wave:

Good news: we have shipped Mobiscroll 5.17.2, where we fixed an issue with the year view, where the onCellClick event was wrongly fired, and displayed the event popover, when selecting a year from the header navigation popup.

Here you can find a guide of how you can update the Mobiscroll version to the latest: https://docs.mobiscroll.com/update-version.