I followed the example in ‘calendar’ but got an error.
I want a solution to this.
here is my html code
calender.html
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link panel-open" data-panel="left">
<i class="f7-icons">menu</i>
</a>
</div>
<div class="title">
<p>Calendar</p>
</div>
<div class="right">
<a class="link back"><i class="f7-icons">multiply</i></a>
</div>
</div>
</div>
<div class="page-content">
<div class="block-title">Default setup</div>
<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="date" readonly="readonly" id="demo-calendar-default"/>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
index.html
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<title>My App</title>
<link rel="stylesheet" href="css/framework7.bundle.min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="app">
<div class="statusbar"></div>
<div class="view view-main view-init">
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link panel-open" data-panel="left">
<i class="f7-icons">menu</i>
</a>
</div>
<div class="title">
<p>Hello world</p>
</div>
<div class="right">
<a class="link back"><i class="f7-icons">multiply</i></a>
</div>
</div>
</div>
<div class="page-content">
<div class="block">
<div class="list links-list">
<ul>
<li><a href="/calendar/">Calendar</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>
and my-app.js
// Initialize app
var $$ = Dom7;
var myApp = new Framework7({
root: ‘#app’,
// App Name
name: ‘My App’,
// App id
id: ‘com.hello.hello’,
// Enable swipe panel
iosTranslucentBars: false,
iosTranslucentModals: false,
routes: [
{
path: ‘/calendar/’,
url: ‘./pages/calendar.html’,
},
],
});
var calendarDefault = app.calendar.create({
inputEl: ‘#demo-calendar-default’,
});
// Option 2. Using one ‘pageInit’ event handler for all pages:
$$(document).on(‘pageInit’, function (e) {
})
// Option 2. Using live ‘pageInit’ event handlers for each page
$$(document).on(‘pageInit’, ‘.page[data-page=“about”]’, function (e) {
})
console error message
Uncaught TypeError: Cannot read property ‘create’ of undefined
at my-app.js:19
(anonymous) @ my-app.js:19