見出し画像

やっぱり。JavaScript！-カレンダー

donguri

まず日記といえば日にちの設定、曜日の設定が必要です。そこでデータを撮ってくる命令を書きましょう！

今日の日にちのデータを取得、変数dateに代入します。これが基本です。

let date = new Date();

変数dateから必要なデータを個別(年、月、日)に取り出していきます。


   let year  = date.getFullYear();　　　　　　　　// 年
   let month = date.getMonth() + 1;                         // 月
   let day   = date.getDate();　　　　　　　　　  // 日

これで一度出力してみましょう。

console.log(year,month,day)

ブラウザのコンソールで実行します。

画像4

とすると、"2019 11 18"　と出力されます。コンソールで試した日付が取得出来ているのが確認出来ました。

日付が取得出来たのでこれを利用してカレンダーを作ってみます。

まずは

画像2

が表示されるようにしましょう。

let table_title = year+"年 "+month+"月";
let captionHtml = "<caption>"+table_title+"</caption>";
// 曜日の行を作成
let weekdays = ["日", "月", "火", "水", "木", "金", "土"];
let weekdaysStr = "<tr>";
for ( var i=0; i < 7; i++){
if(i==0){
weekdaysStr += "<td>" + weekdays[i] + "</td>";
}else if(i==6){
weekdaysStr += "<td>" + weekdays[i] + "</td>";
}else{
weekdaysStr += "<td>" + weekdays[i] + "</td>";
}
}
weekdaysStr += "</tr>";

"2019年 11月"ですが、

let table_title = year+"年 "+month+"月";
let captionHtml = "<caption>"+table_title+"</caption>";

変数captionHtml に代入して、最後に表示せせます。

そして、曜日ですが、配列

let weekdays = ["日", "月", "火", "水", "木", "金", "土"];

この配列をHTMLのテーブル構造に入れていきます。<tr></tr>と<td></td>で挟んでいきます。その方法としては forループを使います。

var weekdaysStr = "<tr>";

この間でforループを回します。(繰り返して<tr>と</tr>で挟みます)

var weekdaysStr = "</tr>";

ループです

for ( var i=0; i < 7; i++){
if(i==0){
weekdaysStr += "<td>" + weekdays[i] + "</td>";
}else if(i==6){
weekdaysStr += "<td>" + weekdays[i] + "</td>";
}else{
weekdaysStr += "<td>" + weekdays[i] + "</td>";
}
}

結果、命令が実行され、

<tr><td>日</td><td>月</td><td>火</td><td>水</td><td>木</td><td>金</td><td>土</td></tr><tr><td>

とタグ付けされます。

2019年 11月
日 月 火 水 木 金 土

と表示されていると思います。

次は、

画像3

日付の部分です。ここでは、曜日によって、日にちをずらす必要があります。日付がないところに空白を入れることで、日をずらして表示します。

当月1日の日付を取得します。

let firstDate = new Date(year, month-1, 1);

翌月の0日を指定して当月の月末日を取得

let lastDate = new Date(year, month, 0);

ここから表示させる命令です。

let htmlStr = "<tr>";

変数htmlStrにHTMLのタグを入れる命令を入れていきます。

画像4

赤丸の空白を作ります。まず、月初めの1日の曜日を

let startWeekDay = firstDate.getDay();

で求めます。(0,1,2,3,4,5,6で出力されます)

取得した1日の曜日の前まで空欄を入れます。

for ( var i=0; i < startWeekDay; i++){
htmlStr += "<td>&nbsp;</td>";
}

次に、1日から月の末日までループで日付を入れていきます。日曜日始まり土曜日までのループです。

for(let i=1; i <= lastDate.getDate(); i++){ 
//  ここに繰り返しの処理を書きます。
}

ここに繰り返しの処理です。

let date = new Date(year, month-1, i);
let weekDay = date.getDay();
let dateStr = year+"."+month+"."+i;
let cellStr = date.getDate();
if(weekDay == 0) htmlStr += "<tr>";
htmlStr += "<td>";
htmlStr += cellStr + "</a></td>";
if(weekDay == 6) htmlStr += "</tr>\n";

月末の空白は

let lastDayWeek = lastDate.getDay();
if (lastDayWeek != 6) {
　for ( let i=lastDayWeek+1; i <= 6; i++){
htmlStr += "<td>&nbsp;</td>";
　}
　htmlStr += "</tr>";
}

と入れて最後は描画、表示すように命令します。これで完全な形で表示されるはずです。

document.getElementById("calendar").innerHTML = "<table>" + captionHtml + weekdaysStr + htmlStr + "</table>";

全体です。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8" />
   <title>Diary</title>
 </head>
 <body>
   <div id="calendar" class="calendar"></div>
   
   <script>
       
     let date = new Date();
     let year = date.getFullYear();
     let month = date.getMonth() + 1;
     let today = date.getDate();

     let firstDate = new Date(year, month-1, 1);
     let lastDate = new Date(year, month, 0);


     let table_title = year+"年 "+month+"月";
     let captionHtml = "<caption>"+table_title+"</caption>";

     let weekdays = ["日", "月", "火", "水", "木", "金", "土"];
     let weekdaysStr = "<tr>";
     for ( let i=0; i < 7; i++){
        if(i==0){
          weekdaysStr += "<td>" + weekdays[i] + "</td>";
        }else if(i==6){
          weekdaysStr += "<td>" + weekdays[i] + "</td>";
        }else{
          weekdaysStr += "<td>" + weekdays[i] + "</td>";
        }
     }
     weekdaysStr += "</tr>";


     let htmlStr = "<tr>";
     let startWeekDay = firstDate.getDay();
     for ( let i=0; i < startWeekDay; i++){
        htmlStr += "<td>&nbsp;</td>";
     }

     for(let i=1; i <= lastDate.getDate(); i++){
         let date = new Date(year, month-1, i);
         let weekDay = date.getDay();
         let dateStr = year+"."+month+"."+i;

         let cellStr = date.getDate();
         if(weekDay == 0) htmlStr += "<tr>";
         htmlStr += "<td>";    
         htmlStr += cellStr + "</a></td>";
         if(weekDay == 6) htmlStr += "</tr>\n";
     }

     let lastDayWeek = lastDate.getDay();
     if (lastDayWeek != 6) {
       for ( let i=lastDayWeek+1; i <= 6; i++){
          htmlStr += "<td>&nbsp;</td>";
       }
       htmlStr += "</tr>";
     }
     document.getElementById("calendar").innerHTML = "<table>" + captionHtml + weekdaysStr + htmlStr + "</table>";
   </script>
  
 </body>
</html>

この記事が気に入ったらサポートをしてみませんか？