I love the calendar page in Kitchensink with the sample date-events. But in my app I do not need any extra calendar.html page with a link to the calendar-page.html.
Can I use the inline calendar also with preconfigured event-dates for the days I need? How to do it?
I made an app site with side-navigation. In the side-navigation I can link to three different sites, also to a site which is called “calendar.html” (in pages folder).
When I click on “Calendar” the page, I only see the title “Kalender” and “Inline with custom toolbar”. Nothing else.
Here is the code of calendar.html:
<div class="page" data-name="calendar">
<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">Zurück</span>
</a>
</div>
<div class="title">Kalendar</div>
</div>
</div>
<div class="page-content">
<div class="block-title">Kalender</div>
<div class="block block-strong">
<div class = "content-block-title">Inline with custom toolbar</div>
<div class = "content-block">
<div style = "padding:0; margin-right:-15px; width:auto" class = "content-block-inner">
<div id = "calendar-inline-container"></div>
</div>
</div>
</div>
</div>
</div>
<script>
var myApp = new Framework7();
// Inline with custom toolbar
var $$ = Dom7;
var monthNames = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August' ,
'September' ,
'October',
'November',
'December'
];
var calendarInline = myApp.calendar ({
container: '#calendar-inline-container',
value: [new Date()],
weekHeader: false,
toolbarTemplate:
'<div class = "toolbar calendar-custom-toolbar">' +
'<div class = "toolbar-inner">' +
'<div class = "left">' +
'<a href = "#" class = "link icon-only"><i class = "icon icon-back"></i></a>' +
'</div>' +
'<div class = "center"></div>' +
'<div class = "right">' +
'<a href = "#" class = "link icon-only"><i class = "icon icon-forward"></i></a>' +
'</div>' +
'</div>' +
'</div>',
onOpen: function (p) {
$$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
$$('.calendar-custom-toolbar .left .link').on('click', function () {
calendarInline.prevMonth();
});
$$('.calendar-custom-toolbar .right .link').on('click', function () {
calendarInline.nextMonth();
});
},
onMonthYearChangeStart: function (p) {
$$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
}
});
</script>
What can I do to see the Code, which is made by JS? Please help me to understand this!
Hi. You’re calendar create code is using the older v1 structure. Are you using the Framework7 v1? It seems like you may be using the v2 (or v3) files and should update your code to use app.calendar.create with the newer parameters described here: http://framework7.io/docs/calendar.html
I have done the following: I used the actual code (v3) of the inline-calendar-example of the Framework7 homepage.
My calendar.html page code is as follows:
<div class="page" data-name="calendar">
<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">Zurück</span>
</a>
</div>
<div class="title">Kalendar</div>
</div>
</div>
<div class="page-content">
<div class="block-title">Kalender</div>
<div class="block block-strong">
<div class="block-title">Inline with custom toolbar</div>
<div class="block block-strong no-padding">
<div id="demo-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: '#demo-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>
Here my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#2196f3">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<title>My App</title>
<link rel="stylesheet" href="framework7/css/framework7.min.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="app">
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div>
<!-- Left panel with cover effect-->
<div class="panel panel-left panel-cover theme-light">
<div class="view">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Left Panel</div>
</div>
</div>
<div class="page-content">
<div class="list links-list">
<ul>
<li>
<a href="/about/" data-view=".view-main" class="panel-close"><i class="material-icons">info</i><span>Über diese App</span></a>
</li>
<li>
<a href="/color-themes/" class="panel-close"><i class="material-icons">settings</i><span>Einstellungen</span></a>
</li>
<li>
<a href="/calendar/" class="panel-close"><i class="f7-icons color-red">calendar</i><span>Kalender</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Your main view, should have "view-main" class -->
<div class="view view-main ios-edges">
<!-- Page, data-name contains page name which can be used in callbacks -->
<div class="page" data-name="home">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons ios-only">menu</i>
<i class="icon material-icons md-only">menu</i>
</a>
</div>
<div class="title sliding">My App</div>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content">
<div class="block-title">Hier die neue Aufgabe eingeben</div>
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input item-input-with-info">
<div class="item-inner">
<div class="item-input-wrap">
<input type="text" placeholder="Los geht's!">
<span class="input-clear-button"></span>
<div class="item-input-info">Neue Aufgabe eingeben ...</div>
</div>
</div>
</li>
</ul>
</div>
<div class="block">
<p>
Swipe out actions on list elements is one of the most awesome F7 features. It allows you to call hidden menu for each list element where you can put default ready-to use delete button or any other buttons for some required actions.
</p>
</div>
<div class="block-title">Swipe to delete with confirm modal</div>
<div class="list">
<ul>
<li class="swipeout">
<div class="item-content swipeout-content">
<div class="item-media"><i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Swipe left on me please</div>
</div>
</div>
<div class="swipeout-actions-right">
<a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a>
</div>
</li>
<li class="swipeout">
<div class="item-content swipeout-content">
<div class="item-media"> <i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Swipe left on me too</div>
</div>
</div>
<div class="swipeout-actions-right">
<a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">I am not removable</div>
</div>
</div>
</li>
</ul>
</div>
<div class="block-title">Swipe to delete without confirm</div>
<div class="list">
<ul>
<li class="swipeout">
<div class="item-content swipeout-content">
<div class="item-inner">
<div class="item-title">Swipe left on me please</div>
</div>
</div>
<div class="swipeout-actions-right">
<a href="#" class="swipeout-delete">Delete</a>
</div>
</li>
<li class="swipeout">
<div class="item-content swipeout-content">
<div class="item-inner">
<div class="item-title">Swipe left on me too</div>
</div>
</div>
<div class="swipeout-actions-right">
<a href="#" class="swipeout-delete">Delete</a>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">I am not removable</div>
</div>
</div>
</li>
</ul>
</div>
<div class="block-title">Swipe for actions</div>
<div class="list">
<ul>
<li class="swipeout">
<div class="item-content swipeout-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Swipe left on me please</div>
</div>
</div>
<div class="swipeout-actions-right">
<a href="#" @click="more">More</a>
<a href="#" class="swipeout-delete">Delete</a>
</div>
</li>
<li class="swipeout">
<div class="item-content swipeout-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Swipe left on me too</div>
</div>
</div>
<div class="swipeout-actions-right">
<a href="#" @click="more">More</a>
<a href="#" class="swipeout-delete">Delete</a>
</div>
</li>
<li class="swipeout">
<div class="item-content swipeout-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">You can't delete me</div>
</div>
</div>
<div class="swipeout-actions-right">
<a href="#" @click="more">More</a>
</div>
</li>
</ul>
</div>
<div class="block-title">With callback on remove</div>
<div class="list">
<ul>
<li class="swipeout" @swipeout:deleted="onDeleted">
<div class="item-content swipeout-content">
<div class="item-inner">
<div class="item-title">Swipe left on me please</div>
</div>
</div>
<div class="swipeout-actions-right">
<a href="#" class="swipeout-delete">Delete</a>
</div>
</li>
<li class="swipeout" @swipeout:deleted="onDeleted">
<div class="item-content swipeout-content">
<div class="item-inner">
<div class="item-title">Swipe left on me too</div>
</div>
</div>
<div class="swipeout-actions-right">
<a href="#" class="swipeout-delete">Delete</a>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">I am not removable</div>
</div>
</div>
</li>
</ul>
</div>
<div class="block-title">With actions on left side (swipe to right)</div>
<div class="list">
<ul>
<li class="swipeout">
<div class="item-content swipeout-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Swipe right on me please</div>
</div>
</div>
<div class="swipeout-actions-left">
<a href="#" class="color-green" @click="reply">Reply</a>
<a href="#" class="color-blue" @click="forward">Forward</a>
</div>
</li>
<li class="swipeout">
<div class="item-content swipeout-content">
<div class="item-media">
<i class="icon icon-f7"></i>
</div>
<div class="item-inner">
<div class="item-title">Swipe right on me too</div>
</div>
</div>
<div class="swipeout-actions-left">
<a href="#" class="color-green" @click="reply">Reply</a>
<a href="#" class="color-blue" @click="forward">Forward</a>
</div>
</li>
</ul>
</div>
<div class="block-title">On both sides with overswipes</div>
<div class="list media-list">
<ul>
<li class="swipeout">
<div class="swipeout-content">
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Facebook</div>
<div class="item-after">17:14</div>
</div>
<div class="item-subtitle">New messages from John Doe</div>
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
</div>
</div>
</a>
</div>
<div class="swipeout-actions-left">
<a href="#" class="color-green swipeout-overswipe" @click="reply">Reply</a>
<a href="#" class="color-blue" @click="forward">Forward</a>
</div>
<div class="swipeout-actions-right">
<a href="#" @click="more">More</a>
<a href="#" class="color-orange" @click="mark">Mark</a>
<a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a>
</div>
</li>
<li class="swipeout">
<div class="swipeout-content">
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">John Doe (via Twitter)</div>
<div class="item-after">17:11</div>
</div>
<div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
</div>
</div>
</a>
</div>
<div class="swipeout-actions-left">
<a href="#" class="color-green swipeout-overswipe" @click="reply">Reply</a>
<a href="#" class="color-blue" @click="forward">Forward</a>
</div>
<div class="swipeout-actions-right">
<a href="#" @click="more">More</a>
<a href="#" class="color-orange" @click="mark">Mark</a>
<a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a>
</div>
</li>
<li class="swipeout">
<div class="swipeout-content">
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Facebook</div>
<div class="item-after">16:48</div>
</div>
<div class="item-subtitle">New messages from John Doe</div>
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
</div>
</div>
</a>
</div>
<div class="swipeout-actions-left">
<a href="#" class="color-green swipeout-overswipe" @click="reply">Reply</a>
<a href="#" class="color-blue" @click="forward">Forward</a>
</div>
<div class="swipeout-actions-right">
<a href="#" @click="more">More</a>
<a href="#" class="color-orange" @click="mark">Mark</a>
<a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a>
</div>
</li>
<li class="swipeout">
<div class="swipeout-content">
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">John Doe (via Twitter)</div>
<div class="item-after">15:32</div>
</div>
<div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
</div>
</div>
</a>
</div>
<div class="swipeout-actions-left">
<a href="#" class="color-green swipeout-overswipe" @click="reply">Reply</a>
<a href="#" class="color-blue" @click="forward">Forward</a>
</div>
<div class="swipeout-actions-right">
<a href="#" @click="more">More</a>
<a href="#" class="color-orange" @click="mark">Mark</a>
<a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Popup -->
<div class="popup" id="my-popup">
<div class="view">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Popup</div>
<div class="right">
<a href="#" class="link popup-close">Close</a>
</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>Popup content goes here.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Login Screen -->
<div class="login-screen" id="my-login-screen">
<div class="view">
<div class="page">
<div class="page-content login-screen-content">
<div class="login-screen-title">Login</div>
<div class="list">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Username</div>
<div class="item-input-wrap">
<input type="text" name="username" placeholder="Your username">
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" name="password" placeholder="Your password">
</div>
</div>
</li>
</ul>
</div>
<div class="list">
<ul>
<li>
<a href="#" class="item-link list-button login-button">Sign In</a>
</li>
</ul>
<div class="block-footer">Some text about login information.<br>Click "Sign In" to close Login Screen</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Cordova -->
<!--
<script src="cordova.js"></script>
-->
<!-- Framework7 library -->
<script src="framework7/js/framework7.min.js"></script>
<!-- App routes -->
<script src="js/routes.js"></script>
<!-- Your custom app scripts -->
<script src="js/app.js"></script>
</body>
</html>
Nothing happened! Why? Is something wrong with the input of Java-Code or anything else?
Do you need any other file info (html, js)?
Okay. I copied the code of the KitchenSink (Core) repository. Now the calendar.html-page work fine. But I have not tested to edit events into the inline calendar.
BUT the “calendar-page.html” template is wrong. I can see the days of the month and a small shadow behind the day-numbers. And the name of the month is not displayed.
You can see the code of the template also in the github repository.
Please help me!
Use this template https://github.com/framework7io/framework7/blob/v3.0.7/kitchen-sink/core/pages/calendar-page.html
The template in master branch uses features from upcoming release
Thanks @nolimits4web for the advice. Now it works.
But my main problem now is still the inline calendar and the evnts to display of it.
My script code looks like this now:
<script>
var $$ = Dom7;
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December'];
var calendarInline = app.calendar.create({
containerEl: '#demo-calendar-inline-container',
value: [new Date()],
weekHeader: true,
events: [
new Date(2018, 6, 1),
new Date(2018, 6, 5),
{
from: new Date(2018, 6, 10),
to: new Date(2018, 6, 15)
},
{
from: new Date(2018, 6, 20,12,30),
title: 'Meeting with me',
to: new Date(2018, 6, 31)
}
],
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>
I can see under the day-numbers the blue points, which are the markers for events.
My problem is, I do not know the way to display the events under or beside the calendar.
Can anyone give me a hint or an example how to do?
Refer to the link i posted, there is an example of how to render list with events