【作成環境】
Monaca
Onsen UI
Javascript
jQuery
【作りたいアプリ】
TOPページにカレンダーを表示したい
【今起きている問題】
読み込み時はカレンダーが表示されているが、メニュー切り替えするとカレンダーが表示されない。
【確認したこと】
・リロードすると表示される
・呼び出したい関数の中に挿入したconsole.logの中身が出力されているため関数が呼び出されていないわけではない。
きちんと関数自体は呼び出されているのになぜ表示されないのか知りたいです。
ご教授お願い致します。
【HTML】
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script>
window.fn = {};
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content
.load(page)
.then(menu.close.bind(menu));
console.log(page);
};
if (ons.platform.isIPhoneX()) {
document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
}
</script>
</head>
<body>
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<!-- <ons-list-item onclick="fn.load('home.html')" tappable> -->
<ons-list-item onclick="onsenClick('home.html')" tappable>
Home
</ons-list-item>
<!-- <ons-list-item onclick="fn.load('settings.html')" tappable> -->
<ons-list-item onclick="onsenClick('settings.html')" tappable>
Settings
</ons-list-item>
<!-- <ons-list-item onclick="fn.load('about.html')" tappable> -->
<ons-list-item onclick="onsenClick('about.html')" tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>
<template id="home.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="ion-ios-menu, material:md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Main
</div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;">
<button id="btPrev">前の月</button>
<span id="textTitle"></span>
<button id="btNext">次の月</button>
<div id="calendar">テスト</div>
<button id = "neko">ボタン</button>
</p>
</ons-page>
</template>
<template id="settings.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="ion-ios-menu, material:md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Settings
</div>
</ons-toolbar>
<details>
<summary>トグルボタン</summary>
<p>折りたたまれたコンテンツ</p>
</details>
</ons-page>
</template>
<template id="about.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="ion-ios-menu, material:md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
About
</div>
</ons-toolbar>
</ons-page>
</template>
</body>
</html>
【Javascript】
// This is a JavaScript file
// This is a JavaScript file
var hiduke = new Date();
var next_hiduke = new Date();
var txt_calendar = "";
var y = new Date().getFullYear();
var m = new Date().getMonth();
var myNavigator = document.querySelector('#myNavigator');
$(window).on("load", function() {
next_hiduke.setDate(next_hiduke.getDate() + 1);
createCalendar();
//次の月ボタン押したときの処理
$("#btNext").on('click', nextMonth);
//前の月ボタン押したときの処理
$("#btPrev").on('click', prevMonth);
//ページ遷移テスト
$("#neko").on('click', function(){
//var myNavigator = document.querySelector('#myNavigator');
myNavigator.pushPage('settings.html');
});
});
function createCalendar(){
var last_day = new Date(hiduke.getFullYear(), hiduke.getMonth() + 1, 0);
var first_day = new Date(hiduke.getFullYear(), hiduke.getMonth(), 1);
$("#textTitle").text(hiduke.getFullYear() + "/" + (hiduke.getMonth() + 1));
var table = document.createElement("table");
var tr = document.createElement("tr");
var th1 = document.createElement("th");
th1.textContent = "日";
tr.appendChild(th1);
var th2 = document.createElement("th");
th2.textContent = "月";
tr.appendChild(th2);
var th3 = document.createElement("th");
th3.textContent = "火";
tr.appendChild(th3);
var th4 = document.createElement("th");
th4.textContent = "水";
tr.appendChild(th4);
var th5 = document.createElement("th");
th5.textContent = "木";
tr.appendChild(th5);
var th6 = document.createElement("th");
th6.textContent = "金";
tr.appendChild(th6);
var th7 = document.createElement("th");
th7.textContent = "土";
tr.appendChild(th7);
table.appendChild(tr);
var dayOfWeek = first_day.getDay();
var tr = document.createElement("tr");
if(dayOfWeek !== 0){
for(var i = 0; i<dayOfWeek; i++){
var td = document.createElement("td");
tr.appendChild(td);
}
}
//日にちを入れていく
for(var i = 1; i<=last_day.getDate(); i++){
var dt = new Date(hiduke.getFullYear(), hiduke.getMonth(), i);
if(dt.getDay() == 6){
var td = document.createElement("td");
td.textContent = i;
td.classList.add("doyou");
tr.appendChild(td);
table.appendChild(tr);
tr = document.createElement("tr");
} else if(dt.getDay() == 0){
var td = document.createElement("td");
td.textContent = i;
td.classList.add("nitiyou");
tr.appendChild(td);
table.appendChild(tr);
} else {
var td = document.createElement("td");
td.textContent = i;
tr.appendChild(td);
}
}
if(last_day.getDay() !== 6){
for(i = last_day.getDay(); i<6; i++){
var td = document.createElement("td");
tr.appendChild(td);
}
}
table.appendChild(tr);
console.log(table);
$("#calendar").html(table);
}
function nextMonth(){
y = next_hiduke.getFullYear();
m = next_hiduke.getMonth();
//next_hidukeの月に+1
next_hiduke.setMonth(next_hiduke.getMonth() + 1);
hiduke.setMonth(hiduke.getMonth() + 1);
//関数呼び出し
createCalendar();
}
function prevMonth(){
y = next_hiduke.getFullYear();
m = next_hiduke.getMonth();
//next_hidukeの月に+1
next_hiduke.setMonth(next_hiduke.getMonth() - 1);
hiduke.setMonth(hiduke.getMonth() - 1);
//関数呼び出し
createCalendar();
}
function onsenClick(page){
var content = document.getElementById('content');
var menu = document.getElementById('menu');
content
.load(page)
.then(menu.close.bind(menu));
if(page == "home.html"){
console.log("*" + next_hiduke);
console.log("**" + hiduke);
createCalendar();
}
}