JavaScriptによるカレンダー

これは何?

JavaScriptで書いた、Webページにカレンダーを表示するプログラムです。

GitHubにも置いてあります。

https://github.com/kmaebashi/calendar

実際に動くものを貼っておきます。以下です。

今の日付

• 最上段の「≪」と「≫」で、月の切り替えができます。
• 任意の日をクリックすると、その日が選択状態になります(背景が黄色になります)。このページでは、初期状態では、現在日が選択状態になっています。
• 任意の日をクリックすると、事前設定したコールバックが呼び出されます。このページでは、そのコールバックに、「日付がクリックされました..」に該当の日付のDateをtoString()したものをalert()で表示する関数を設定しています。
• プログラムによっては、日付をクリックしたときに何かをするのではなく、別のイベントで、現在選択されている日付を取得したい、というケースもあるでしょう。そのためのメソッドも用意してあり、このページでは、「今の日付」ボタンをクリックすると、現在選ばれている日付をtoDate()したものを表示するようにしています。
• 月を切り替えたとき、選択した日は保持されます。たとえば3/10を選択した状態で「≪」をクリックすると、2/10が選択された状態になります。ただし3/31を選択した状態で「≪」をクリックすると、(うるう年でなければ)2/28が選択状態になります。その後「≫」をクリックすると、3/28が選択状態になります。

――Web画面に表示する「カレンダー」というのは、「自力で作れば大した苦労もなく作れるのに、なぜかみんな外部ライブラリを使いたがる」機能の代表格かと思います。まあ、それでもこれだけ簡単に作れるものなので、検索すると「作ってみました」系の記事は結構出てきます。ただ、「作ってみました」系のページにある実装だと、HTMLを文字列で組み立ててinnerHTMLに設定していたり(好みの問題かもしれませんが、ここはDOMを組み立てるべきだと思う)、あまりうまく部品化できていないように感じられるものが多かったりしたので、新たな実装を加えることにもいくらかは価値があるでしょう。

使い方

Calendarクラスとして提供しています。

1. .jsと.cssを取り込みます。

   <script type="text/javascript" src="./calendar.js"></script>
   <link rel="stylesheet" type="text/css" href="calendar.css">
   

2. カレンダーを貼るための要素(たいていはdiv要素でしょう)を必要な場所に貼ります。

   <div id="calendar"></div>
   

3. 貼り付け先の要素と、デフォルトで表示したい日付のDateオブジェクトをコンストラクタの引数にして、Calendarをnewします。

   const elem = document.getElementById("calendar");
   const calendar = new Calendar(elem, new Date());
   

4. 日をクリックしたときに何か処理をしたいのであれば、setDatePickedCallback()メソッドを使用してコールバック関数を設定します。このコールバック関数の引数は、選択した日付を示すDateオブジェクトです。

   calendar.setDatePickedCallback(clicked);
   ...
   function clicked(date) {
     alert("日付がクリックされました.." + date.toString());
   }
   

5. 任意のタイミングで、現在選択されている日付をカレンダーから取得する場合は、getCurrentDate()メソッドを使用します。このメソッドの戻り値はDate型のオブジェクトです。

   const date = calendar.getCurrentDate();
   

実際の例については、このページの末尾に貼ってあるtest.htmlか、このページ自体のHTMLを参照してください。

ソース

calendar.js

class Calendar {
  constructor(targetElement, date) {
    this.targetElement = targetElement;
    this.date = date;
    this.render();
  }

  setDatePickedCallback(callback) {
    this.datePickedCallback = callback;
  }

  getCurrentDate() {
    return this.date;
  }

  render() {
    while (this.targetElement.firstChild ){
      this.targetElement.removeChild(this.targetElement.firstChild);
    }
    const firstYoubi = Calendar.#getFirstYoubi(this.date);
    let nth = 0; // 月の中の何日目かを示す
    let lastNth = Calendar.#getLastNth(this.date);
    let endFlag = false;

    const tableElem = document.createElement("table");
    const headTr = document.createElement("tr");

    const leftArrowTd = document.createElement("td");
    leftArrowTd.innerText = "≪";
    leftArrowTd.classList.add("calendar-left-arrow");
    headTr.appendChild(leftArrowTd);

    const monthTd = document.createElement("td");
    monthTd.colSpan = 5;
    monthTd.innerText = this.date.getFullYear() + "年" + (this.date.getMonth() + 1) + "月";
    monthTd.classList.add("calendar-header-month");
    headTr.appendChild(monthTd);

    const rightArrowTd = document.createElement("td");
    rightArrowTd.innerText = "≫";
    rightArrowTd.classList.add("calendar-right-arrow");
    headTr.appendChild(rightArrowTd);
    tableElem.appendChild(headTr);

    leftArrowTd.onclick = this.leftArrowClicked.bind(this);
    rightArrowTd.onclick = this.rightArrowClicked.bind(this);

    for (;;) {
      const trElem = document.createElement("tr");
      tableElem.appendChild(trElem);
      for (let youbi = 0; youbi < 7; youbi++) {
        const tdElem = document.createElement("td");
        trElem.appendChild(tdElem);

        if (nth == 0 && youbi < firstYoubi) {
          ;
        } else if (nth <= lastNth) {
          if (nth == 0 && youbi == firstYoubi) {
            nth = 1;
          }
          tdElem.innerText = "" + nth;
          tdElem.setAttribute("data-date", nth);
          tdElem.classList.add("calendar-date");
          if (youbi == 0) {
            tdElem.classList.add("calendar-sunday");
          }
          if (youbi == 6) {
            tdElem.classList.add("calendar-saturday");
          }
          if (nth == this.date.getDate()) {
            tdElem.classList.add("calendar-target-date");
          }
          tdElem.onclick = this.dateClicked.bind(this);
          nth++;
          if (nth > lastNth) {
            endFlag = true;
          }
        } else {
          ;
        }
      }
      if (endFlag) {
        break;
      }
    }
    this.targetElement.appendChild(tableElem);
  }

  leftArrowClicked() {
    let newYear = this.date.getFullYear();
    let newMonth;
    let newDate;

    if (this.date.getMonth() == 0) {
      newMonth = 11;
      newYear--;
    } else {
      newMonth = this.date.getMonth() - 1;
    }
    newDate = Calendar.#fixLastDate(newYear, newMonth, this.date.getDate());
    this.date = new Date(newYear, newMonth, newDate);
    this.render();
  }

  rightArrowClicked() {
    let newYear = this.date.getFullYear();
    let newMonth;
    let newDate;

    if (this.date.getMonth() == 11) {
      newMonth = 0;
      newYear++;
    } else {
      newMonth = this.date.getMonth() + 1;
    }
    newDate = Calendar.#fixLastDate(newYear, newMonth, this.date.getDate());
    this.date = new Date(newYear, newMonth, newDate);
    this.render();
  }

  dateClicked(e) {
    const date = e.target.dataset.date;
    this.date.setDate(parseInt(date));
    this.render();
    if (this.datePickedCallback !== undefined && this.datePickedCallback !== null) {
      this.datePickedCallback(this.date);
    }
  }

  static #getLastNth(date) {
    const date2 = new Date(date.getTime());
    date2.setMonth(date.getMonth() + 1, 0);
    return date2.getDate();
  }

  static #getFirstYoubi(date) {
    const date2 = new Date(date.getFullYear(), date.getMonth(), date.getDate());
    date2.setDate(1);
    return date2.getDay();
  }

  static #fixLastDate(newYear, newMonth, oldDate) {
    const tempDate = new Date(newYear, newMonth, 1);
    const lastNth = Calendar.#getLastNth(tempDate);
    let newDate;

    if (oldDate > lastNth) {
      newDate = lastNth;
    } else {
      newDate = oldDate;
    }

    return newDate;
  }
}

解説……というほどのものでもありませんが。

• たとえば「今日は何曜日ですか?」を英語で言えば「What day is today?」ですし、JavaScriptのDateから曜日を取得するメソッドはgetDay()です。なので「曜日」を英語にするならdayでよいのかもしれませんが、たとえば曜日分forループで回す際のループカウンタ(0から6まで回る)をdayにすると、なんだか1日ずつ、30とか31まで回りそうに(私には)見えます。同様に、「月の最初の日は何曜日か?」を示す変数名をfirstDayにすると、「最初の日なら1日に決まっているのでは?」と(私などは)思ってしまいます。といってdayOfTheWeekでは長すぎるので、迷ったあげくyoubiにしてしまいました。
• 逆に月の中の日(1～31とか)をdayにすると曜日と紛らわしいですし、dateでは年月を含む「日付」自体と紛らわしいので、これはnth(n番目の日、の意味)としました。
• 月の最後の日は30だったり31だったり28だったり29だったりしますが、それを取得するメソッドが130行目からの#getLastNth()です。まず、対象のDateを壊さないように複製し(131行目)、それの月を1増やして(翌月にして)、「日」に0日を設定しています(132行目)。各月は1日から始まるので、0日を設定すると前月の最終日になるそうで、これで翌月の前月の最終日、つまり対象日の最終日が取得できます。定番のテクニックらしいですが、どうもバッドノウハウのような……
• このカレンダーでは「≪」と「≫」で月を前後に移動しますが、その処理は89行目からのleftArrowClicked()と105行目からのrightArrowClicked()です。ある日付がDateに入っているとき、月を1か月前にするだけなら、date.setMonth(date.getMonth()-1)のように書くだけで行けそうに見えますが、これだとたとえば5/31を1か月前にしたとき、4/31という日はないので、勝手に5/1にされ、前月になりません。そこでここでは愚直に年月日を算出して新しいDateを作っています。5/31から1か月前に移動すると4/30に丸めますが、その処理もここで行っています。

デザインを規定しているCSSは以下。見た目を変えたければここをいじってください。

calendar.css

td.calendar-left-arrow {
  cursor: pointer;
  text-align: center;
}

td.calendar-header-month {
  text-align: center;
}

td.calendar-right-arrow {
  cursor: pointer;
  text-align: center;
}

td.calendar-date {
  cursor: pointer;
  text-align: center;
}

td.calendar-saturday {
  background-color: #ccccff;
}
td.calendar-sunday {
  background-color: #ffcccc;
}


td.calendar-target-date {
  background-color: #ffffcc;
}

JavaScript側を見てもわかるとおり、このカレンダーの「≪」や「YYYY年M月」や「≫」は、カレンダー本体のテーブル要素の一部です(YYYY年M月部分は、colspanで5列ぶち抜いています)。

テスト用のHTMLであるtest.htmlも一応載せておきます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>カレンダーのテスト</title>
<script type="text/javascript" src="./calendar.js"></script>
<link rel="stylesheet" type="text/css" href="calendar.css">
</head>
<body>
<div id="calendar"></div>
<p><button onclick="currentDate()">今の日付</button><span id="current-date"></span></p>
<script>
function clicked(date) {
  alert("日付がクリックされました.." + date.toString());
}

const elem = document.getElementById("calendar");
const calendar = new Calendar(elem, new Date());
calendar.setDatePickedCallback(clicked);

function currentDate() {
  const date = calendar.getCurrentDate();
  const span = document.getElementById("current-date");
  span.innerText = "今選ばれている日付.." + date.toString();
}
</script>
</body>
</html>

公開日: 2024/03/31

不具合等ありましたら、掲示板にご連絡願います。

ひとつ上のページに戻る