Hi!
I’m using the following versions:
@mobiscroll/angular-ivy5.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.
