MbscEventcalendar.navigate() not working always

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.

Hi @Josep_Ponsati,

I was not able to reproduce this issue, however, the correct approach for calendar navigation in angular would be using the selectedDate option. You can find more information about it here. This way you don’t need to use the navigate method at all.

Hi Gabi!

My bad, the steps to reproduce the issue were wrong.

I have been able now to reproduce it in all major browsers (Chrome, Firefox, Webkit and Edge) with the Mobiscroll version 5.23.0 and Angular 15.2.0.

The steps to reproduce it are the following:

1. Create a new Angular application (and install Mobiscroll as dependency):

ng new test-app --skip-install

or if you prefer not to install the Angular CLI globally:

npx @angular/cli new test-app --skip-install

2. In the styles.scss add the following content:

$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";

3. In the app.component.ts (the main component of the application) add the following content in the file (I’m using standalone components, you can erase the standalone: true if you prefer modules):

import { Component } from '@angular/core';

import { MbscEventcalendarModule, MbscEventcalendarOptions } from '@mobiscroll/angular';


@Component({
    standalone: true,
    imports: [
        MbscEventcalendarModule,
    ],
    selector: 'app-root',
    template: `
        <div class="row">
            <button (click)="handleNext()">
                Next Year
            </button>
        </div>

        <mbsc-eventcalendar
            theme="material"
            themeVariant="light"
            [selectedDate]="selectedDate"
            [showControls]="false"
            [options]="options"
        />
    `,
    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 {

    options: MbscEventcalendarOptions = {
        view: {
            calendar: {
                type: 'year',
                popover: false,
            },
        },
    };

    selectedDate = new Date();

    handleNext(): void {
        this.selectedDate = new Date(this.selectedDate.getFullYear() + 1, 0, 1);
    }

}

4. Now serve the app locally:

ng serve

5. You should be seeing the following:

6. Now here is the tricky part!

  • Click two times the selectedDate (the one with the blue background color)
  • Now click the button Next Year

The calendar won’t change the year even though you can see in the code there is an event handler attached in the click event on the button that increments the year by one unit when the button is clicked.

This only happens if you click more than one time the selectedDate in the calendar before clicking the button “Next Year”.

Thanks for the details, @Josep_Ponsati!
I was able to reproduce the issue and created a bug report for it. I will let you know as soon as it’s fixed.

Hello @Josep_Ponsati :wave:

Good news: we have shipped Mobiscroll 5.24, where we fixed an issue where navigating the calendar with an external button did not work, if the selected date was pressed twice.

Here you can find a guide of how you can update the Mobiscroll version to the latest: Update guide on the latest version of Mobiscroll for plain JS, jQuery, Angular, Ionic and React.