cannot get the calendar datepicker to popup - Framework7

I'm making a small app for first time making use of HTML, Javascript and Framework7. I've installed framework7 and have made the directory and installation of the basic starter template of files for a blank project...Currently using 'npm start' server, and it returns the default homepage content on the browser. so that's OK...

Right now I only want the 'Calendar/Datepicker' to function. I've gotten the date field to display. But when I try to click it and get the calendar to show, like it does in Framework7 documentation https://v3.framework7.io/docs/calendar.html , Nothing comes up. I've now tried multiple times have done just as the guide asked, and there is no response. Is there something extra that I need?

Thanks for any advise.

I've included parts of the code below:

app.js :

import $ from 'dom7'; import Framework7 from 'framework7/bundle';

// Import F7 Styles
import 'framework7/framework7-bundle.css';

// Import Icons and App Custom Styles
import '../css/icons.css'; import '../css/app.css';


// Import Routes
import routes from './routes.js';
// Import Store
import store from './store.js';

// Import main app component
import App from '../app.f7';


var app = new Framework7({
  name: 'WeatherStationDat', // App name
  theme: 'auto', // Automatic theme detection
  el: '#app', // App root element
  component: App, // App main component

  // App store
  store: store,
  // App routes
  routes: routes,
});


//HERE
var calendar = app.calendar.create({
    inputEl: "#calendarinput"
});

home.f7 :

<template>
  <div class="page" data-name="home">
    <!-- Top Navbar -->
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link icon-only panel-open" data-panel="left">
            <i class="icon f7-icons if-not-md">menu</i>
            <i class="icon material-icons if-md">menu</i>
          </a>
        </div>
        <div class="title sliding">WeatherStationDat</div>
        <div class="right">
          <a href="#" class="link icon-only panel-open" data-panel="right">
            <i class="icon f7-icons if-not-md">menu</i>
            <i class="icon material-icons if-md">menu</i>
          </a>
        </div>
        <div class="title-large">
          <div class="title-large-text">WeatherStationDat</div>
        </div>
      </div>
    </div>
    <!-- Toolbar-->
    <div class="toolbar toolbar-bottom">
      <div class="toolbar-inner">
        <a href="#" class="link">Left Link</a>
        <a href="#" class="link">Right Link</a>
      </div>
    </div>
    
    
    <!-- Scrollable page content-->
    <div class="page-content">
    
      <div class="block block-strong">
        <p>Here is your blank Framework7 app. Let's see what we have here.</p>
      </div>
    
      <div class="block block-strong">
      
        <p>enter date</p>
      
        <div class="list no-hairlines-md">
            <ul>
                <li>
                <div class="item-content item-input">
                    <div class="item-inner">
                    <div class="item-input-wrap">

                        <!-- HERE -->
                        <input type="text" placeholder="Your birth date" readonly="readonly" id="calendarinput"/>


                    </div>
                    </div>
                </div>
                </li>
            </ul>
        </div>
        
      </div>
    </div>
    
  </div>
  
</template>
<script>
export default () => {
  return $render;
}
</script>

Ok I figured out a way to get it to work. found out how to do it while debugging another field. I had assumed that because 'var app = new Framework7' code was present in app.js, that's where to put the calendar.create() code. But actually when that code is put in section of home.f7 file, inside 'export default' and 'on pageInit', the calendar pops up.

notice, $f7.calendar.create() is used in this file, not app.calendar.create(). there actually was one documentation that showed that being done, but I missed it before.

The home.f7 file is used here; I tried putting below script code in app.js but there was no response from the calendar field.

This is the HTTP that goes in the content section of the home.f7 page:

 <!--CALENDAR-->
      <div class="block block-strong">
      
        <p>ENTER DATE</p>
      
        <div class="list no-hairlines-md">
            <ul>
                <li>
                <div class="item-content item-input">
                    <div class="item-inner">
                    <div class="item-input-wrap">
                        <input type="text" placeholder="Enter date of record" readonly="readonly" id="calendarinput"/>
                    </div>
                    </div>
                </div>
                </li>
            </ul>
        </div>
      </div>

At the end of the file there is a section, This code goes in there:

<script>

export default (props, { $, $f7, $on }) => {

    $on('pageInit', () => {

        let calendarDefault;
        
        calendarDefault = $f7.calendar.create({
            inputEl: '#calendarinput',
        });
        
        
    })
    
    return $render;
}

</script>