https://www.489.fm/tool/calen_input/calendar.js

1
2/* ---------- 設定領域 start ---------- */
3
4//フォームのname属性を設定
5formNm = "InputForm";
6
7//フォームの年のname属性を設定
8yearNm = "dep_year";
9yearNm1 = "oufuku_dep_y";
10
11//フォームの月のname属性を設定
12monthNm = "dep_month";
13monthNm1 = "oufuku_dep_m";
14
15//フォームの日のname属性を設定
16dateNm = "dep_day";
17dateNm1 = "oufuku_dep_d";
18
19//現在の月から何ヶ月前まで表示
20bfMonNm = 6;
21
22//現在の月から何ヶ月後まで表示
23afMonNm = 6;
24
25//カレンダー用
26nowDate = new Date();
27theYear = nowDate.getFullYear();
28theMonth = nowDate.getMonth();
29theDate = nowDate.getDate();
30
31/* ---------- 設定領域 end ---------- */
32
33
34
35function holidaySet(MM,DD,WEEK,DAY,TTL){
36	holiMM[i] = MM; holiDD[i] = DD; holiWEEK[i] = WEEK; holiDAY[i] = DAY; holiTTL[i++] = TTL;
37}
38
39function showCalen(MM){
40	calenData = createCalen(MM);
41	if(document.getElementById) {
42		document.getElementById('calenArea').innerHTML = calenData;
43	}
44}
45
46function showCalen2(MM){
47	calenData = createCalen2(MM);
48	if(document.getElementById) {
49		document.getElementById('calenArea').innerHTML = calenData;
50	}
51}
52
53function hideCalen(){
54	if(document.getElementById) {
55		document.getElementById('calenArea').innerHTML = '';
56		view = "off";
57	}
58}
59
60function chgForm(YY,MM,DD){
61	this['document'][formNm][yearNm].value = YY;
62	this['document'][formNm][monthNm].value = MM + 1;
63	this['document'][formNm][dateNm].value = DD;
64
65	document.getElementById('calenArea').innerHTML = '';
66
67	//セッションに保存
68	ChangeDate("yy",this['document'][formNm][yearNm].value);
69	ChangeDate("mm",this['document'][formNm][monthNm].value);
70	ChangeDate("dd",this['document'][formNm][dateNm].value);
71	
72	view = "off";
73}
74
75function chgForm2(YY,MM,DD){
76	this['document'][formNm][yearNm1].value = YY;
77	this['document'][formNm][monthNm1].value = MM + 1;
78	this['document'][formNm][dateNm1].value = DD;
79
80	document.getElementById('calenArea').innerHTML = '';
81
82	//セッションに保存
83	ChangeDate("yy",this['document'][formNm][yearNm1].value);
84	ChangeDate("mm",this['document'][formNm][monthNm1].value);
85	ChangeDate("dd",this['document'][formNm][dateNm1].value);
86	
87	view = "off";
88}
89
90view = "off";
91
92function viewCalen(MM){
93	if(view == "off"){
94		dateReset();
95
96		if(this['document'][formNm][yearNm].value != "" && this['document'][formNm][monthNm].value != ""){
97			theYear = this['document'][formNm][yearNm].value;
98			theMonth = this['document'][formNm][monthNm].value - 1;
99		}
100
101		showCalen(theMonth);
102		view = "on";
103	}else{
104		document.getElementById('calenArea').innerHTML = '';
105		view = "off";
106	}
107}
108
109function viewCalen2(MM){
110	if(view == "off"){
111		dateReset();
112
113		if(this['document'][formNm][yearNm1].value != "" && this['document'][formNm][monthNm1].value != ""){
114			theYear = this['document'][formNm][yearNm1].value;
115			theMonth = this['document'][formNm][monthNm1].value - 1;
116		}
117
118		showCalen2(theMonth);
119		view = "on";
120	}else{
121		document.getElementById('calenArea').innerHTML = '';
122		view = "off";
123	}
124}
125
126function dateReset(){
127	//現在の日付を取得
128	nowDate = new Date();
129	theYear = nowDate.getFullYear();
130	theMonth = nowDate.getMonth();
131	theDate = nowDate.getDate();
132	theDay = nowDate.getDay();
133
134	//現在の日付を保持
135	nowMonth = theMonth;
136	nowYear = theYear;
137}
138
139dateReset();
140
141
142//カレンダー表示 最後まで
143function createCalen(MM){
144
145	i = 0;
146	holiMM = new Array;
147	holiDD = new Array;
148	holiWEEK = new Array;
149	holiDAY = new Array;
150	holiTTL = new Array;
151	
152
153	theMonth = MM;
154	
155	if(theMonth >= 12){
156		theYear++;
157		theMonth = 0;
158	} else if(theMonth <= -1){
159		theYear--;
160		theMonth = 11;
161	}
162	
163	
164	//月の日数取得

165	monNum = new Date(theYear, theMonth + 1, 0).getDate();
166	
167	//1日の曜日を取得
168	firstDay = new Date(theYear, theMonth, 1).getDay();
169	
170	//月の週を取得
171	theWeek = Math.ceil((monNum + firstDay) / 7);
172	
173	
174	//祝日を設定
175	holidaySet(1,1,0,0,'元旦');
176	holidaySet(1,0,2,1,'成人の日');
177	holidaySet(2,11,0,0,'建国記念の日');
178	holidaySet(2,23,0,0,'天皇誕生日');
179	
180	if(theYear%4 == 0 || theYear%4 == 1){
181		holidaySet(3,20,0,0,'春分の日');
182	}else{
183		holidaySet(3,21,0,0,'春分の日');
184	}
185	
186	holidaySet(4,29,0,0,'昭和の日');
187	holidaySet(5,3,0,0,'憲法記念日');
188	holidaySet(5,4,0,0,'みどりの日');
189	holidaySet(5,5,0,0,'こどもの日');
190	if(theYear == 2020){
191		holidaySet(8,10,0,0,'山の日');
192		holidaySet(7,23,0,0,'海の日');
193		holidaySet(7,24,0,0,'スポーツの日');
194	}else{
195		holidaySet(8,11,0,0,'山の日');
196		holidaySet(7,0,3,1,'海の日');
197		holidaySet(10,0,2,1,'体育の日');
198	}
199	holidaySet(9,0,3,1,'敬老の日');
200	
201	if(theYear >= 2012 && theYear <= 2044 && theYear%4 == 0){
202		holidaySet(9,22,0,0,'秋分の日');
203	}else{
204		holidaySet(9,23,0,0,'秋分の日');
205	}
206	
207	if(theYear == 2019){
208		holidaySet(10,22,0,0,'即位礼正殿の儀');
209	}
210	holidaySet(11,3,0,0,'文化の日');
211	holidaySet(11,23,0,0,'勤労感謝の日');
212	
213	//祝日の数を取得
214	holiNum = i;
215	
216
217	diffY = (theYear - nowYear) * 12;
218	diffM = theMonth - nowMonth;
219
220	//月前後ボタンの表示非表示
221	if(afMonNm > diffY + diffM){
222		rtBtn = '<a href="javascript:showCalen(theMonth + 1); void(0);">＞</a>';
223	}else{
224		rtBtn = '&nbsp;';
225	}
226
227	if(bfMonNm > - diffY - diffM){
228		ltBtn = '<a href="javascript:showCalen(theMonth - 1); void(0);">＜</a>';
229	}else{
230		ltBtn = '&nbsp;';
231	}
232
233	
234	//カレンダー表示
235	calenData = '';
236	calenData += '<span class="calenPopup">';
237	calenData += '<table class="calTable">';
238	calenData += '<tr>';
239	calenData += '<td class="btn">' + ltBtn + '</td>';
240	calenData += '<td colspan="5" class="mon"><span class="yView">' + theYear + '年</span>&nbsp;' + (theMonth + 1) + '月&nbsp;</td>';
241	calenData += '<td class="btn">' + rtBtn + '</td>';
242	calenData += '</tr>';
243	calenData += '<tr>';
244	calenData += '<th>日</th>';
245	calenData += '<th>月</th>';
246	calenData += '<th>火</th>';
247	calenData += '<th>æ°´</th>';
248	calenData += '<th>木</th>';
249	calenData += '<th>金</th>';
250	calenData += '<th>土</th>';
251	calenData += '</tr>';
252	
253	
254	//重なり順用
255	zNum = 32;
256	
257	dateNum = 0;
258	subHoli = "off"
259	nationHoli = "off";
260	weekSun = 0;
261	weekMon = 0;
262	weekTue = 0;
263	weekWed = 0;
264	weekThu = 0;
265	weekFri = 0;
266	weekSat = 0;
267	weekNum = new Array;
268	for(i=0; i<=6; i++){
269		weekNum[i] = 0;
270	}
271	
272	for(i=0; i<6; i++){
273	
274		calenData += '<tr>';
275	
276		for(j=0; j<7; j++){
277	
278			calenData += '<td';
279	
280			if(i == 0 && j == firstDay){
281				dateNum++;
282			}
283	
284			holiMMDDCk = "off";
285			for(k=0; k<holiNum; k++){
286	
287				holiMMCk = "off";
288				holiDDCk = "off";
289				if((theMonth + 1) == holiMM[k]){
290					holiMMCk = "on";
291				}
292	
293				if(holiMMCk == "on" && dateNum != 0 && holiDD[k] == 0 && holiWEEK[k] - 1 == weekNum[holiDAY[k]] && holiDAY[k] == j){
294					holiDDCk = "on";
295	
296					if(dateNum != 0 && holiMM[k + 1] == holiMM[k] && holiDD[k + 1] == 0 && holiWEEK[k + 1] - 1 == weekNum[holiDAY[k + 1]] && holiDAY[k + 1] == j + 2){
297						nationHoli = "on";
298					}else if(dateNum != 0 && holiMM[k + 1] == holiMM[k] && holiDD[k + 1] == dateNum + 2 && holiWEEK[k + 1] == 0 && holiDAY[k + 1] == 0){
299						nationHoli = "on";
300					}
301	
302				}else if(holiMMCk == "on" && dateNum != 0 && holiDD[k] == dateNum && holiWEEK[k] == 0 && holiDAY[k] == 0){
303					holiDDCk = "on";
304	
305					if(dateNum != 0 && holiMM[k + 1] == holiMM[k] && holiDD[k + 1] == 0 && holiWEEK[k + 1] - 1 == weekNum[holiDAY[k + 1]] && holiDAY[k + 1] == j + 2){
306						nationHoli = "on";
307					}else if(dateNum != 0 && holiMM[k + 1] == holiMM[k] && holiDD[k + 1] == dateNum + 2 && holiWEEK[k + 1] == 0 && holiDAY[k + 1] == 0){
308						nationHoli = "on";
309					}
310	
311				}
312	
313				if(holiMMCk == "on" && holiDDCk == "on"){
314					holiMMDDCk = "on";
315					viewTtl = holiTTL[k];
316				}
317	
318			}
319	
320			if(holiMMDDCk == "on"){
321				if(dateNum == theDate && theMonth == nowDate.getMonth() && theYear == nowDate.getFullYear()){
322					calenData += ' class="sun today" title="' + viewTtl + '"';
323				}else{
324					calenData += ' class="sun" title="' + viewTtl + '"';
325				}
326	
327				if(j == 0){
328					subHoli = "on";
329				}
330	
331			}else if(nationHoli == "on"){
332				if(dateNum == theDate && theMonth == nowDate.getMonth() && theYear == nowDate.getFullYear()){
333					calenData += ' class="sun today" title="国民の休日"';
334				}else{
335					calenData += ' class="sun" title="国民の休日"';
336				}
337	
338				nationHoli = "off";
339		
340			}else if(subHoli == "on"){
341				if(dateNum == theDate && theMonth == nowDate.getMonth() && theYear == nowDate.getFullYear()){
342					calenData += ' class="sun today" title="振替休日"';
343				}else{
344					calenData += ' class="sun" title="振替休日"';
345				}
346	
347				subHoli = "off";
348		
349			}else if(j == 0){
350				if(dateNum == theDate && theMonth == nowDate.getMonth() && theYear == nowDate.getFullYear()){
351					calenData += ' class="sun today"';
352				}else{
353					calenData += ' class="sun"';
354				}
355		
356			}else if(j == 6){
357				if(dateNum == theDate && theMonth == nowDate.getMonth() && theYear == nowDate.getFullYear()){
358					calenData += ' class="sat today"';
359				}else{
360					calenData += ' class="sat"';
361				}
362	
363			}else if(dateNum == theDate && theMonth == nowDate.getMonth() && theYear == nowDate.getFullYear()){
364				calenData += ' class="today"';
365			}
366	

367			calenData += '>';
368	
369	
370			if((i == 0 && j < firstDay) || dateNum > monNum){
371				calenData += '&nbsp;';
372	
373			}else{
374				calenData += '<a href="javascript:chgForm(' + theYear + ',' + theMonth + ',' + dateNum + '); void(0);" class="linkArea">' + dateNum + '</a>';
375				dateNum++;
376	
377				switch(j){
378					case 0: weekNum[0] = ++weekSun; break;
379					case 1: weekNum[1] = ++weekMon; break;
380					case 2: weekNum[2] = ++weekTue; break;
381					case 3: weekNum[3] = ++weekWed; break;
382					case 4: weekNum[4] = ++weekThu; break;
383					case 5: weekNum[5] = ++weekFri; break;
384					case 6: weekNum[6] = ++weekSat; break;
385				}
386			}
387	
388			calenData += '</td>';
389		}
390	
391		calenData += '</tr>';
392	}
393	
394	calenData += '<tr>';
395	calenData += '<td colspan="7" class="close" align = "center"><a href="javascript:hideCalen(); void(0);">×&nbsp;閉じる</a></td>';
396	calenData += '</tr>';
397	calenData += '</table>';
398	calenData += '</span>';
399
400	return calenData;
401}
402
403//カレンダー表示 最後まで
404function createCalen2(MM){
405
406	i = 0;
407	holiMM = new Array;
408	holiDD = new Array;
409	holiWEEK = new Array;
410	holiDAY = new Array;
411	holiTTL = new Array;
412	
413
414	theMonth = MM;
415	
416	if(theMonth >= 12){
417		theYear++;
418		theMonth = 0;
419	} else if(theMonth <= -1){
420		theYear--;
421		theMonth = 11;
422	}
423	
424	
425	//月の日数取得

426	monNum = new Date(theYear, theMonth + 1, 0).getDate();
427	
428	//1日の曜日を取得
429	firstDay = new Date(theYear, theMonth, 1).getDay();
430	
431	//月の週を取得
432	theWeek = Math.ceil((monNum + firstDay) / 7);
433	
434	
435	//祝日を設定
436	holidaySet(1,1,0,0,'元旦');
437	holidaySet(1,0,2,1,'成人の日');
438	holidaySet(2,11,0,0,'建国記念の日');
439	
440	if(theYear%4 == 0 || theYear%4 == 1){
441		holidaySet(3,20,0,0,'春分の日');
442	}else{
443		holidaySet(3,21,0,0,'春分の日');
444	}
445	
446	holidaySet(4,29,0,0,'昭和の日');
447	holidaySet(5,3,0,0,'憲法記念日');
448	holidaySet(5,4,0,0,'みどりの日');
449	holidaySet(5,5,0,0,'こどもの日');
450	holidaySet(7,0,3,1,'海の日');
451	holidaySet(9,0,3,1,'敬老の日');
452	
453	if(theYear >= 2012 && theYear <= 2044 && theYear%4 == 0){
454		holidaySet(9,22,0,0,'秋分の日');
455	}else{
456		holidaySet(9,23,0,0,'秋分の日');
457	}
458	
459	holidaySet(10,0,2,1,'体育の日');
460	holidaySet(11,3,0,0,'文化の日');
461	holidaySet(11,23,0,0,'勤労感謝の日');
462	holidaySet(12,23,0,0,'天皇誕生日');
463	
464	//祝日の数を取得
465	holiNum = i;
466	
467
468	diffY = (theYear - nowYear) * 12;
469	diffM = theMonth - nowMonth;
470
471	//月前後ボタンの表示非表示
472	if(afMonNm > diffY + diffM){
473		rtBtn = '<a href="javascript:showCalen2(theMonth + 1); void(0);">＞</a>';
474	}else{
475		rtBtn = '&nbsp;';
476	}
477
478	if(bfMonNm > - diffY - diffM){
479		ltBtn = '<a href="javascript:showCalen2(theMonth - 1); void(0);">＜</a>';
480	}else{
481		ltBtn = '&nbsp;';
482	}
483
484	
485	//カレンダー表示
486	calenData = '';
487	calenData += '<span class="calenPopup">';
488	calenData += '<table class="calTable">';
489	calenData += '<tr>';
490	calenData += '<td class="btn">' + ltBtn + '</td>';
491	calenData += '<td colspan="5" class="mon"><span class="yView">' + theYear + '年</span>&nbsp;' + (theMonth + 1) + '月&nbsp;</td>';
492	calenData += '<td class="btn">' + rtBtn + '</td>';
493	calenData += '</tr>';
494	calenData += '<tr>';
495	calenData += '<th>日</th>';
496	calenData += '<th>月</th>';
497	calenData += '<th>火</th>';
498	calenData += '<th>æ°´</th>';
499	calenData += '<th>木</th>';
500	calenData += '<th>金</th>';
501	calenData += '<th>土</th>';
502	calenData += '</tr>';
503	
504	
505	//重なり順用
506	zNum = 32;
507	
508	dateNum = 0;
509	subHoli = "off"
510	nationHoli = "off";
511	weekSun = 0;
512	weekMon = 0;
513	weekTue = 0;
514	weekWed = 0;
515	weekThu = 0;
516	weekFri = 0;
517	weekSat = 0;
518	weekNum = new Array;
519	for(i=0; i<=6; i++){
520		weekNum[i] = 0;
521	}
522	
523	for(i=0; i<6; i++){
524	
525		calenData += '<tr>';
526	
527		for(j=0; j<7; j++){
528	
529			calenData += '<td';
530	
531			if(i == 0 && j == firstDay){
532				dateNum++;
533			}
534	
535			holiMMDDCk = "off";
536			for(k=0; k<holiNum; k++){
537	
538				holiMMCk = "off";
539				holiDDCk = "off";
540				if((theMonth + 1) == holiMM[k]){
541					holiMMCk = "on";
542				}
543	
544				if(holiMMCk == "on" && dateNum != 0 && holiDD[k] == 0 && holiWEEK[k] - 1 == weekNum[holiDAY[k]] && holiDAY[k] == j){
545					holiDDCk = "on";
546	
547					if(dateNum != 0 && holiMM[k + 1] == holiMM[k] && holiDD[k + 1] == 0 && holiWEEK[k + 1] - 1 == weekNum[holiDAY[k + 1]] && holiDAY[k + 1] == j + 2){
548						nationHoli = "on";
549					}else if(dateNum != 0 && holiMM[k + 1] == holiMM[k] && holiDD[k + 1] == dateNum + 2 && holiWEEK[k + 1] == 0 && holiDAY[k + 1] == 0){
550						nationHoli = "on";
551					}
552	
553				}else if(holiMMCk == "on" && dateNum != 0 && holiDD[k] == dateNum && holiWEEK[k] == 0 && holiDAY[k] == 0){
554					holiDDCk = "on";
555	
556					if(dateNum != 0 && holiMM[k + 1] == holiMM[k] && holiDD[k + 1] == 0 && holiWEEK[k + 1] - 1 == weekNum[holiDAY[k + 1]] && holiDAY[k + 1] == j + 2){
557						nationHoli = "on";
558					}else if(dateNum != 0 && holiMM[k + 1] == holiMM[k] && holiDD[k + 1] == dateNum + 2 && holiWEEK[k + 1] == 0 && holiDAY[k + 1] == 0){
559						nationHoli = "on";
560					}
561	
562				}
563	
564				if(holiMMCk == "on" && holiDDCk == "on"){
565					holiMMDDCk = "on";
566					viewTtl = holiTTL[k];
567				}
568	
569			}
570	
571			if(holiMMDDCk == "on"){
572				if(dateNum == theDate && theMonth == nowDate.getMonth() && theYear == nowDate.getFullYear()){
573					calenData += ' class="sun today" title="' + viewTtl + '"';
574				}else{
575					calenData += ' class="sun" title="' + viewTtl + '"';
576				}
577	
578				if(j == 0){
579					subHoli = "on";
580				}
581	
582			}else if(nationHoli == "on"){
583				if(dateNum == theDate && theMonth == nowDate.getMonth() && theYear == nowDate.getFullYear()){
584					calenData += ' class="sun today" title="国民の休日"';
585				}else{
586					calenData += ' class="sun" title="国民の休日"';
587				}
588	
589				nationHoli = "off";
590		
591			}else if(subHoli == "on"){
592				if(dateNum == theDate && theMonth == nowDate.getMonth() && theYear == nowDate.getFullYear()){
593					calenData += ' class="sun today" title="振替休日"';
594				}else{
595					calenData += ' class="sun" title="振替休日"';
596				}
597	
598				subHoli = "off";
599		
600			}else if(j == 0){
601				if(dateNum == theDate && theMonth == nowDate.getMonth() && theYear == nowDate.getFullYear()){
602					calenData += ' class="sun today"';
603				}else{
604					calenData += ' class="sun"';
605				}
606		
607			}else if(j == 6){
608				if(dateNum == theDate && theMonth == nowDate.getMonth() && theYear == nowDate.getFullYear()){
609					calenData += ' class="sat today"';
610				}else{
611					calenData += ' class="sat"';
612				}
613	
614			}else if(dateNum == theDate && theMonth == nowDate.getMonth() && theYear == nowDate.getFullYear()){
615				calenData += ' class="today"';
616			}
617	

618			calenData += '>';
619	
620	
621			if((i == 0 && j < firstDay) || dateNum > monNum){
622				calenData += '&nbsp;';
623	
624			}else{
625				calenData += '<a href="javascript:chgForm2(' + theYear + ',' + theMonth + ',' + dateNum + '); void(0);" class="linkArea">' + dateNum + '</a>';
626				dateNum++;
627	
628				switch(j){
629					case 0: weekNum[0] = ++weekSun; break;
630					case 1: weekNum[1] = ++weekMon; break;
631					case 2: weekNum[2] = ++weekTue; break;
632					case 3: weekNum[3] = ++weekWed; break;
633					case 4: weekNum[4] = ++weekThu; break;
634					case 5: weekNum[5] = ++weekFri; break;
635					case 6: weekNum[6] = ++weekSat; break;
636				}
637			}
638	
639			calenData += '</td>';
640		}
641	
642		calenData += '</tr>';
643	}
644	
645	calenData += '<tr>';
646	calenData += '<td colspan="7" class="close" align = "center"><a href="javascript:hideCalen(); void(0);">×&nbsp;閉じる</a></td>';
647	calenData += '</tr>';
648	calenData += '</table>';
649	calenData += '</span>';
650
651	return calenData;
652}
653//最初から