# Ion2-calendar not highlighted/selected when clicked on dates

**URL:** <https://forum.ionicframework.com/t/ion2-calendar-not-highlighted-selected-when-clicked-on-dates/189930>\
**Category:** ionic-v3\
**Created:** [May 22, 2020, 11:30am UTC](https://forum.ionicframework.com/t/ion2-calendar-not-highlighted-selected-when-clicked-on-dates/189930 "2020-05-22T11:30:17Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![prakash26](https://avatars.discourse-cdn.com/v4/letter/p/f05b48/32.png) [@prakash26](https://forum.ionicframework.com/u/prakash26)\
**Post date:** [May 22, 2020, 11:30am UTC](https://forum.ionicframework.com/t/ion2-calendar-not-highlighted-selected-when-clicked-on-dates/189930/1 "2020-05-22T11:30:17Z")

</div>

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:

```auto
<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:

```auto
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!!!