【JavaScript】シンプルなカレンダーの作成
JavaScriptでシンプルなカレンダーの作成。
いくつかネットに転がっているコードを参考にもしましたが、基本的にDateの使い方さえ知っていればあとはifとforだけで意外と簡単に作れると知りました。
const today = new Date(); // 現在の日時 const year = today.getFullYear(); // 年 const month = today.getMonth(); // 月 0~11 // 月末・月初の取得 const start = new Date(year, month, 1); // 月初 const last = new Date(year, month + 1, 0); // 月末 const startDate = start.getDate(); // 月初 const lastDate = last.getDate(); // 月末 const startDay = start.getDay(); // 月初の曜日 const lastDay = last.getDay(); // 月末の曜日 // カレンダーの作成 const weeks = ['日', '月', '火', '水', '木', '金', '土']; // HTML表示用変数 let calendar = '<table>'; calendar +=`<caption>${year}年${month + 1}月</caption>`; // 曜日の行 calendar += '<tr>'; for (const week of weeks) { calendar += '<th>' + week + '</td>'; } calendar += '</tr>'; let dayCount = 0; // 曜日カウント用 for(let i = startDate; i <= lastDate; i++) { if(dayCount === 0) { calendar += '<tr>'; } // 1日までの曜日に空白を入れる if(i === startDate) { for(let j = 0; j < startDay; j++) { calendar += '<td></td>'; dayCount++; } } calendar += '<td>' + i +'</td>'; dayCount++; if(dayCount === 7) { calendar += '</tr>'; dayCount = 0; } } // 最終週は土曜になるまでから空白を入れる for(let i = lastDay; i < 7; i++) { calendar += '<td></td>'; if(i === 7) { calendar += '</tr>'; } } calendar += '<table>'; // HTMLに書き込み document.write(calendar);
解説
基本的な文法の解説は省略します。
Dateオブジェクトの詳細については以下。
Date - JavaScript | MDN
ポイントとしては、JaavScriptでは月は0~11で表します。
また、前月の月末の日付を取得したい場合には、コンストラクタの日付引数で0を指定してあげる必要があります。