LogoMark.png

JavaScript/Calendar

Calendar

万年カレンダーのサンプル


サンプルのディレクトリ構成

付記

プログラムの解説

西暦XXXX年XX月のカレンダーは、以下の2つがわかれば作成できます。

このサンプルでは、西暦年と月を<select> から取得し、当該年月のカレンダーを表示しています。以下、JavaScript のソースを上の方から順に概説します。

ページ読み込み後の主たる処理は以上です。

以下、関数です。


参考 Date()オブジェクト

本日の日時情報は、以下のようにして console に表示することができます。

var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
console.log( year + '年' + month + '月' + day + '日');




APPENDIX

万年カレンダーの一般的なアルゴリズム

プログラミング学習では万年カレンダーは定番の課題。既存の関数を使わずに、計算によってそれを表示させるには、以下のようなロジックを利用します。

西暦XXXX年XX月のカレンダーは、以下の2つがわかれば作成できます。

当該月の日数が何日であるかは基本的には決まっているので、1月から12月までの日数を配列に準備し、閏年にあたる場合のみ、2月を29日とすればよい・・ということになります。当該年が閏年かどうかは、以下の判定で得られます。

西暦が 4 で割り切れる年を閏年とする
ただし 100 で割り切れる年は平年とする
ただし 400 で割り切れる年は特別に閏年とする

当該月の1日が何曜日であるかは、「過去の基準日の曜日」と「基準日から当該年月の1日までの総日数」が求まれば、その日数を7で割って曜日を求めることができます。

カレンダーの1行目は、1日の曜日まで「空送り」して、そこから数字をひとつづつ増やしながら、最終日まで表を埋めて完成です。



PAGES

GUIDE

DATA

Last-modified: 2021-06-14 (月) 18:34:06