Hi,
I am trying to load the inline calendar into the “about.html” page of your “split-view” template example here: https://framework7.io/templates/. I am using the latest version of framework7 which is v3.3.2
Bellow is my code:
routes.js:
routes = [
{
path: '/about/',
url: './pages/about.html',
},
...
];
about.html:
<div class="page" data-name="about">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">About</div>
</div>
</div>
<div class="page-content">
<div class="block-title">About My App</div>
<div class="block block-strong">
<p>Fugiat perspiciatis excepturi, soluta quod non ullam deleniti. Nobis sint nemo consequuntur, fugiat. Eius perferendis animi autem incidunt vel quod tenetur nostrum, voluptate omnis quasi quidem illum consequuntur, a, quisquam.</p>
<p>Laudantium neque magnam vitae nemo quam commodi, in cum dolore obcaecati laborum, excepturi harum, optio qui, consequuntur? Obcaecati dolor sequi nesciunt culpa quia perspiciatis, reiciendis ex debitis, ut tenetur alias.</p>
</div>
<div class="block">
<div class="block-title">Inline with custom toolbar</div>
<div class="block block-strong no-padding">
<div id="demo2-calendar-inline-container"></div>
</div>
</div>
</div>
</div>
<script>
var $$ = Dom7;
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December'];
var calendarInline = app.calendar.create({
containerEl: '#demo2-calendar-inline-container',
value: [new Date()],
weekHeader: false,
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);
$$('.calendar-custom-toolbar .left .link').on('click', function () {
calendarInline.prevMonth();
});
$$('.calendar-custom-toolbar .right .link').on('click', function () {
calendarInline.nextMonth();
});
},
monthYearChangeStart: function (c) {
$$('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] +', ' + c.currentYear);
}
}
});
</script>
The calendar is not showing up and I am not getting any error when I run the above code. The weird thing is if I load the page as a component it works.
The bellow code works:
routes.js:
routes = [
{
path: '/about/',
componentUrl: './pages/about.html',
},
...
];
about.html:
<template>
<div class="page" data-name="about">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">About</div>
</div>
</div>
<div class="page-content">
<div class="block-title">About My App</div>
<div class="block block-strong">
<p>Fugiat perspiciatis excepturi, soluta quod non ullam deleniti. Nobis sint nemo consequuntur, fugiat. Eius perferendis animi autem incidunt vel quod tenetur nostrum, voluptate omnis quasi quidem illum consequuntur, a, quisquam.</p>
<p>Laudantium neque magnam vitae nemo quam commodi, in cum dolore obcaecati laborum, excepturi harum, optio qui, consequuntur? Obcaecati dolor sequi nesciunt culpa quia perspiciatis, reiciendis ex debitis, ut tenetur alias.</p>
</div>
<div class="block">
<div class="block-title">Inline with custom toolbar</div>
<div class="block block-strong no-padding">
<div id="demo2-calendar-inline-container"></div>
</div>
</div>
</div>
</div>
</template>
<script>
return {
on: {
pageInit: function(e, page) {
var self = this;
var today = new Date();
var app = self.$app;
var $ = self.$;
// Inline with custom toolbar
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
self.calendarInline = app.calendar.create({
containerEl: '#demo2-calendar-inline-container',
value: [new Date()],
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 ' + (self.$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 ' + (self.$theme.md ? 'color-black' : '') + '"></i></a>' +
'</div>' +
'</div>' +
'</div>';
},
on: {
init: function(c) {
$('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ', ' + c.currentYear);
$('.calendar-custom-toolbar .left .link').on('click', function() {
self.calendarInline.prevMonth();
});
$('.calendar-custom-toolbar .right .link').on('click', function() {
self.calendarInline.nextMonth();
});
},
monthYearChangeStart: function(c) {
$('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ', ' + c.currentYear);
}
}
});
},
}
}
</script>
How do I load the calendar without using component? The reason I want it to load NOT as a component is because I need to use the calendar in the index.html
Thanks