Calendario Inline Framework7-vue bug en popup

Tengo el siguiente problema al crear un calendario inline en un popup en Framework7, en la primera vista parece perfecto, pero cuando cierra el modal y vuelve a la página de inicio y luego vuelve a la página interna y abre el calendario inline de nuevo no aparece.

Estoy creando un calendario dentro de un componente llamado calendario que es importado por un modal-date.

mounted() {
  const self = this;
  const app = self.$f7;
  var $$ = Dom7;
  var selected;
  var monthNames = [
  "Janeiro",
  "Fevereiro",
  "Março",
  "Abril",
  "Maio",
  "Junho",
  "Julho",
  "Agosto",
  "Setembro",
  "Outubro",
  "Novembro",
  "Dezembro",
];
var calendarInline = app.calendar.create({
  containerEl: "#demo-calendar-inline-container",
  value: [new Date()],
  minDate: new Date(),
  renderToolbar: function () {
    return (
      '
' +
      '
' +
      '
' +
      '' +
      "
" +
      '
' +
      '
' +
      '' +
      "
" +
      "
" +
      "
"
    );
  },
  on: {
    init: function (c) {
      $$(".calendar-custom-toolbar .center").text(
        monthNames[c.currentMonth] + ", " + c.currentYear
      );
      $$(".calendar-custom-toolbar .left .link").on("click", function () {
        calendarInline.prevMonth();
      });
      $$(".calendar-custom-toolbar .right .link").on("click", function () {
        calendarInline.nextMonth();
      });
      $$(".calendar-day-today").removeClass(
        "calendar-day-selected calendar-day-disabled"
      );
    },
    monthYearChangeStart: function (c) {
      $$(".calendar-custom-toolbar .center").text(
        monthNames[c.currentMonth] + ", " + c.currentYear
      );
    },
    dayClick: function (calendar, dayEl, year, month, day) {
      // SET IS LOADING
      self.$store.commit('SET_IS_LOADING', true);
      selected = {
        day: day,
        month: month,
        year: year,
      };
      var currentDay = $$(".calendar-day-today"); //current day
      currentDay.removeClass("calendar-day-disabled");

      dateSelected(selected);
    },
  },
});
function dateSelected(selected) {
  self.selected(selected);
}
}

Pregunta hecha hace 3 años, 5 meses, 5 días - Por codecrafty

2 Respuestas:

  • El problema que estás experimentando puede estar relacionado con cómo se está manejando la reinstalación del calendario en tu componente. Parece que estás creando el calendario en el método mounted() del componente, lo que significa que se creará cada vez que el componente se monte en el DOM. Sin embargo, es posible que al cerrar el modal y volver a abrirlo, el calendario no se reinstancie correctamente.

    Una solución posible es mover la lógica de creación del calendario a un método separado y llamar a este método tanto en el mounted() como en un método específico que puedas llamar cuando necesites reinstanciar el calendario. Por ejemplo:

    javascript
created() {
  this.createCalendar();
},
mounted() {
  this.createCalendar();
},
methods: {
  createCalendar() {
    const self = this;
    const app = self.$f7;
    var $$ = Dom7;
    var selected;
    var monthNames = [
      "Janeiro",
      "Fevereiro",
      "Março",
      "Abril",
      "Maio",
      "Junho",
      "Julho",
      "Agosto",
      "Setembro",
      "Outubro",
      "Novembro",
      "Dezembro",
    ];

    var calendarInline = app.calendar.create({
      containerEl: "demo-calendar-inline-container",      value: [new Date()],
      minDate: new Date(),
      renderToolbar: function () {
        return (
          '
    ' +
          '
    ' +
          '
    ' +
          '' +          '
    ' +
          '
    ' +
          '
    ' +
          '' +          '
    ' +
          '
    ' +
          '
    '
        );
      },
      on: {
        // Eventos del calendario
      }
    });
  }
}

    De esta forma, puedes llamar al método createCalendar() tanto en created() como en mounted(), asegurando que el calendario se cree correctamente cada vez que se monte el componente. Y si necesitas reinstanciar el calendario en algún momento, simplemente llama a este método de nuevo.

    Respondida el Dec 18, 2020 a las 13:46 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando con el calendario inline de Framework7-vue cuando se usa dentro de un popup puede deberse a que el calendario no se está reemplazando correctamente cuando se vuelve a abrir el popup. Aquí tienes algunos pasos que puedes probar para resolver el problema:

    • Destruye el calendario antes de volver a crearlo: Cuando cierres el popup, destruye el calendario inline existente llamando al método `destroy()` del calendario.
    • Vuelve a crear el calendario cuando se abra el popup: Cuando vuelvas a abrir el popup, vuelve a crear el calendario inline llamando al método `create()` del calendario.

    Aquí tienes un ejemplo de cómo puedes implementar estos pasos:

    javascript
mounted() {
  // ...

  // Crea el calendario cuando se monte el componente
  createCalendar();

  // ...
}

methods: {
  // Destruye el calendario cuando se cierre el popup
  closePopup() {
    if (calendarInline) {
      calendarInline.destroy();
    }
  },

  // Vuelve a crear el calendario cuando se abra el popup
  openPopup() {
    createCalendar();
  },

  // Función para crear el calendario
  createCalendar() {
    calendarInline = app.calendar.create({
      // ...
    });
  },
}

    También puedes intentar agregar un retraso antes de volver a crear el calendario para asegurarte de que el DOM esté listo. Por ejemplo:

    javascript
openPopup() {
  setTimeout(() => {
    createCalendar();
  }, 100);
}

    Si el problema persiste, intenta depurar el código paso a paso utilizando herramientas de depuración como console.log() o un depurador para identificar dónde ocurre el problema.

    Respondida el Dec 18, 2020 a las 13:56 - por Gemini

    Votos positivos: 0 | Votos negativos: 0