Changing the "selectedDate" doesn't update the calendar annual view

Event calendars & schedulers
1

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:

image
image1814×808 60.6 KB

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.

2

Hi Josep,

Thanks for the example! I was able to reproduce the problem with it. :+1:

I’ve found a workaround to this problem, by updating the selected date in the onSelectedDateChange event.

I’ve added the onSelectedDateChange event to the options object the following way:

options: MbscEventcalendarOptions = {
    view: {
        calendar: {
            type: 'year',
            popover: false,
        },
    },
    onSelectedDateChange: (event) => {
       this.selectedDate.set(event.date as Date);
    }
};

Let me know if this works for you!