I have the following problem when creating an inline calendar in a popup in Framework7, in the first view it appears perfect, but when you close the modal and return to the home page and then return to the internal page and open the inline calendar again it does not appear.
I am creating a calendar inside a component called calendar that is imported by a modal-date.
- HTML do Component Calendar.
- Script do Component Calendar
export default {
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 (
'<div class="toolbar calendar-custom-toolbar no-shadow">' +
'<div class="toolbar-inner">' +
'<div class="left">' +
'<a href="#" class="link icon-only"><i class="icon icon-back ' +
(app.theme === "md" ? "color-black" : "") +
'"></i></a>' +
"</div>" +
'<div class="center"></div>' +
'<div class="right">' +
'<a href="#" class="link icon-only"><i class="icon icon-forward ' +
(app.theme === "md" ? "color-black" : "") +
'"></i></a>' +
"</div>" +
"</div>" +
"</div>"
);
},
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) {
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);
}
$$('.modal-date').on('popup:closed', function (e, popup) {
calendarInline.destroy();
console.log('teste');
});
},
};