It turns out that from an api I am obtaining the business days that user A has allocated in his service calendar.
The function is something like this: User B, selects a place where he wants to be served, once he has selected the place, a calendar is shown on the screen that is filtered with the working days that user A has in that precise place that he has selected user b.
Now, I have already managed to filter the object that brings User A's information according to the place "selected by User B":
As can be seen in the object, it brings an array of strings called "days", where it brings with it the working days of "user A" according to the selected place.
I already managed to iterate that array and get those days in console:
To show the above in the console, what I did was the following:
dateFilter = (date: Date) => {
//Filtre el objeto para obtener los lugares seleccionados
const schedule = this.bookingService.bookingModel.affiliate?.attentionSchedules && this.bookingService.bookingModel.affiliate?.attentionSchedules.find((schedule) => schedule.place && schedule.place._id == this.addressID)
console.log('probando 1 :>>', schedule);
let workingDays: string[] = [];
let currentDay = new Date;
//Posicionamiento del dia
currentDay.setDate(currentDay.getDate() - 1)
if (date < currentDay) {
return false;
}
//Si se ha seleccionado un lugar
if(schedule && schedule.schedules){
//Entonces recorre el arreglo una vez por cada elemento del array
schedule.schedules.forEach((hourss, index) => {
//Y debvolve la iteracion del recorrido del array
Object.keys(DaysOfWeek).forEach((key, index) => {
if (hourss.days.some(day => day == key)) {
workingDays.some(alreadyAddedDay => alreadyAddedDay == key) ? null : workingDays.push(key)
}
})
})
}
console.log('workingDays', workingDays);
return false;
}
enum DaysOfWeek {
"MO" = 1,
"TU" = 2,
"WE" = 3,
"TH" = 4,
"FR" = 5,
"SA" = 6,
"SU" = 7,
}
And to display in the html, I'm using mat-calendar from Angular Material
<div class="col-12 col-lg-6">
<mat-calendar [dateFilter]="dateFilter" #matCalendar>
</mat-calendar>
</div>
My question is then: How can I display the information that I already filtered with Moment JS in the Angular material calendar? Because currently with what I did the calendar looks something like this:
As you can see, it blocks me every day, when I should be able to enable myself only on the days that I am filtering it and it does nothing more than that, block every day with the method that I have carried out, what do I need? How do I show in the calendar the arrangement of the days that I have already filtered?
In the end, what I want to achieve is to enable only those days that user A has enabled in the calendar and the days that are not in the array, disable them something like this: (Take the image as a reference)
Another thing to mention is that I did not notice in the debug that it enters this condition on more than one occasion.
if (hourss.days.some(day => day == key)) {
workingDays.some(alreadyAddedDay => alreadyAddedDay == key) ? null : workingDays.push(key)
}
A repetitive loop:
Try to detail the question very well, if someone could help me please, an idea, a guide, a solution, I will be very grateful, I have been trying to do it for two weeks now. I'm very new to programming, but I'm trying, thanks for the help in advance.
The calendar calls the function
dateFilter
once for each date it has to display on the calendar. If the function for that date returnstrue
, that date will be enabled in the calendar and if it returnsfalse
, disabled . In your case, since you are always returningfalse
, that's why all of them are disabled.Since it calls once for each date, that's why you see multiple logs in the console. It is important, for this same reason, that the function be as light as possible to affect the performance of the application as little as possible.
I don't know if I have understood what you are looking for, but in principle you want to extract from the service the working days for an address, and only those days of the week that are active from the current date are shown on the calendar.
Assuming that the workingDays only have to be extracted when starting the component, I recommend using a structure similar to the following
And finally to disable the dates before today, which I see that you also do in the dateFilter function. Instead of calculating it there, you can use the
minDate
calendar property.a greeting
Here is an example of how to do it. What would be missing is that you adapt it to your use case.
component.html
component.ts