Calendar component - swipe doesn't work after update method has been called

Hi there,

I’m using the calendar component in a Framework7 V5.7.12-project.

It’s initialized via app.calendar.create and has an event listener for the monthYearChangeStart event.
If the event is triggered a function is called that retrieves new calendar events via AJAX and writes them into params.events and after that the update-method of the calendar object is called.

That works fine and the new events are shown and I can navigate through the months with the arrows in the toolbar. But swiping doesn’t work after the update-method of the calendar has been called. If I comment out the call of the update method I still can swipe but of course the new events are not shown. It worked in a Framework7 v4-project.

Is that a bug or do I have to change something?

Can you show some relevant code example?

The calendar object:

community_calendar = app.calendar.create({

	  containerEl: '#community-kalender',
	  value: [new Date()],
	  weekHeader: true,
		
	  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);
		  community_calendar_termine_monat(c.currentYear,c.currentMonth);
		  $$('.calendar-custom-toolbar .left .link').on('click', function () {
			community_calendar.prevMonth();
			
		  });
		  $$('.calendar-custom-toolbar .right .link').on('click', function () {
			community_calendar.nextMonth();
			
		  });
		},
		monthYearChangeStart: function (c) {
			
		  $$('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] +', ' + c.currentYear);
		  community_calendar_termine_monat(c.currentYear,c.currentMonth);
		}
		
	  }
	 });

The function called when year/month changes:

function community_calendar_termine_monat(jahr,monat) {

app.request.promise({
	url: ...
	...
}).then(function(res) {

	var termine=res.data.termine;
	var events=[];

	for (var i=0;i<termine.length;i++) {
		
		var d=termine[i].datum;
					
		var event={
			date: 	d,
			color:	'#082846'
		}
		
		events.push(event);

	}

	community_calendar.params.events=events;
	community_calendar.update();
});

}

The update of the events is working and I still can navigate through the calendar with the arrows in the toolbar but not when I swipe. If I comment out community_calendar.update() swiping still works.

  • calendar is not initializing here…
<li class="item-content item-input item-input-outline">
            <div class="item-inner">
              <div class="item-title item-floating-label">From Date</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="From date" id="FromDate" readonly="readonly" />
              </div>
            </div>
</li>
  • inside mounted :
var self = this;
      var app = self.$f7;

      var celendar = app.calendar.create({
        inputEl: "#FromDate",
        closeOnSelect: true,
        header: true,
        headerPlaceholder: "From Date",
        openIn: "customModel",
      });