In monthview are displayed also next months columns (Slider problem)

[ilprima]

Hi, i have a problem. When the calendar is rendere are shown more columns than expected. When i click or resize the window the calendar becomes well rendered. There are 9 days displayed instead of 7. Seems a slider problem because the current slider doesn't cover all the width, as more than 1 slide per view is shown. I tried also to set slidesOptions to slidesOptions = { slidesPerView: 1 } but it was useless. I can't use this plugin because of this problem. I used the calendar also in another page and it doesn't show the problem. So maybe it is related to the modal (In this case the calendar is used in a modal).

Here the code:

`<div style="height: 50%; display: block" *ngIf="!loading && events">

        <calendar [locale]="calendar.locale"
                  [eventSource]="events"
                  [calendarMode]="calendar.mode"
                  [currentDate]="calendar.currentDate"
                  [monthviewEventDetailTemplate]="template"
                  [monthviewDisplayEventTemplate]="templateActiveMonthDay"
                  (onCurrentDateChanged)="onCurrentDateChanged($event)"
                  (onEventSelected)="onEventSelected($event)"
                  (onTitleChanged)="onViewTitleChanged($event)"
                  (onTimeSelected)="onTimeSelected($event)"
                  [lockSwipes]="GlobalFields.isMobile ? false : true"
                  [sliderOptions]="slidesOptions"
                  step="30">
        </calendar>
    </div>

    <!-- View del calendario mensile-->
    <ng-template #templateActiveMonthDay let-view="view" let-row="row" let-col="col" style="position: relative">

        <!-- Booking view-->
        <span *ngIf="bookingMode">
            <span class="dayWithoutEvents" [class.dayWithEvents]="view.dates[row*7+col].events && view.dates[row*7+col].events.length>0"
                  (click)="selectDay(view.dates[row*7+col])">
                {{view.dates[row*7+col].label}}
            </span>

        </span>

        <!-- Appointment page view-->
        <span *ngIf="!bookingMode">
             <span class="dayCalendar" (click)="selectDay(view.dates[row*7+col])">{{view.dates[row*7+col].label}}</span>
            <span *ngIf="view.dates[row*7+col].events && view.dates[row*7+col].events.length > 0" style="font-size: 6pt; display: block;">
                <i  *ngIf="!atLeastOneBooked(view.dates[row*7+col].events)" style="color: #999999" class="fas fa-circle"></i>
                <i  *ngIf="atLeastOneBooked(view.dates[row*7+col].events)" style="color: #10dc60" class="fas fa-circle"></i>
            </span>
        </span>

    </ng-template>`

[ilprima]

I found the way to reproduce this problem: if you put a ngIf in the calendar container, and then set the condition to false, and later (after x time) to true it shows that bug. The slider seems not rendered with the right width and you have to do a swipe or to change month to fix it

[twinssbc]

@ilprima Are you using some custom css? I put the calendar in ion-content, and use a button to control loading variable to achieve rendering the calendar in a later time. But I'm not able to reproduce your issue. Could you debug why the width is calculated as 252px? I think one workaround is you can always display the calendar but present some loading mask when the event is loading.

[Simbaclaws]

I'm experiencing the same thing when rotating my screen on an ipad.

I created this pull request: https://github.com/twinssbc/Ionic2-Calendar/pull/556

That might help in solving the issue, by manually calling the calendar.update function that I added. This would give you the option to resize the calendar to it's container by updating the ion-slides it's in.

Perhaps my code can be improved to account for the possible scenario's in which this bug appears by automatically calling this.slider.update()?

In the swiper API I found the following:

https://swiperjs.com/api/#parameters

Width: Swiper width (in px). Parameter allows to force Swiper width. Useful only if you initialize Swiper when it is hidden.

So I'm assuming that you initialize your swiper aka calendar when the calendar isn't yet displayed. I think that the source of the calendar is set while it is hidden and therefore doesn't know the size it should render as, and probably uses some default value in that case. I'm going to look through the swiper API code to see whether I can find the bug.

Then again I don't know if ngIf is used to hide/show or to actually remove/add the element to the DOM.

I'm trying to figure out a use case where the width would change to a default value when changing orientation.

[ilprima]

The only way to fix this is to add: .swiper-slide-active { width: 100% !important; }

To your global style file.

[Simbaclaws]

Well yeah that could work too as a workaround. I'm just trying to figure out what is wrong with ionic's ion-slides for specific ios device orientation changes.

I'll try this workaround to see if it'll help me solve the issue as well.

Still wouldn't be a bad idea to have a update function you can manually call though. Could work for other use cases.