0

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": Objeto con el lugar seleccionado

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:

workingDays

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:

introducir la descripción de la imagen aquí

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)

introducir la descripción de la imagen aquí

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:

introducir la descripción de la imagen aquí

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.

2
  • ¿Qué versión de Angular estás usando?
    – Lobos
    Commented el 7 dic. 2021 a las 17:22
  • Hola! En su última versión
    – Izlia
    Commented el 7 dic. 2021 a las 20:50

2 respuestas 2

1

Te dejo un ejemplo de cómo hacerlo. Lo que faltaría es que lo adaptes a tu caso de uso.

component.html

<!--Se muestra el calendario hasta que las fechas hábiles están cargadas
para eso se usa el *ngIf-->
<mat-calendar [dateFilter]="dateFilter" *ngIf="diasHabiles">

componente.ts

export class AppComponent {

  // esta variable contendrá todos los días que estarán
  // habilitados en el mes
  diasHabiles!: string[]

  ngOnInit() {
    // en el inicio del componente se inicializa el arreglo con los días
    // que se serán habilitados
    this.diasHabiles = this.obtenerDiasHabiles()
  }

  private obtenerDiasHabiles() {
    return ['Mon']
  }

  dateFilter = (date: Date) => {
    // la función de filtro tomará la fecha actual del calendario
    // la convertirá a cadena de texto con formato `ddd` (solo día eje: Mon) y
    // la buscará en el arreglo `diasHabiles`
    // si existe retorna true y se habilita en el calendario
    // de lo contrario retorna false
    return this.diasHabiles?.includes(moment(date).format('ddd'))
  }
}
7
  • Hola! Mil gracias por responderme, llevo todo el día probando, no se que hacer ya, y probé lo que me sugieres, pero fijate que aun no muestra habilitados solo los dias habiles. En el metodo que obtenerDiasHabiles(), lo que hice fue poner el metodo que puse en la pregunta. Solo que en tu ejemplo es por fecha, y yo lo obtengo por días. Es decir tengo el arreglo [LU, MAR, VIE] ¿cómos seria en ese caso?
    – Izlia
    Commented el 8 dic. 2021 a las 0:31
  • Pero si lo haces solo con los días, si el arreglo viene como [LU] ¿Cómo saber cuál de todos los lunes del mes habilitar? ¿O se habilitan todos los lunes?
    – Lobos
    Commented el 8 dic. 2021 a las 1:08
  • Es que es por días, se debe habilitar en todos los meses los días que vienen en el arreglo, si en el arreglo viene [Lu, Ma, Vi] en el calendario yo debo de habilitar sólo los días lunes, martes y miércoles. Y eso es lo que no puedo hacer, poner ese rango de días habilitado y
    – Izlia
    Commented el 8 dic. 2021 a las 1:22
  • Modifiqué la respuesta para adaptarlo al requerimiento.
    – Lobos
    Commented el 8 dic. 2021 a las 1:36
  • Gracias por tu paciencia en explicarme, ya te habre desesperado seguramente, pero fijate que probe con tu sugerencia, y no funciono. Incluso hice tu ejemplo igual sin llamar a la Api ni nada y aun asi no funcionó, ni siquiera un error que no guíe, nada:( Y lo peor? Es que necesito entregar esto mañana y no puedo hacerlo
    – Izlia
    Commented el 8 dic. 2021 a las 2:16
1

El calendario llama a la función dateFilter una vez por cada fecha que tiene que mostrar en el calendario. Si la función para esa fecha devuelve true, esa fecha estará habilitada en el calendario y si devuelve false, deshabilitada. En tu caso, como estas devolviendo siempre false, por eso te salen todas deshabilitadas.

Como llama una vez por cada fecha, por eso ves múltiples logs en la consola. Es importante, que por este mismo motivo, la función sea lo más liviana posible para afectar lo menos posible al rendimiento de la aplicación.

No se si te he entendido bien lo que buscas, pero en principio quieres extraer del servicio los días laborables para una dirección, y que en el calendario se muestren solo esos días de la semana activos a partir de la fecha actual.

Asumiendo que los workingDays solo los tienes que extraer al iniciar el componente te recomiendo usar una estructura similar a la siguiente

@Component(...)
export class TuComponente implements OnInit {
  //propiedad para guardar los workingDays y evitar recalcularlos repetidas veces
  workingDays!;
  
  ngOnInit(){
    // Extraemos y guardamos los días laborables al cargar el componente.
    this.workingDays = this.bookingService.extractWorkingDaysForAddress(this.address);
  }

  dateFilter = (date): boolean =>  {
    //devolvemos true/false si el dia de la semana de date está o no en this.workingDays 
  }

}

Y por ultimo para deshabilitar las fechas anteriores a hoy, que veo que también lo haces en la función dateFilter. En vez de calcularlo ahí, puedes usar la propiedad minDate del calendario.

<mat-calendar [minDate]="propiedadPrimeraFechaValida" [dateFilter]="dateFilter" #matCalendar></mat-calendar>

un saludo

2
  • Primeramenta quiero agradecerle el tiempo que se tomo para responderme, de verdad lo agradezco, segundo tengo una pregunta la propiedad [minDate], se utiliza como metodo tal como en [dateFilter] O en esta solo almacenamos un rango de fecha ?
    – Izlia
    Commented el 7 dic. 2021 a las 20:49
  • 1
    A [minDate] simplemente tienes que pasarle la fecha mínima válida. Por ejemplo si solo quieres de hoy en adelante defines una propiedad today= new Date(); en la clase y la vinculas en el template [minDate]="today"
    – akotech
    Commented el 8 dic. 2021 a las 8:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.