Resulta que desde una api estoy obteniedo los días hábiles que el usuario A tiene destinados en su calendario de atención.
La función es algo asi: El usuario B, selecciona un lugar donde quiere ser atendido, una vez ha seleccionado el lugar se le muestra un calendario en pantalla que esta filtrado con los días hábiles que tiene el usuario A en ese preciso lugar que ha seleccionado el usuario B.
Ahora bien, yo ya logré filtrar el objeto que trae la información del Usuario A según el lugar "seleccionado por el Usuario B":
Como se puede observar en el objeto, este trae un arreglo de strings llamado "days", en donde trae consigo los dias hábiles del "usuario A" según el lugar seleccionado.
Ya logré iterar ese arreglo y obtener en consola esos días:
Para mostrar lo anterior en consola, lo que hice fue lo siguiente:
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,
}
Y para mostrar en el html, estoy usando mat-calendar de Angular Material
<div class="col-12 col-lg-6">
<mat-calendar [dateFilter]="dateFilter" #matCalendar>
</mat-calendar>
</div>
Mi pregunta es entonces: ¿Cómo puedo mostrar la información que ya filtre con Moment JS en el calendario de material Angular? Porque actualmente con lo que hice se ve algo asi el calendario:
Como se observa me bloquea todos los días, cuando debería de poder habilitarme solo los días que yo le estoy filtrando y no hace nada más que eso, bloquear todos los días con el metodo que he realizado, ¿qué me hace falta? ¿Cómo muestro en el calendario el arreglo de lo días que ya he filtrado?
Al final lo que quiero lograr es habilitar solo esos dias que el usuario A tiene habiles en el calendario y los dias que no estan dentro del arreglo desabilitarlos algo asi: (Tome la imagen como referencia)
Otra cosa a mencionar, es que no note en el debug, que entra en esta condición en más de una ocasión.
if (hourss.days.some(day => day == key)) {
workingDays.some(alreadyAddedDay => alreadyAddedDay == key) ? null : workingDays.push(key)
}
Un bucle repetitivo:
Trate de detallar muy bien la pregunta, si alguien podria ayudarme porfavor, una idea, una guía, una solución, le estaré muy agradecida, ya llevo dos semana intentando hacerlo. Soy muy nueva programando, pero lo intento, gracias por la ayuda de antemano.