I have a calendar page, when I swipe, the month will change(use Swiperjs in Ionic angular) but when I swipe view does not update until I click anywhere, my code:
month-view.component.html
<swiper (swiper)="setSwiperInstance($event)" [loop]="true" [centeredSlides]="true" pager="false" (slideChangeTransitionEnd)="onSlideChanged()" (touchEnd)="touchEnd()" (touchStart)="touchStart()">
<ng-template swiperSlide *ngFor="let slideIdx of SLIDE_INDEX_ARR">
<table class="fc-mv-table">
<thead class="fc-head">
<tr>
<td class="fc-head-container">
<px-widget-header [dayHeaders]="views[slideIdx]?.dayHeaders">
</px-widget-header>
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="fc-widget-content">
<div class="fc-day-grid-container">
<div class="fc-day-grid">
<div class="fc-row" *ngFor="let row of ROW">
<div class="fc-back fc-bg">
<table>
<tbody>
<tr>
<td *ngFor="let col of COL"
[ngClass]="(displayWeekendColor ? getBgColor(slideIdx, col) : '') + ' fc-day'">
<px-widget-bg [date]="views[slideIdx]?.dates[row*7+col]">
</px-widget-bg>
</td>
</tr>
</tbody>
</table>
</div>
<div class="fc-back fc-fg" *ngIf="(slider?.activeIndex + 2) % 3 === slideIdx">
<table>
<tbody>
<tr>
<td *ngFor="let col of COL" class="fc-day">
<px-widget-fg [date]="views[slideIdx]?.dates[row*7+col]" (selected)="select($event)">
</px-widget-fg>
</td>
</tr>
</tbody>
</table>
</div>
<div class="fc-content-skeleton" *ngIf="(slider?.activeIndex + 2) % 3 === slideIdx">
<table>
<thead>
<tr>
<td *ngFor="let col of COL" class="fc-day-top">
<px-widget-skeleton [date]="views[slideIdx]?.dates[row*7+col]">
<!-- {{views[slideIdx]?.dates[row*7+col]?.label}} -->
</px-widget-skeleton>
</td>
</tr>
</thead>
<tbody>
<tr>
<td *ngFor="let col of COL" class="fc-event-mark">
<div class="fc-mark-container">
<div class="fc-notime-mark" *ngIf="views[slideIdx]?.dates[row*7+col]?.hasNoTime"></div>
<div class="fc-banner-mark" *ngIf="views[slideIdx]?.dates[row*7+col]?.hasBanner"></div>
</div>
</td>
</tr>
<ng-container *ngFor="let iev of ievArr">
<tr *ngIf="hasEvent(views[slideIdx], slideIdx, row, iev)">
<td *ngFor="let col of COL" class="fc-event">
<div *ngFor="let evt of getEvent(views[slideIdx], row, col, iev)">
<ng-template
[ngTemplateOutlet]="monthviewDisplayEventTemplate"
[ngTemplateOutletContext]="{ $implicit: evt }">
</ng-template>
</div>
</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</ng-template>
</swiper>
month-view.component.ts
onSlideChanged(): void {
if (this.callbackOnInit) {
this.callbackOnInit = false;
return;
}
let currentSlideIndex = this.slider.activeIndex,
direction = Direction.Current,
currentViewIndex = this.currentViewIndex;
currentSlideIndex = (currentSlideIndex + MAX_SLIDE_INDEX) % MAX_SLIDE;
if (currentSlideIndex - currentViewIndex === 1) {
direction = Direction.Next;
} else if (currentSlideIndex === 0 && currentViewIndex === MAX_SLIDE_INDEX) {
direction = Direction.Next;
this.slider.slideTo(1, 0, false);
} else if (currentViewIndex - currentSlideIndex === 1) {
direction = Direction.Prev;
} else if (currentSlideIndex === MAX_SLIDE_INDEX && currentViewIndex === 0) {
direction = Direction.Prev;
this.slider.slideTo(MAX_SLIDE, 0, false);
}
this.currentViewIndex = currentSlideIndex;
this.move(direction);
// TODO AIT Migration
}
move(direction: Direction): void {
if (direction === Direction.Current) return;
this.cd.detach();
this.direction = direction;
if (!this.moveOnSelected) {
let adjacentDate = this.calendarService.getAdjacentCalendarDate(
this.mode,
direction
);
this.calendarService.setCurrentDate(adjacentDate);
}
this.direction = Direction.Current;
this.refreshView();
this.cd.reattach();
this.moveOnSelected = false;
}
refreshView(): void {
this.range = this.getRange(this.calendarService.currentDate);
this.calendarService.rangeChanged(this);
if (this.inited) {
let title = this.getTitle();
this.onTitleChanged.emit(title);
}
this.calendarService.populateAdjacentViews(this);
this.updateCurrentView(
this.range.startTime,
this.views[this.currentViewIndex]
);
}
px-widget-skeleton.ts
@Component({
selector: "px-widget-skeleton",
template: `
<div [ngClass]="cssClasses">
{{_date?.label}}
</div>`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false
})
export class WidgetSkeletonComponent implements OnDestroy {
@Input()
set date(value: IMonthViewRow) {
this._date = value;
if (value) {
if (!this._differ) {
this._differ = this._differs.find(value).create();
}
this.cssClasses = this.getHighlightClassSkeleton();
} else {
this.cssClasses = null;
}
}
_date: IMonthViewRow;
cssClasses: string;
private _differ: KeyValueDiffer<any, any>;
constructor(private cd: ChangeDetectorRef, private _differs: KeyValueDiffers) {
//NOPE
}
/**
* Check for changes
*/
ngDoCheck() {
if (this._differ) {
const changes = this._differ.diff(this._date);
if (changes) {
// this.cssClasses = this.getHighlightClassSkeleton();
this.cd.markForCheck();
}
}
}
/**
* On destroy
*/
ngOnDestroy() {
this._differ = null;
this._date = null;
this.cd = null;
}
/**
* Get highlight class
*/
getHighlightClassSkeleton(): string {
let date = this._date;
let classNames: Array<string> = [];
if (date) {
if (date.selected) {
classNames.push("fc-mv-selected");
}
if (date.secondary) {
classNames.push("fc-other-month");
}
}
return classNames.join(' ');
}
}
when swipe onSlideChanged() change this.views update but [date]="views[slideIdx]?.dates[row*7+col]" in px-widget-skeleton not update until I click any where, thank you so much !