0

Tengo el siguiente problema con fullcalendar al mostrar los datos que obtengo desde una base de datos.

Recibo en mi aplicación de Angular estos datos desde el backend.

{
    "data": [
        {
            "idCita": "2",
            "fechaCita": "2022-03-15 12:00:00",
            "tiempoCita": "30",
            "idCliente": "2",
            "idEmpleado": "1",
            "servicioCita": "",
            "created_at": "2022-03-12 06:17:05",
            "updated_at": "2022-03-12 06:17:05",
            "deleted_at": null
        }
    ]

Luego en mi aplicación los paso por el forEach para obtener los datos según utiliza fullcalendar teniendo en cuenta esta interface

export interface EventosCalendar {
  title: string;
  start: string;
  end?: string;
  allDay?: boolean;
}

Este es el método que genera mis datos

  getEventos() {
    this.calendarService.getCitas().subscribe((resp) => {
      let datos = resp.data;

      datos.forEach((dt: Citas) => {
        let kk: EventosCalendar = {
          title: dt.idCliente,
          start: moment(dt.fechaCita).toISOString(),
        };

        if (dt.tiempoCita != undefined) {
          kk.end = moment(dt.fechaCita)
            .add(dt.tiempoCita, 'minute')
            .toISOString();
        } else {
          if (moment(dt.fechaCita).hour() == 0) {
            kk.allDay = true;
          }
        }

        this.events.push(kk);
      });
      
    });
  
  }

Al parecer todo esta bien, solo que los eventos no se muestran en el calendario. Realice algunas otras pruebas para buscar si existía algún problema teniendo en cuenta el ciclo de vida de angular, para ello cree una colección de datos manual de esta manera, en el mismo método,

 this.eventos2 = [
      {
        end: '2022-03-15T17:30:00.000Z',
        start: '2022-03-15T17:00:00.000Z',
        title: '2',
      },
    ];

y estos si se muestran sin problemas en calendario. Acá les muestro el console.log de ambos arreglos de datos y son los mismo. Tanto los parcheados manualmente, como los traídos desde la base de datos

introducir la descripción de la imagen aquí

Cuando utilizo los datos estáticos se muestran en el calendario

introducir la descripción de la imagen aquí

Si utilizo los datos de la base de datos

introducir la descripción de la imagen aquí

El único cambio ocurre aquí

 initCalendar() {
    this.calendarOptions = {
      timeZone: 'America/Bogota',
      initialView: 'timeGridWeek',
      locale: esLocale,
      events: this.events, //aqui cambio los datos a usar
      rerenderDelay: 5,
      nowIndicator: true,
      lazyFetching: true,
      headerToolbar: {
        left: 'prev,next,today',
        center: 'title',
        right: 'timeGridWeek,dayGridMonth,listWeek',
      },
      eventClick: this.showProgramacion.bind(this),
      dateClick: this.setSpecificDate.bind(this),
    };
  }

Acá se muestra además el objeto del calendario en consola, donde se ve que los datos están en el mismo.

introducir la descripción de la imagen aquí

2 respuestas 2

1

Tu problema probablemente esté relacionado con la detección de cambios. Como estás mutando el array de la propiedad events usando this.events.push(kk); cuando recibes la respuesta, la referencia de dicho array no varía y fullcalendar no detecta el cambio.

Prueba refactorizando tu código usando el método map en vez de forEach, ya que este crea un nuevo array.

Tu código quedaría así.

getEventos() {
    this.calendarService.getCitas().subscribe((resp) => {
      let datos = resp.data;

      this.events = datos.map((dt: Citas) => { 
        let kk: EventosCalendar = {
          title: dt.idCliente,
          start: moment(dt.fechaCita).toISOString(),
        };

        if (dt.tiempoCita != undefined) {
          kk.end = moment(dt.fechaCita)
            .add(dt.tiempoCita, 'minute')
            .toISOString();
        } else {
          if (moment(dt.fechaCita).hour() == 0) {
            kk.allDay = true;
          }
        }

        return kk;
      });
      this.calendarOptions.events = this.events; // adicioné esto a tu código
    });
  
  }

un saludo

3
  • Gracias por tu ayuda, con tu cambio funciono parcialmente, ya que en este caso se quedaba el calendario sin los eventos, voy a editar tu respuesta, con el cambio que adicioné para que los datos fueran asignados a los eventos del calendario
    – rbarbeitor
    Commented el 12 mar. 2022 a las 21:35
  • Un seguidor nuevo en tu canal de Youtube
    – rbarbeitor
    Commented el 12 mar. 2022 a las 21:39
  • @RodolfoBarbeitoRodriguez aceptado el cambio y gracias por la sub. un saludito
    – akotech
    Commented el 13 mar. 2022 a las 8:54
0

También sería posible hacer uso de la clase ChangeDetectorRef. He invocarlo mediante detectChanges() una vez que tuvieras el vector completo.

1
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 21 abr. 2023 a las 13:32

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.