Hi!
I’m using Mobiscroll with Angular:
- @mobiscroll/angular-ivy:
^5.27.1 - @angular/*:
^16.2.0
After upgrading to version 5.27.1 from 5.26.2, the monthly event calendar stopped working.
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 (there is nothing special just a simple monthly event calendar with some options):
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarModule, MbscEventcalendarOptions } from '@mobiscroll/angular-ivy';
@Component({
selector: 'app-root',
standalone: true,
imports: [
MbscEventcalendarModule,
],
template: `
<mbsc-eventcalendar
theme="material"
themeVariant="light"
[selectedDate]="selectedDate()"
[showControls]="false"
[options]="options"
[data]="data"
/>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
options: MbscEventcalendarOptions = {
view: {
calendar: {
type: 'month',
popover: false,
outerDays: false,
labels: 'all',
},
},
};
data: MbscCalendarEvent[] = [
{
date: '2023-04-23',
},
];
selectedDate = signal(new Date());
}
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 (the calendar only renders the header):
NOTES:
If I change the calendar view to a year view, everything works fine. If I downgrade to the previous version I had (5.26.2), everything works fine also.
I haven’t tested the version 5.27.0. I don’t know if it works with this version or not.
After inspecting the DOM with the browser devtools, I can see the HTML of the calendar days rendered (I can’t say if the HTML is correctly rendered but it’s rendered).
Maybe it’s something related to CSS?
