JavaScriptの練習：カレンダーちょっと改良
カレンダーは月末日が表示されないというバグがあることに気づいたので、直すついでに、当初作ってみたかったようにやってみた。
成果物はこちら。
最初は、thimbleで作業していたが、thimbleは「new Date（2018,1,31,0,0,0）」と日時を指定しても、現在の日時になってしまうことがわかった。Playcodeも同じみたいだった。日本標準時の扱いにくさもあって、ThimbleやPlaycodeに依存しない、VS Code＋Chromeという標準的な開発環境に落ち着いたこともメモしておきます。
コードは、入力エラーチェックも入れて、多少スッキリしたような気がします。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calendar</title>
<!-- <link> タグを HTML ファイルに追加します。通常は <head> タグ内に置かれます -->
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div>
<input id="year1" type="text" maxlength="4" pattern="^[0-9]+$" size="4" min="1970">
<label for="year1">年</label>
<input id="month1" type="text" maxlength="2" pattern="^[0-9]+$" size="2" max="12">
<label for="month1">月</label>
<button class="setcal1">Set Calendar</button>
</div>
<p class="target"></p>
<table id="table">
</table>
<script src="script.js"></script>
</body>
</html>
style.css
/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
body {
background-color: white;
font-family: "Open Sans", sans-serif;
padding: 5px 25px;
font-size: 18px;
margin: 0;
color: #444;
}
h1 {
font-family: "Merriweather", serif;
font-size: 32px;
}
table {
text-align: center;
width: 490px;
border: 1px;
border-color: black;
}
.target{
padding-top: 5px;
padding-bottom: 5px;
}
.sun {
color: red;
background-color: lightpink;
}
.sat {
color: darkblue;
background-color: lightblue;
}
.notThisMonth {
color:darkgray;
background-color: lightgray;
}
.sunNotThisMonth {
color: rgba(148, 53, 53, 0.8);
background-color: rgba(148, 53, 53, 0.3)
}
.satNotThisMonth {
color: rgba(38, 38, 168, 0.8);
background-color: rgba(38, 38, 168, 0.3);
}
script.js
var myTarget = document.querySelector('.target');
var cmdSetCal1 = document.querySelector('.setcal1');
var myYear = document.getElementById('year1');
var myMonth = document.getElementById('month1');
var myTable = document.getElementById('table');
var day1 = new Date();
myYear.value = day1.getFullYear();
myMonth.value = day1.getMonth()+1;
function setCal1(){
var numYear = myYear.value;
var numMonth = myMonth.value;
var dayStart = new Date(numYear,numMonth-1,1,0,0,0,0);
console.log('dayStart:' + dayStart);
if (dayStart.toString() === "Invalid Date") {
alert('Please input correct year and month');
return;
}
day1 = new Date(numYear,numMonth-1,1,0,0,0,0);
day1.setDate(dayStart.getDate() - dayStart.getDay());
console.log('day1:' + day1);
myTarget.textContent = numYear + "年" + numMonth + "月";
var booLoop = true;
myTable.innerHTML = '';
var row = myTable.insertRow(-1);
var myHTML = '<th class="sun">日</th><th class="week">月</th><th class="week">火</th><th class="week">水</th><th class="week">木</th><th class="week">金</th><th class="sat">土</th>';
row.innerHTML = myHTML;
do {
row = myTable.insertRow(-1);
myHTML = "";
var i;
for (i=0; i<7; i++){
if (day1.getMonth() != numMonth-1){
if (i==0){
myHTML += '<td class="sunNotThisMonth">' + day1.getDate() + '</td>';
} else if (i === 6){
myHTML += '<td class="satNotThisMonth">' + day1.getDate() + '</td>';
} else {
myHTML += '<td class="notThisMonth">' + day1.getDate() + '</td>';
}
} else {
if (i==0){
myHTML += '<td class="sun">' + day1.getDate() + '</td>';
} else if (i === 6){
myHTML += '<td class="sat">' + day1.getDate() + '</td>';
} else {
myHTML += '<td class="week">' + day1.getDate() + '</td>'; }
}
day1.setDate(day1.getDate()+1);
//console.log(day1);
}
row.innerHTML = myHTML;
if (day1.getMonth() != dayStart.getMonth()) {
booLoop = false;
}
} while (booLoop);
}
cmdSetCal1.addEventListener('click', setCal1);