I have already asked several times about this topic, but I can't find the solution, if there is someone there who wants to explain it to me, I would appreciate it, I've been trying it for a week on my own, but for more effort and dedication it doesn't come out, that's why I come here:
Context
I have a calendar in mat-calender
, when I click on one of the enabled days it opens a button
that is being run by a *ngFor
and that gets the variable that stores the function that iterates an array object. This array object has inside a start and end time, both times are compared and the interval between them is obtained.
The result is something like this:
7:00AM - 8:00AM - 9:00AM...4:00PM
And the object I am iterating is the following
slots: [
0:
{
slot: "07:00-08:00"
available: true
count: 0
end: "2021-12-23T08:00:00-06:00"
start: "2021-12-23T07:00:00-06:00"
}
]
Where:
slot: it is a differential time range of one hour, which means that if this object comes in 6 arrays from 7:00 to 4:00 there is an hour difference until reaching the last hour
available: Tells us if that time is available
end and start: It shows us a range of dateTime
Problem
My problem is that from taking the interval of hours, I need to validate what hours are "available" and those that are "false" show them as a disabled button.
This is the function that makes the request to the API and we call the method that filters the time range of the slots (In the this.slots variable we set the res):
getAvailability(date: any) {
this.bookingService.getAffiliateAvailability(this.doctor?.id, this.addressID, date)
.subscribe(res => {
if ((this.availableShcedules && this.availableShcedules.length > 0)) {
this.availability = res;
const { slots } = this.availability;
//slots son el arreglo que contiene el rango de horas
this.slots = slots;
console.log(slots);
// metodo que filtra el rango de horas
this.getSchedulOptions();
//this.changeDate(slots);
}
else {
this.attentionSchedules
}
}, (error => {
console.error(error)
}))
}
Method that is responsible for filtering and iterating the time range that comes in the "start & end" object
getSchedulOptions() {
let hours: any[] = [];
this.slots.forEach((s: any) => {
let start = new Date(s.start);
let end = new Date(s.end);
this.available = s.available;
let range = this.getRange(start, end);
let filteredRange = range.filter((hourAsDate: Date) => {
return !hours.some(hour => hourAsDate.getHours() === hour.getHours());
});
hours = hours.concat(filteredRange);
})
console.log('customRange', hours);
this.timeList = hours.map(hourAsDate => {
return moment(hourAsDate).format('h:mm a')
})
}
Result when applying ForEach in the getSchedulOption method (It is a simple arrangement and you get all the hours)
I guess it doesn't work for me because I'm bringing all the hours and if I pass to getScheduleOption a if
where I'm iterating that says after you get me the range of hours: If available = false then return me the time button disabled something like this :
hours = hours.concat(filteredRange);
if (this.available) {
}
else{
console.log('object', s);
this.isDisable = true;
return
}
the array object
[
{
"slot": "07:00-08:00",
"start": "2021-12-23T07:00:00-06:00",
"end": "2021-12-23T08:00:00-06:00",
"count": 0,
"available": true
},
{
"slot": "08:00-09:00",
"start": "2021-12-23T08:00:00-06:00",
"end": "2021-12-23T09:00:00-06:00",
"count": 0,
"available": true
},
{
"slot": "09:00-10:00",
"start": "2021-12-23T09:00:00-06:00",
"end": "2021-12-23T10:00:00-06:00",
"count": 0,
"available": true
},
{
"slot": "10:00-11:00",
"start": "2021-12-23T10:00:00-06:00",
"end": "2021-12-23T11:00:00-06:00",
"count": 0,
"available": true
},
{
"slot": "11:00-12:00",
"start": "2021-12-23T11:00:00-06:00",
"end": "2021-12-23T12:00:00-06:00",
"count": 0,
"available": true
},
{
"slot": "12:00-13:00",
"start": "2021-12-23T12:00:00-06:00",
"end": "2021-12-23T13:00:00-06:00",
"count": 0,
"available": true
},
{
"slot": "13:00-14:00",
"start": "2021-12-23T13:00:00-06:00",
"end": "2021-12-23T14:00:00-06:00",
"count": 0,
"available": true
},
{
"slot": "14:00-15:00",
"start": "2021-12-23T14:00:00-06:00",
"end": "2021-12-23T15:00:00-06:00",
"count": 0,
"available": true
},
{
"slot": "15:00-16:00",
"start": "2021-12-23T15:00:00-06:00",
"end": "2021-12-23T16:00:00-06:00",
"count": 0,
"available": true
}
]
We use
ng-container
to iterate over the array. Your structure will replace this.I leave you a working example here .