団塊爺ちゃんの備忘録

PROGRAMMING

一覧

javascript CSS PHP Java

javascript

CSS

PHP

Java

自作カレンダーを作る 1/6

祝休日対応のカレンダーを以前作りましたが、空白部分に前月や翌月の日付が入っていると便利だなあと思い挑戦してみました。
前月や翌月のイベントの設定が面倒かなと思いましたが、HTML5になってDOMでclassListなる便利なものが使えるようになり意外とすんなりできました。
ソースが長いので6分割でご紹介します。

MkenCalendarのダウンロード(mkenCalendar.js + mkenCalendar-min.js)
mkenCalendar.zip

-----2018.11.15（修正）-----
皇太子殿下の即位に関しての祝日(2019/5/1, 2019/10/22)休日(2019/4/30, 2019/5/2)追加。
それと2020年東京オリンピック時の祝日変更(海の日、スポーツの日、山の日)に対応しました。
-----2018.02.05（修正）-----
平成天皇ご退位にあたり天皇誕生日が2018年まで12月23日、2020年から2月23日に変更となったため修正しました。
-----2017.05.12（修正）-----
前月・翌月の日付をクリックした場合、その月に移動せず当月のままだったのを該当月に移動するように修正しました。
-----2016.03.25（削除・修正）-----
クリックした日付の前のエレメント保持用プロパティclickDayBeforElmは不要だったので、これに関したコードを削除しました。
-----2016.03.21（削除・修正）-----
今日を取得するメソッドは必要性が小さいので削除し、コンストラクタで対処しました。
-----2016.03.17（修正）-----
遠く離れた日付に移動できるように日付移動用のメソッドremoveDate()を新設しました。
-----2016.03.15（修正）-----
年月日のスプリッタ（区切り文字）変更用のメソッドsetSpliter()を新設しました。
-----2016.03.01（修正）-----
日付データの取得用としてgetCurrentDay()メソッドを新設し、それに伴って若干の修正をしました。
-----2016.02.14（修正）-----
祝日「山の日」が増えたのでそれに対応するために修正しています。
-----2015.10.26（修正）-----
クリックした日付が分かるように、クリックした場合はその日付の背景色を変更するようにしました。
そのためプロパティとイベントのコードを追加・修正しています。

  自作カレンダーを作る 1/6   01. まずはカレンダーの基を準備 02. 各月の日数や年月日の区切り文字 03. 前月・次月指定時の処理 04. カレンダーの前月・次月部分の日付の年月を算出
  自作カレンダーを作る 2/6   05. カレンダーのマスのみ作成 06. 各マスへ年月・日付を埋め込み
  自作カレンダーを作る 3/6   07. スタイルの設定
  自作カレンダーを作る 4/6   08. イベントの設定
  自作カレンダーを作る 5/6   09. 祝休日の判定 10. 閏年の判定
  自作カレンダーを作る 6/6   11. 選択されている日付を得るメソッド 12. スプリッタを変更するためのメソッド 13. カレンダーを表示するメソッド 14. 指定した日付にジャンプするメソッド 15. 簡単な使い方

1.まずはカレンダーの基を準備

まず最初にカレンダーの基になる関数MkenCalendarを作りました。
カレンダーオープン時の年月日や年月日が見やすいように、年月日の区切り文字もセットしておきました。

var MkenCalendar = function(tagId){
	var today = new Date();
	// 今日の年月日
	this.todayYear = today.getFullYear();
	this.todayMonth = today.getMonth() + 1;
	this.todayDate = today.getDate();

	//	プロパティnenn.tukiは次月・前月クリックで変化する値
	// カレンダーの年
	this.nenn = this.todayYear;
	// カレンダーの月
	this.tuki = this.todayMonth;
	// カレンダーの日
	this.nichi = this.todayDate;
	
	// 年月日の区切り文字
	this.spliter = "_";
	// 現在選択されている日付
	this.currentDay = 
			  this.nenn + this.spliter + this.tuki + this.spliter + this.nichi;
	
	this.tagId = tagId;
};

プロパティnennとtukiにページオープン時の年月をセットします。
関数の引数tagIdは、このカレンダーを表示したい部分のタグのIDセレクタ名でインスタンス生成時に指定します。

2.プロパティやメソッドの追加（各月の日数や年月日の区切り文字）

プロトタイプで関数MkenCalendarに各月の日数を追加します。２月の閏月の日数の変更は別のメソッドで行います。

// 各月の日数
MkenCalendar.prototype.monthDays =
	new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
// 表示されている月の前月の年
MkenCalendar.prototype.prevNenn;
// 表示されている月の次月の年
MkenCalendar.prototype.nextNenn;
// 表示されている月の前月
MkenCalendar.prototype.prevTuki;
// 表示されている月の次月
MkenCalendar.prototype.nextTuki;

3.プロパティやメソッドの追加（前月・次月指定時の処理）

カレンダー前月や次月をクリックした時の年月を得るためのメソッドを追加します。

MkenCalendar.prototype.setNengetsu = function(dore) {
	// 次月
	if(dore === 1){
		// ひと月ﾌﾟﾗｽする
		this.tuki++;
	}
	// 前月
	if(dore === -1){
		// ひと月ﾏｲﾅｽする
		 this.tuki--;
	}
	// 結果（月）が13ならば
	if(this.tuki === 13){
		// 年を一年ﾌﾟﾗｽして
		this.nenn++;
		// 月を一月に
		this.tuki = 1;
	}
	// 結果（月）が0になったら
	if(this.tuki === 0){
		// 年を一年ﾏｲﾅｽして
		this.nenn--;
		// 月を12月に
		this.tuki = 12;
	}
	// 閏年の場合
	if(this.isLeapYear(this.nenn))
		// ２月を２９日に
		this.monthDays[1] = 29;
	else
		// その他は２８日に
		this.monthDays[1] = 28;
};

4.プロパティやメソッドの追加（カレンダーの前月・次月部分の日付の年月を算出）

カレンダーの前月・次月部分の日付の年月を算出用のメソッドです。

MkenCalendar.prototype.setPrevNext = function() {
	if(this.tuki === 1){
		this.prevNenn = this.nenn - 1;
		this.prevTuki = 12;
	}else{
		this.prevNenn = this.nenn;
		this.prevTuki = this.tuki - 1;
	}
	if(this.tuki === 12){
		this.nextNenn = this.nenn + 1;
		this.nextTuki = 1;
	}else{
		this.nextNenn = this.nenn;
		this.nextTuki = this.tuki + 1;
	}
};