Event Calendar with type year incorrectly posistions the event popups


I’am using the Event Calendar with Angular version 14 (the latest as today).

I have defined the view of the calendar to be of "type year" (shows the 12 months of the year).

I have also defined some events to show in this particular view. When I click on a date where there is an event defined, the popup is not positioned correctly.

I have attached a snapshot showing the problem.

Steps to reproduce:

  1. Create an Angular application with the latest version (14) and install Mobiscroll (5.17.0) in it.

  2. Import the MbscModule in the AppModule and then in the app component write the following code:


<mbsc-eventcalendar [view]=“view” [data]=“events”>


view: MbscEventcalendarView = {
        calendar: {
            type: 'year',

    events: MbscCalendarEvent[] = [
            title: 'Event 2022/1/1',
            date: new Date(2022, 1, 1),
            title: 'Event 2022/4/15',
            date: new Date(2022, 4, 15),
            title: 'Event 2022/6/6',
            date: new Date(2022, 6, 6),
            title: 'Event 2022/6/24',
            date: new Date(2022, 6, 24),
  1. Serve the app with “ng serve”

  2. Click 15th of may -> the popup appears in the top left corner of the viewport

  3. Click 6th of june -> the popup appears in the top left corner of the viewport

  4. Click again 6th of june -> the popup no appears in the correct position

  5. Click 15th of may -> the popup appears in 6th of june instead of 15th of may

If you need a more in detail explanation, just let me know!


Hi Josep,

Thank you for the details, this looks like a bug indeed. We will fix this as soon as we can and let you know when it’s out.