JavaScriptを使った、シンプルなカレンダーの作り方

ハル

2017.06.16

おはこんばんにちは、ハルです。

JavaScriptはなんでもできるんだなぁ、と毎日のように感じています。
PHPでカレンダーを作ったことはあったのですが、JavaScriptで作成したことがなかったので、作ってみました。

今回紹介するひな形さえあれば、みなさんの好きなようにカスタマイズできると思います。

※今回、DOMのアクセスとクラス付与程度ですがjQueryを使用しています

サンプル
まとめ

サンプル

今日の日付の文字が赤く表示される、かなりシンプルな月次カレンダーです。

ここまで作ってしまえば、あとはそんなに悩まずに、カスタマイズ（前月・次月のボタンや、数字自体を押せるなど）ができるはずです。なので、シンプル状態のカレンダーのコードを、ここにメモ…紹介したいと思います。

HTML

<h2 class="calendar-title"><span id="js-year"></span>年 <span id="js-month"></span>月</h2>
<table class="calendar-table">
  <thead>
    <tr><th>日</th><th>月</th><th>火</th><th>水</th><th>木</th><th>金</th><th>土</th></tr>
  </thead>
  <tbody id="js-calendar-body"></tbody>
</table>

以下、簡単な説明になりますが、

<h2 class="calendar-title"><span id="js-year"></span>年 <span id="js-month"></span>月</h2>
<table class="calendar-table">

#js-year と #jsmonth に、「年」と「月」があとから JavaScript で挿入されます。

<tbody id="js-calendar-body"></tbody>

#js-calendar-body に、カレンダーの日付部分のテーブルがザーッと挿入されます。

曜日の部分も、JavaScript側で挿入してもいいと思います。

CSS（SCSS）

.calendar-title {
  text-align: center;
}
.calendar-table {
  margin: 0 auto;
  .is-today {
    color: red;
  }
  td {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
  }
}

.is-today {
color: red;
}

.is-todayは、今日の日付を赤くするように JavaScript側でクラスを付与します。

JavaScript

var $window = $(window);
var $year = $('#js-year');
var $month = $('#js-month');
var $tbody = $('#js-calendar-body');

var today = new Date();
var currentYear = today.getFullYear(),
    currentMonth = today.getMonth();

$window.on('load',function(){
  calendarHeading(currentYear, currentMonth);
  calendarBody(currentYear, currentMonth, today);
});

function calendarBody(year, month, today){
  var todayYMFlag = today.getFullYear() === year && today.getMonth() === month ? true : false; // 本日の年と月が表示されるカレンダーと同じか判定
  var startDate = new Date(year, month, 1); // その月の最初の日の情報
  var endDate  = new Date(year, month + 1 , 0); // その月の最後の日の情報
  var startDay = startDate.getDay();// その月の最初の日の曜日を取得
  var endDay = endDate.getDate();// その月の最後の日の曜日を取得
  var textSkip = true; // 日にちを埋める用のフラグ
  var textDate = 1; // 日付(これがカウントアップされます)
  var tableBody =''; // テーブルのHTMLを格納する変数
  
  for (var row = 0; row < 6; row++){
    var tr = '<tr>';
    
    for (var col = 0; col < 7; col++) {
      if (row === 0 && startDay === col){
        textSkip = false;
      }
      if (textDate > endDay) {
        textSkip = true;
      }
      var addClass = todayYMFlag && textDate === today.getDate() ? 'is-today' : '';
      var textTd = textSkip ? ' ' : textDate++;
      var td = '<td class="'+addClass+'">'+textTd+'</td>';
      tr += td;
    }
    tr += '</tr>';
    tableBody += tr;
  }
  $tbody.html(tableBody);
}

function calendarHeading(year, month){
  $year.text(year);
  $month.text(month + 1);
}

var today = new Date();
var currentYear = today.getFullYear(),
    currentMonth = today.getMonth();

Dateインスタンスを生成し、今日の日付を取得します。
ついでに、扱いやすいように、変数に年と月を代入しています。

function calendarBody(year, month, today){

今回のコードで２つの関数があります。
そのうち calendarBodyの方が、日付のテーブルを表示する部分です。

for (var row = 0; row < 6; row++){

最初のfor文でカレンダーの行用のループです。

for (var col = 0; col < 7; col++) {

2つ目のループが、ひとつひとつの日付が入るマス目となる部分です。

if (row === 0 && startDay === col){
        textSkip = false;
      }
      if (textDate > endDay) {
        textSkip = true;
      }

var textTd = textSkip ? ' ' : textDate++;

startDay変数に、その月の最初のマス目の位置を格納しています。endDay変数には月の末日が格納されいています。

それぞれに一致した場合、マスの中が『』で空白を当てはめるようにしています。それ以外は、数字が入ってきます。

var todayYMFlag = today.getFullYear() === year && today.getMonth() === month ? true : false; // 本日の年と月が表示されるカレンダーと同じか判定

var addClass = todayYMFlag && textDate === today.getDate() ? 'is-today' : '';
var textTd = textSkip ? ' ' : textDate++;
var td = '<td class="'+addClass+'">'+textTd+'</td>';

16行目で、まず、カレンダーに表示されるものが本日の日付内のものかを判定しています。このシンプルなカレンダーには、そんなことをする必要はないのですが、前月次月の機能を追加したとき用に用意しています。

16行目で年と月を判定し、35行目で日付を比較しています。一致した場合『.is-today』を付与しています。