Calendar issue in V1

1 
    var calendarInline = myApp.calendar({ multiple: false,

    onDayClick:function(c,dayContainer,year,month,day){
      },
      onChange:function(c,values,displayValues){
      },
      events: dd,
      dateFormat: 'yyyy-mm-dd',
      container: '#cal_inline',
      value: [new Date()],
      weekHeader: true,
      toolbarTemplate: 
        '<div class="toolbar calendar-custom-toolbar">' +
            '<div class="toolbar-inner">' +
                '<div class="left">' +
                    '<a href="#" class="link icon-only"><i class="icon icon-back"></i></a>' +
                '</div>' +
                '<div class="center"></div>' +
                '<div class="right">' +
                    '<a href="#" class="link icon-only"><i class="icon icon-forward"></i></a>' +
                '</div>' +
            '</div>' +
        '</div>',
    onOpen: function (p) {
        $$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
        $$('.calendar-custom-toolbar .left .link').on('click', function () {
            calendarInline.prevMonth();
            a = monthNames[p.currentMonth] +' ' + p.currentYear;
        });
        $$('.calendar-custom-toolbar .right .link').on('click', function () {
            calendarInline.nextMonth();
            a = monthNames[p.currentMonth] +' ' + p.currentYear;
        });
    },
    onMonthYearChangeStart: function (p) {
        $$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
    }
});

when i put the same code two time

    var calendarInline = myApp.calendar({ multiple: false,

    onDayClick:function(c,dayContainer,year,month,day){
      },
      onChange:function(c,values,displayValues){
      },
      events: dd,
      dateFormat: 'yyyy-mm-dd',
      container: '#cal_inline',
      value: [new Date()],
      weekHeader: true,
      toolbarTemplate: 
        '<div class="toolbar calendar-custom-toolbar">' +
            '<div class="toolbar-inner">' +
                '<div class="left">' +
                    '<a href="#" class="link icon-only"><i class="icon icon-back"></i></a>' +
                '</div>' +
                '<div class="center"></div>' +
                '<div class="right">' +
                    '<a href="#" class="link icon-only"><i class="icon icon-forward"></i></a>' +
                '</div>' +
            '</div>' +
        '</div>',
    onOpen: function (p) {
        $$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
        $$('.calendar-custom-toolbar .left .link').on('click', function () {
            calendarInline.prevMonth();
            a = monthNames[p.currentMonth] +' ' + p.currentYear;
        });
        $$('.calendar-custom-toolbar .right .link').on('click', function () {
            calendarInline.nextMonth();
            a = monthNames[p.currentMonth] +' ' + p.currentYear;
        });
    },
    onMonthYearChangeStart: function (p) {
        $$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
    }
});

i get two calendar, i need only one and last one should override the previous one, what is the solutions.

2

you can try by destroying the first cal before creating the new one

myCalendar.destroy()
1 Like