Calender is showing twice

I’m using framework7 for creating a form using framewok7.It appears that the init event is being fired twice , even though i have only a single view for each route.

  var calendarDateFormat = app.calendar.create({
  inputEl: '#demo-calendar-date-format',
    dateFormat: { month: 'long', day: '2-digit', year: 'numeric' },

from console output, it’s clear that event is being fired for a page.

trigger when the page you need is built => pageMounted

Take a look here :

Basic example:

    return {
         // Page Events
        on: {
            pageMounted: function(e, page) {
                var calendarDefault = app.calendar.create({
                 inputEl: '#demo-calendar-default',


1 Like

It looks like i’m misunderstooding the concepts.It would be helpful if someone may clearify it.Till now, in order to create a new page, i’m following the steps:-
1)First i create route in routes.js
2)next, i would create corresponding page in /pages directory.
3)In order to add events, i would do following in my app.js:-

    //add events here

I don’t understand when i would need to create a view? As far as i understood init must run only once, then,why it’s runing twice? Is it runing twice because all routes are in default view?
In my application, i have three routes which are:-
Should i make a single route with all these routes or one view for each route
The solution you provided in not working