Monthly event calendar not rendering correctly


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';

    selector: 'app-root',
    standalone: true,
    imports: [
    template: `        
    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):



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?

Hi @Josep_Ponsati :wave:

Thanks for reporting, this looks like a bug in our end.
I added your voice to a bug report, when it’s fixed, I’ll let you know.

Until then, you can solve this issue with the following CSS :point_down:

.mbsc-calendar-slide.mbsc-calendar-picker-main {
position: relative;

Hello @Josep_Ponsati :wave:

Good news: we have shipped Mobiscroll 5.27.2, where we fixed the calendar display with the labels: 'all' view option, which broke in the previous release.

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.