団塊爺ちゃんの備忘録

PROGRAMMING

一覧

javascript CSS PHP Java

javascript

CSS

PHP

Java

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

自作カレンダーを作るの4ページです。

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

  自作カレンダーを作る 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. 簡単な使い方

8.プロパティやメソッドの追加（イベントの設定）

イベントは「前月クリック」と「次月クリック」それに「日付クリック」です。
クリックされた日付はプロパティclickDayに入ります。
ここも結構なコード量になってしまいました。

MkenCalendar.prototype.setEvent = function() {
	var self = this;	

	// 前月をクリック
	self.addListener(document.getElementById(self.tagId + 'PrevID'),
		'click', function(){
			self.setNengetsu(-1);
			self.setDays();
			self.setStyle();
	});

	// 次月をクリック
	self.addListener(document.getElementById(self.tagId + 'NextID'),
		'click', function(){
			self.setNengetsu(1);
			self.setDays();
			self.setStyle();
	});

	// 日付をクリック
	var elements = document.getElementsByClassName(self.tagId + "DayCLS");
	for (var i = 0; i < elements.length; i++) {
		this.addListener(elements[i], 'click', 
			function(){
				// クリックした日付をプロパティに格納 -------------
				var dd = this.firstChild.nodeValue;
				// 前月部分クリック
				// classListにPrevMonthCLSがあれば
				if(this.classList.contains(self.tagId + "PrevMonthCLS")) {
					self.currentDay =
							self.prevNenn + self.spliter + self.prevTuki 
							+ self.spliter + dd;
					self.removeDate(self.prevNenn, self.prevTuki, dd);
				}
				// 当月部分クリック
				if(this.classList.contains(self.tagId + "CurrentMonthCLS")) {
					self.currentDay =
							self.nenn + self.spliter + self.tuki 
							+ self.spliter + dd;
				}
				// 次月部分クリック
				if(this.classList.contains(self.tagId + "NextMonthCLS")) {
					self.currentDay =
							self.nextNenn + self.spliter + self.nextTuki 
							+ self.spliter + dd;
					self.removeDate(self.nextNenn, self.nextTuki, dd);
				}
				// --------------------------------------------

				self.setStyle();
			}
		);
	}
};

上記のイベント登録用関数。

MkenCalendar.prototype.addListener = function(elm, ev, listener) {
	if(elm.addEventListener) {		// IE以外
		elm.addEventListener(ev, listener, false);
	} else if(elm.attachEvent) {	// IE
		elm.attachEvent('on' + ev, listener);
	} else {
		throw new Error('イベントリスナーに未対応です。');
	}
};