javaScriptでカレンダーを作成したい
カレンダーをjavaScriptで作成しております。
tableをflexして２段のカレンダーです。
①次へや前へのボタンを押すと前のが削除されず下へ増えていってしまいます。
②矢印を２回押したら次の次の月を表示したいのができません。
ご教授お願いいたします。
Java Script
let topicsData = [
["1", "1日です"],
["4", "4日です"],
["9", "9日です"],
["15", "15日です"],
["27", "27日です"]
]
function showProcess(year, month) {
const lastday = new Date(year, month + 1, 0).getDate() + 1;
const topics = new Array();
for (i = 0; i <= lastday; i++) {
topics[i] = "";
}
for (i = 0; i < topicsData.length; i++) {
topics[topicsData[i][0]] = topicsData[i][1];
}
//HTMLタグをつくる
const table = document.getElementById("calendarleft");
for (let i = 1; i <= 15; i++) {
let tr = document.createElement("tr");
//tdタグ(日付)
let td = document.createElement("td");
td.textContent = i;
//tdタグ(曜日)
day = new Date(year, month, i);
days = day.getDay();
weekjp = new Array("日", "月", "火", "水", "木", "金", "土");
weeks = weekjp[days];
let tdWeek = document.createElement("td");
tdWeek.innerText = weeks;
//tdタグ(トピックス)
let topicsText = document.createElement("td");
topicsText.innerText = topics[i];
console.log(topics[i]);
//HTMLに表示させる
document.querySelector('#header').innerHTML = (month + 1) + "月";
table.appendChild(tr);
tr.appendChild(td);
tr.appendChild(tdWeek);
tr.appendChild(topicsText);
}
const table2 = document.getElementById("calendarright");
for (let i = 16; i < lastday; i++) {
let tr = document.createElement("tr");
//tdタグ(日付)
let td = document.createElement("td");
td.textContent = i;
//tdタグ(曜日)
day = new Date(year, month, i);
days = day.getDay();
weekjp = new Array("日", "月", "火", "水", "木", "金", "土");
weeks = weekjp[days];
let tdWeek = document.createElement("td");
tdWeek.innerText = weeks;
//tdタグ(トピックス)
let topicsText = document.createElement("td");
topicsText.innerText = topics[i];
console.log(topics[i]);
//HTMLに表示させる
document.querySelector('#header').innerHTML = (month + 1) + "月";
table2.appendChild(tr);
tr.appendChild(td);
tr.appendChild(tdWeek);
tr.appendChild(topicsText);
}
}
const today = new Date();
let showDate = new Date(today.getFullYear(),today.getMonth(),1);
window.onload = function () {
showProcess(today.getFullYear(),today.getMonth());
};
function prev() {
showProcess(showDate.getFullYear(),showDate.getMonth()-1);
}
function next() {
showProcess(showDate.getFullYear(),showDate.getMonth()+1);
}
お礼
回答ありがとうございました。 大変参考になりましたー