Wrong dates when using "labels: all" in the monthly calendar view

Hi!

I’m using the following versions:

  • @mobiscroll/angular-ivy 5.32.0
  • @angular/* 18.2.0

I have a problem when using the <mbsc-eventcalendar> component with the option labels: 'all'.

To reproduce the issue one can follow the steps:

1. Create a new angular project

This is the command I used but feel free to create the project using other methods:

npx @angular/cli@latest new test-app --inline-style --inline-template --minimal --skip-git --skip-install --skip-tests --standalone --strict

2. Install Mobiscroll and other dependencies in the project

npm i
npm i @mobiscrioll/angular-ivy

3. Add the styles

In the file styles.css add the following:

@import "@mobiscroll/angular-ivy/dist/css/mobiscroll.min.css";

4. Modify the AppComponent to include Mobiscroll

In the file app.component.ts add the following:

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

import {
  MbscCalendarEvent,
  MbscEventcalendarModule,
  MbscEventcalendarOptions,
  setOptions,
  localeCa,
} from '@mobiscroll/angular-ivy';


setOptions({
  locale: localeCa,
  theme: 'material',
  themeVariant: 'light',
});

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    MbscEventcalendarModule,
  ],
  template: `
    <mbsc-eventcalendar
      [data]="data"
      [options]="options"
      [dayContentTemplate]="dayContentTmpl"
    >
      <ng-template #dayContentTmpl let-data>
          <ul class="events">
            @for (event of data.events; track event.id) {
              <li class="event">
                <span>{{ format(event.start) }}</span> - <span>{{ format(event.end) }}</span>
              </li>
            }
          </ul>
      </ng-template>
    </mbsc-eventcalendar>
  `,
  styles: [`
    .events {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .event {
      display: flex;
    }
  `],
})
export class AppComponent {

  options: MbscEventcalendarOptions = {
    view: {
      calendar: {
        type: 'month',
        popover: false,
        outerDays: false,
        labels: 'all',
      },
    },
  };

  data: MbscCalendarEvent[] = [
    {
      title: 'Example 1',
      id: 3,
      start: '2020-01-01T08:00:00',
      end: '2020-01-01T13:30:00',
      recurringException: [
        '2024-09-11',
        '2024-09-24',
        '2024-09-25'
      ],
      recurring: {
        repeat: 'weekly',
        interval: 1,
        weekDays: 'MO,TU,WE,TH',
        until: '2024-09-30T23:59:59.000+02:00',
        from: '2024-09-02'
      }
    },
    {
      title: 'Example 2',
      id: 4,
      start: '2020-01-01T14:30:00',
      end: '2020-01-01T17:30:00',
      recurringException: [
        '2024-09-11',
        '2024-09-24',
        '2024-09-25'
      ],
      recurring: {
        repeat: 'weekly',
        interval: 1,
        weekDays: 'MO,TU,WE,TH',
        until: '2024-09-30T23:59:59.000+02:00',
        from: '2024-09-02'
      }
    },
    {
      title: 'Example 3',
      id: 5,
      start: '2020-01-03T08:00:00',
      end: '2020-01-03T14:00:00',
      recurringException: [
        '2024-09-11',
        '2024-09-24',
        '2024-09-25'
      ],
      recurring: {
        repeat: 'weekly',
        interval: 1,
        weekDays: 'FR',
        until: '2024-09-30T23:59:59.000+02:00',
        from: '2024-09-06'
      }
    }
  ];

  format(date: Date | undefined): string {
    return date?.toLocaleString('ca', {hour: '2-digit', minute: '2-digit'}) || '';
  }

}

That’s it! Now serve the app locally and navigate to localhost:4200:

npx ng serve

You should see something like this:

Now go to the file app.component.ts and change the option labels form 'all' to false. Go to localhost:4200 and now you should see something like this:

IMPORTANT NOTE:

The above behavior is only reproducible with the latest version 5.32.0. If I downgrade to version 5.31.2 everything works fine.

Hi @Josep_Ponsati,

Thanks for reporting this issue!

I was able to reproduce it based on your description. I’ve passed this on to the dev team, and I’ve added your voice to the report. You’ll be notified when there will be updates about this problem.

Hello @Josep_Ponsati :wave:

We have shipped Mobiscroll 5.32.1, where we fixed this issue.

Here you can find a guide on how you can update the Mobiscroll version to the latest: Welcome to the Mobiscroll Docs | Mobiscroll Documentation.