I have a ion-slider that shows the days of a week in array, and i need to pass the index of the day is today. I have a global variable called compareFirstDay
that shows the day is today and the array of objects with the days of the week called this.showingWeekCalendar
, so when the screen size is minor or equal to 768px i need to pass the index position of the day is today to show this day first of all in slide.
this.showingWeekCalendar
0: {name: "Sunday", agenda: Array(0), date: "03/02/2019"}
1: {name: "Monday", agenda: Array(0), date: "04/02/2019"}
2: {name: "Tuesday", agenda: Array(0), date: "05/02/2019"}
3: {name: "Wednesdey", agenda: Array(0), date: ""}
4: {name: "Thursday", agenda: Array(0), date: ""}
5: {name: "Friday", agenda: Array(0), date: ""}
6: {name: "Saturday", agenda: Array(0), date: ""}
home.ts
//iterate the array of the week
for (let i = 0; i < 7; i++) {
//compare date of today with the days of the week to find the right day
if (compareFirstDay === this.showingWeekCalendar[i].date) {
if (screenSize <= 768) {
//how can i pass the parameter to the method to show the position of the day
this.showingWeekCalendar[i].getActiveIndex();
}
}
}
HTML
<ion-slides pager="false" [options]="slideOpts" (ionSlidesDidLoad)="ionSlidesLoaded()">
<ion-slide class="day-calendar" *ngFor="let weekAgenda of showingWeekCalendar">
<p class="text-center slides-control m-t-10">
<ion-button shape="round" fill="clear" (click)="slideBack()" *ngIf="slidesdidLoad"><i class="mdi mdi-chevron-left"></i></ion-button>
{{weekAgenda.name}}<br>
{{weekAgenda.date}}
<ion-button shape="round" fill="clear" (click)="slideForward()" *ngIf="slidesdidLoad"><i class="mdi mdi-chevron-right"></i></ion-button>
</p>
<mwl-calendar-day-view [hourSegments]="4" [locale]="locale" [viewDate]="viewDate" [events]="weekAgenda.agenda"
[refresh]="refresh" [eventWidth]="180" (eventClicked)="handleEvent($event.event)" (eventTimesChanged)="eventTimesDayChanged($event)"
(hourSegmentClicked)="hourSegmentClicked($event.date, weekAgenda)" [dayStartHour]="weekViewWorkingHours.start" [dayEndHour]="weekViewWorkingHours.end">
</mwl-calendar-day-view>
</ion-slide>
</ion-slides>
If need more information please let me know in the comments. thank you