Duplicated calendar

1

Hi, i’ve been problems with calendar, i’ve used with popup events and page events but when i go to other page and go again to inicio page when i click the calendar this is duplicated for each time that i go and back to inicio page

this is my code

$$(document).on('page:beforein', '.page[data-name="inicio"]', function (e) {

  var calendarModal = app.calendar.create({
    inputEl: '#demo-calendar-modal',
    openIn: 'popover',
    footer: true,
    dateFormat: 'yyyy-mm-dd',
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto' , 'Septiembre' , 'Octubre', 'Noviembre', 'Diciembre'],
    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
    header: true,
    headerPlaceholder: 'Seleccionar fecha',
    closeOnSelect: true
  });

});

$$(’.popup_solicitar_servicio’).on(‘popup:closed’, function (e, popup) {

app.calendar.close(’#demo-calendar-modal’);
app.calendar.destroy(’#demo-calendar-modal’);
app.picker.close(’#hora_servicio’);

});

1 Like
2

I’m making some guesses here - I hope it helps.

It seems like you may be using stacked pages. If so, then you should create the calendar in your app’s initialization and not inside of the event handler, which will create another calendar every time the page becomes active because it was never removed from the DOM. The calendar will open when you click on the inputEl and there is no need to call app.calendar.close or app.calendar.destroy

1 Like
3

Hi, stackPages is set to false, how i can create the calendar in my app’s initialization?

4

If you’re not using stacked pages, you need to be sure that the page with the inputEl is in the DOM when you create the calendar. I suggest that you try changing your event handler to use the page:init event, which will be invoked only one time for the page, and remove the close and destroy calls.

5

The calendar is at popup i don’t know if this have that see to something

6

i can add and remove from dom a calendar each time that open and close?

7

I think you should just try changing from ‘page:beforein’ to ‘page:init’

8

pageInit: function (e, page) {

      var calendarModal = app.calendar.create({
        inputEl: '#demo-calendar-modal',
        openIn: 'popup',
        footer: true,
        dateFormat: 'yyyy-mm-dd',
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto' , 'Septiembre' , 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
        dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
        header: true,
        headerPlaceholder: 'Seleccionar fecha',
        closeOnSelect: true
      });

}

Yes, i’ve tried that but still the same, heeelpp :frowning:

9

I can’t tell from that last bit of code it is for just the one page. Make sure that you check the value of ‘page’ or use the form like you had before:

$$(document).on(‘page:init’, ‘.page[data-name=“inicio”]’, function (e) {

var calendarModal = app.calendar.create({
inputEl: ‘#demo-calendar-modal’,
openIn: ‘popover’,
footer: true,
dateFormat: ‘yyyy-mm-dd’,
monthNames: [‘Enero’, ‘Febrero’, ‘Marzo’, ‘Abril’, ‘Mayo’, ‘Junio’, ‘Julio’, ‘Agosto’ , ‘Septiembre’ , ‘Octubre’, ‘Noviembre’, ‘Diciembre’],
monthNamesShort: [‘Ene’, ‘Feb’, ‘Mar’, ‘Abr’, ‘May’, ‘Jun’, ‘Jul’, ‘Ago’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dic’],
dayNames: [‘Domingo’, ‘Lunes’, ‘Martes’, ‘Miercoles’, ‘Jueves’, ‘Viernes’, ‘Sabado’],
dayNamesShort: [‘Dom’, ‘Lun’, ‘Mar’, ‘Mie’, ‘Jue’, ‘Vie’, ‘Sab’],
header: true,
headerPlaceholder: ‘Seleccionar fecha’,
closeOnSelect: true
});

});

I would try using javascript console and set breakpoint on the app.calendar.create to see when it is being called.