Ion2-calendar not highlighted/selected when clicked on dates

I have added one calendar library from the below link for one of my project on IONIC 3, https://github.com/HsuanXyz/ion2-calendar/tree/v2

CalendarBookPage contains both calendar modal and razorpay payment gateway to book the service according to the calendar multi selected days. everything is working fine in case of first time calendar multi slection dates and payment. after successfully paid i am redirecting page to homepage , then after when i entering the CalendarBookPage again to select the dates, dates are not highlighted and am getting stuck at multi selection dates.

HTML code:

<ion-content padding class="card-section">
  <ion-list class="allpageform alltabledt">

    <ion-grid no-padding>
      <ion-row no-padding>

        <ion-col col-12 class="" *ngIf="this.package_type != 'long-term' && service_id != '6'">
    <ion-item no-padding>
                <ion-calendar #myCalendar [(ngModel)]="dateMulti" [options]="optionsMulti" [type]="'string'" [format]="'YYYY-MM-DD'"
                  (onChange)="selectedMultiDates($event)">
                </ion-calendar>
              </ion-item>
</ion-row>
    </ion-grid>
  </ion-list>
</ion-content>

<ion-footer no-padding class="footerbtnsec" (click)="btnBookService()">
  <button ion-button full class="btnshadownone">
    Book Now
  </button>
</ion-footer>

TS File:

export class CalendarBookPage {
dateMulti: string[];
optionsMulti: CalendarComponentOptions = {
    pickMode: 'multi'
  };

constructor(){}

ionViewDidLoad(){
var today = new Date();
var start_date = moment(today).format('YYYY-MM-DD');
this.dateMulti = [start_date];
}
selectedMultiDates(dates) {
console.log(dates); 
}

btnBookService(){
var options = {
      description: 'HealthCare',
      image: 'assets/imgs/d_care_logo.svg',
      currency: this.currency,
      key: this.razor_key,
      amount: finalAmount,
      name: packageName,
      prefill: {
        email: this.userEmail,
        contact: this.userMob,
        name: username
      },
      theme: {
        color: '#F37254'
      },
      modal: {
        ondismiss: () => {
          alert('dismissed')
        }
      }
    };
var successCallback = (payment_id) => {
this.navCtrl.push(SuccessPage);
};

var cancelCallback = (error) => { 
alert(error.description);
};
RazorpayCheckout.open(options, successCallback, cancelCallback);
}

Please suggest any… Thanks in advance!!!

1 post - 1 participant

Read full topic