[bug]month view failed (V2.4.0)

[iPwa97]

The Calendar shows a blank screen after swipe to next month. All packages has the latest version.

[KreivenWang]

Hi @iPwa97 I don't see the issue from my side. It looks more like style issues or conflicts. Could you share your use case? And also which angular version and swiper version are you referring to? Maybe a demo will be helpful.

[oceanweb-technologies]

Hello, I actually got the same issue.

I send more info about my setup:

<calendar
      [eventSource]="eventSource"
      [queryMode]="calendar.queryMode"
      [calendarMode]="calendar.mode"
      [currentDate]="calendar.currentDate"
      [step]="calendar.step"
      [startingDayWeek]="calendar.startingDayWeek"
      [startingDayMonth]="calendar.startingDayMonth"
      (onCurrentDateChanged)="onCurrentDateChanged($event)"
      (onTitleChanged)="onViewTitleChanged($event)"
      [monthviewDisplayEventTemplate]="template"
      [monthviewEventDetailTemplate]="templateEvents"
    ></calendar>

  calendar = {
    mode: 'month' as CalendarMode,
    queryMode: 'local' as QueryMode,
    step: 60 as Step,
    currentDate: new Date(),
    startingDayWeek : 1,
    startingDayMonth: 1,
    // locale: 'en-GB',
  };

And I am using Ionic 7 with Angular 17. My package.json "dependencies": { "@angular/animations": "^17.0.2", "@angular/common": "^17.0.2", "@angular/compiler": "^17.0.2", "@angular/core": "^17.0.2", "@angular/forms": "^17.0.2", "@angular/platform-browser": "^17.0.2", "@angular/platform-browser-dynamic": "^17.0.2", "@angular/router": "^17.0.2", "@capacitor/app": "5.0.7", "@capacitor/core": "5.7.3", "@capacitor/haptics": "5.0.7", "@capacitor/keyboard": "5.0.8", "@capacitor/status-bar": "5.0.7", "@ionic/angular": "^7.0.0", "@ionic/storage": "^4.0.0", "@ionic/storage-angular": "^4.0.0", "date-fns": "^3.5.0", "ionic2-calendar": "^2.4.0", "ionicons": "^7.2.1", "rxjs": "~7.8.0", "swiper": "^11.0.7", "tslib": "^2.3.0", "zone.js": "~0.14.2" },

If needed more info let me know, hope this helps

[KreivenWang]

Hi @oceanweb-technologies, thanks for the info, I did a test through your setup but unfortunately I still couldn't reproduce the issue. It appears more like html and css issues, so I think extra context will be needed. If you would like to show the issue via demo, it would be helpful. https://stackblitz.com/edit/ionic-calendar-demo-2-2

[oceanweb-technologies]

Thanks @KreivenWang yes I've tried to reproduce the demo, but unfortunately without the success. On the older version of Ionic 6 it was working without the problem.

I think that the problem is here: https://ionicframework.com/docs/angular/slides So the syntax for Swiper is somehow in new Ionic this (below), and the ionic2-calendar uses the basic eg.

Calendar: <div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>

Ionic: <swiper-container>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
</swiper-container>

Either I am doing something wrong, or possibly needs to update the Swiper html? Feel free to correct me if I am mistaken, it's just what I've found so far.

Is there some way to change the Swiper html in the config, in order to try this out? Thanks!

[devmaxime]

I was able to reproduce your bug. It also generated another bug (problem with height)

Here is current month

Here is the next month

Here is the code

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title class="ion-text-center">Your calendar</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-segment [(ngModel)]="calendar.mode">
    <ion-segment-button value="week"> Week </ion-segment-button>
    <ion-segment-button value="day"> Day </ion-segment-button>
  </ion-segment>

  <calendar
    [calendarMode]="calendar.mode"
  ></calendar>

</ion-content>

Here is the package version

        "ionic7-calendar": "^2.4.0",
        "swiper": "^11.0.7",
        "@ionic/angular": "^7.0.0",
        "@angular/platform-browser": "^17.0.2",

It was reproduced in a blank app.

[KreivenWang]

Hey @oceanweb-technologies, Ionic2-Calendar uses html layout of swiper other than swiper web component. The basic layout is here: https://swiperjs.com/get-started#add-swiper-html-layout So the swiper syntax would NOT be a cause of this issue.

However it does remind me of the styles, I was only able to reproduce the issue if I remove one of the swiper-wrapper classes. I think it's worth checking the swiper styles, see if these styles are working: node_modules/@ionic/angular/css/ionic-swiper.css node_modules/swiper/swiper.scss

For me I'm using below versions which works. npm list @ionic/angular swiper ├── @ionic/angular@7.1.2 ├─┬ ionic2-calendar@2.4.0 │ ├── @ionic/angular@7.1.2 deduped │ └── swiper@11.0.7 deduped └── swiper@11.0.7

and the class is like .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; }

[devmaxime]

@KreivenWang when trying to reproduce the bug of @oceanweb-technologies, I also have these versions.

├── @ionic/angular@7.7.3 ├─┬ ionic2-calendar@2.4.0 │ ├── @ionic/angular@7.7.3 deduped │ └── swiper@11.0.7 deduped └── swiper@11.0.7

I have node_modules/swiper/swiper.scss but no node_modules/@ionic/angular/css/ionic-swiper.css.

At which step this was added ?

[oceanweb-technologies]

I've managed to get it running by adding

@import 'swiper/scss'; @import '@ionic/angular/css/ionic-swiper';

to the global.scss

For me the issue was when upgrading from the older versions without the Swiper (both Ionic and calendar).

[devmaxime]

Yes, i was able to remove the bug as well, but I only needed to add

@import 'swiper/scss';

because there is no @ionic/angular/css/ionic-swiper in the project i've created to reproduce this.

[abePdIta]

I was having the same issue. @import 'swiper/scss'; was the key! It's stated inside the readme, but I was upgrading from Ionic 5 and didn't noticed.

Thanks a lot everyone!