Inline calendar not showing

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

If you have these in your index.html. it means F7 will load everything it finds on your index.html into the DOM on init… So, just specify your id on where you want the calender… and in your app js, just do normal JS… Eg:

var $$ = Dom7;

// Framework7 App main instance
var app = new Framework7({
  root: "#app",
  theme: "auto",

  routes: routes
  
});

//calender
var calendarDefault = app.calendar.create({
  inputEl: '#my-calendar-default',
  openIn: 'customModal',
  header: true,
  footer: true,
  dateFormat: 'MM dd yyyy',
});

As long as your id '#my-calendar-default' is on any input, popup, page, or anything on index.html, it will have that calender… From this, you can see how to deal with your inline calender now…

1 Like