enessfk / ionic-calendar-app Goto Github PK

hello n
could you help to select several days in a month in a calendar, i don't succeed in doing that.
my code is :

and my typescript code is :
import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import {CalendarComponent} from "ion2-calendar";

@ViewChild(CalendarComponent)
@component({
selector: 'app-liste-validation',
templateUrl: './liste-validation.page.html',
styleUrls: ['./liste-validation.page.scss'],
})
export class ListeValidationPage implements OnInit {
username: string;
password: string;
date: Date;
type: 'string';
value: any;
private parameters: any;
private madate: Date ;

constructor(private route: ActivatedRoute, private router: Router,private screenOrientation: ScreenOrientation) {
}

ngOnInit() {
registerLocaleData(localeFr);
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
if(localStorage.getItem('token')!=null && localStorage.getItem('username')!=null){
this.parameters=JSON.parse(this.route.snapshot.params.param);
this.username=this.parameters.username;
//this.date=this.parameters.date ;
console.log('le mot de passe vaut '+this.parameters.password);
}
else{
this.router.navigate(['login']);
}
}
onChange($event) {
// Vérifiez si $event est un tableau
if (Array.isArray($event)) {
this.parameters = $event.map(date => {
return {
date: new Date(date.getFullYear(),date.getMonth(),date.getDate()),
username: this.username,
};
});

  // Ajoutez cette vérification pour voir si le tableau est vide
  if (this.parameters.length > 0) {
    this.madate = this.parameters[0].date;
  } else {
    this.madate = null; // ou toute autre valeur par défaut appropriée
  }
} else {
  // Si $event n'est pas un tableau, traitez-le comme une seule date
  this.parameters = {
    date: new Date($event.getFullYear(),$event.getMonth(),$event.getDate()),
    username: this.username,
  };
  this.madate = this.parameters.date;
}
console.log(this.parameters);

}

selectionner(key: string, value: string){
console.log(this.parameters);
const param=JSON.stringify(this.parameters);
if (localStorage.getItem('token') != null) {
this.router.navigate(['/presence/', {param}]);
}
}
markDisabled = (date: Date) => {
const current = new Date();
return date < current;
};

// openCalendar() {
// const options = {
// canBackwardsSelected: true,
// defaultDateRange: this.date,
// pickMode: 'range'
// };
// let myCalendar = this.modalCtrl.create(CalendarModal, {
// options: options
// });
//
// myCalendar.present();
//
// myCalendar.onDidDismiss((date, type) => {
// if (date) {
// this.date = date;
// }
// });
// }
// eslint-disable-next-line @typescript-eslint/member-ordering
calendar = {
dateFormatter: {
formatMonthViewDay(date: Date) {
return date.getDate();
},
formatMonthViewDayHeader(date: Date) {
return 'formatmonthView';
},
formatMonthViewTitle(date: Date) {
return 'formatMonth';
},
formatWeekViewDayHeader(date: Date) {
return 'formatWeek';
},
formatWeekViewTitle(date: Date) {
return 'testWT';
},
formatWeekViewHourColumn(date: Date) {
return 'HourWeek';
},
formatDayViewHourColumn(date: Date) {
return 'HourDay';
},
formatDayViewTitle(date: Date) {
return 'FormatDay';
}
},
mode: 'month',
currentDate: new Date(),
locale: 'fr-FR'
};
optionsMultiSelect = {
pickMode: 'multi'
};

ngOnDestroy() {
this.screenOrientation.unlock();
}
}

how to do this  ?
Cordially