超初心者です。JavaScriptでカレンダー作成。誰か教えてください…
Q&A
Closed
解決したいこと
大変雑な内容ですが初めてゼロから作ってみました。
参考書の知識のみなので、雑な上にわかりにくく申し訳ありません。。
問題点も含め、その他ご指摘・アドバイス（もっと便利な書き方、今主流の書き方など）をいただきたいです。
また、投稿の仕方が間違っていたらごめんなさい。。
発生している問題・エラー
[前へ][次へ]ボタンを押すと、カレンダー部分が切り替わらず繰り返し増えてしまう。
該当するソースコード
script
const today =new Date();
let displayDate =new Date(today.getFullYear(),today.getMonth(),1);
function display(date) {
let year = date.getFullYear();
let month = date.getMonth();
//タイトル部分
document.getElementById('title').textContent = year + '年' + (month+1) + '月';
//カレンダー部分
displayCalender(year,month);
}
//初期画面
window.onload = function() {
display(today);
}
//ボタンクリック
document.getElementById('prev').onclick = function() {
displayDate.setMonth(displayDate.getMonth()-1);
display(displayDate);
};
document.getElementById('next').onclick = function() {
displayDate.setMonth(displayDate.getMonth()+1);
display(displayDate);
};
//カレンダー本体
function displayCalender(year,month) {
//今月初日の曜日
let firstDay = new Date(year,month,1).getDay();
//今月最終日の日付と曜日
let lastDate = new Date(year,month+1,0).getDate();
let lastDay = new Date(year,month+1,0).getDay();
//前月の最終日
let prevLastdate = new Date(year,month,0).getDate();
for (let fullDate=1; fullDate<=lastDate; fullDate++ ) {
let currentCalender = new Date(year,month,fullDate);
let sunday = currentCalender.getDay();
let firstWeek = 7-sunday; //1週目の日数
let weekList = new Array();
//HTMLへの書き出し処理
function weekListData() {
//行TR
let newRow = document.createElement('tr');
for (let i =0; i<weekList.length; i++) {
//TDの中身
newRow.insertAdjacentHTML('beforeend','<td>'+weekList[i]+'</td>');
}
//tbodyにTRを追加
document.getElementById('calenderBody').appendChild(newRow);
}
//1週目の処理
if(fullDate===1){
//今月1日からのデータ
for(let j = fullDate; j<=firstWeek; j++) {
weekList.push(j);
}
//前月データの入れ込み
if (weekList.length<7) {
for(let j = 0; j<firstDay; j++) {
weekList.unshift(prevLastdate-j);
}
}
weekListData();
}
//2週目以降の処理
else if(sunday===0){
for(let j = fullDate; j<fullDate+7 && j<lastDate+1; j++) {
weekList.push(j);
}
//最終週次月データの入れ込み
if (weekList.length<7) {
for(let j = 1; j<=6-lastDay; j++) {
weekList.push(j);
}
}
weekListData();
}
}
}
html
<!DCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スケジュール管理</title>
<meta name="description" content="スケジュール管理するWebアプリ">
<link href="https://unpkg.com/ress/dist/ress.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="calender">
<h1 id="title"></h1>
<table>
<thead>
<tr>
<th>日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
</tr>
</thead>
<tbody id="calenderBody">
</tbody>
</table>
</div>
<div id="button">
<button id="prev">前へ</button>
<button id="next">次へ</button>
</div>
<script src="script.js"></script>
</body>
</html>
自分で試したこと
function display(date)の中身が間違っていると思い、色々と試しましたが全くわかりません。
0
