Calendar inside ion-slide (ionic 4)

[abarrios003]

Inside ion-slide (with ionic 4) the calendar doesn't adjust to the slide width (the rows are rendered along all the slides). With ionic 3 everything is fine... Is there any way to fix the calendar width in order to fit inside ion-slide? Thank you very much for your support and knowledge!

[twinssbc]

@abarrios003 The calendar itself is implemented based on the ion-slides. Are you putting the calendar inside another ion-slide? In this case, when you swipe on the screen, which one should respond to the swiping?

[abarrios003]

The calendar is rendered on the center of the first ion-slide, so if I swipe on the calendar central div, the swipe action only triggers the calendar slides. Otherwise, if I swipe on another zone of the slide, then I can move between ion slides. The problem comes with the calendar width, monthview-container class occupies the entire width of the page (all the slides) I've followed this article: https://devdactic.com/ionic-4-calendar-app/ On ionic 3 the same article (based on v3 version) works perfect for me, but after the ionic migration, i can't solve that width problem. Thank you @twinssbc for your great support and beautiful component

[twinssbc]

@abarrios003 Below is my solution. I put the calendar inside a div and set the width to 100%

    <ion-slides>
        <ion-slide>
            <div style="width:100%;padding:5px">
            <calendar [eventSource]="eventSource"
                      [calendarMode]="calendar.mode"
                      [currentDate]="calendar.currentDate"
                      (onCurrentDateChanged)="onCurrentDateChanged($event)"
                      (onTitleChanged)="onViewTitleChanged($event)"
                      (onTimeSelected)="onTimeSelected($event)"
                      (onEventSelected)="onEventSelected($event)"
                      step="30"
            ></calendar>
            </div>
        </ion-slide>
        <ion-slide>
            <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
            <h1>Slide 3</h1>
        </ion-slide>
    </ion-slides>

[abarrios003]

Thank you @twinssbc . That solution also works for me