frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

2017年カレンダーをJavascriptで生成

スポンサードリンク

卓上カレンダーを買うお金がないのでカレンダーをJsで作ってみました。
こちらを参考に作りました。
イヌでもわかるJavaScript講座 - カレンダー
感謝です。

ソースはカレンダーの下に載せています。







html

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

css

#calendar:after {
	clear: both;
	display: block;
	content: "";
}
#calendar table {
	border-collapse: collapse;
	text-align: left;
	line-height: 1.5;
	float: left;
	margin: 10px 10px 0 0;
}
#calendar thead {
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	background: #04162e;
}
#calendar thead th {
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	color: #fff;
}
#calendar tbody th {
	width: 150px;
	padding: 10px;
	font-weight: bold;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	background: #efefef;
}
#calendar td {
	padding: 10px;
	vertical-align: top;
	border-bottom: 1px solid #ccc;
	text-align: center;
}
#calendar .today {
	background: #ccc;
}
#calendar .sat {
	color: blue;
}
#calendar .sun {
	color: red;
}

javascript

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(function(){
'use strict';
var $calendar = $('#calendar');
var myWeekTbl = new Array('月','火','水','木','金','土','日');	// 曜日テーブル定義
var myMonthTbl= new Array(31,28,31,30,31,30,31,31,30,31,30,31);	// 月テーブル定義
var myDate = new Date();
var myToday = myDate.getDate();	// 今日の'日'を退避
var todayMyMonth = myDate.getMonth();	// 月を取得(0月~11月)

function setCalender(l){
myDate = new Date(2017,l);	// 今日の日付データ取得
var myYear = myDate.getFullYear();	// 年を取得
((myYear % 4)===0 && (myYear % 100) !==0) || (myYear % 400)===0 ? myMonthTbl[1] = 29: 28;	// うるう年だったら...
	// 2月を29日とする
var myMonth = myDate.getMonth();	// 月を取得(0月~11月)
myDate.setDate(1);	// 日付を'1日'に変えて、
var myWeek = myDate.getDay() - 1;	// '1日'の曜日を取得
var myTblLine = Math.ceil((myWeek+myMonthTbl[myMonth])/7);	// カレンダーの行数
var myTable = new Array(7*myTblLine);	// 表のセル数を用意
for(var i=0; i<7*myTblLine; i++){
	myTable[i]=' ';	// セルを全て空にする
}
for(i=0; i<myMonthTbl[myMonth]; i++){
myTable[i+myWeek]=i+1;	// 日付を埋め込む
}

var source = '';
var td = '<td>';
var tdC = '</td>';
var tr = '<tr>';
var trC = '</tr>';

for(i=0; i<myTblLine; i++){	// 表の「行」のループ
	source += tr;
	for (var j = 0; j < 7; j++) {
		var mydat = myTable[j+(i*7)];
		if(todayMyMonth === myMonth && mydat === myToday){
			source += '<td class="today">' + mydat + tdC;
		}else if(j === 5){
			source += '<td class="sat">' + mydat + tdC;
		}else if(j === 6){
			source += '<td class="sun">' + mydat + tdC;
		}else{
			source += td + mydat + tdC;
		}
	}
	source += trC;
}
var week = '';
for(var k=0; k<7; k++){	// 曜日
	if(k === 5){
		week += '<td class="sat">' + myWeekTbl[k] + tdC;
	}else if(k === 6){
		week += '<td class="sun">' + myWeekTbl[k] + tdC;
	}else{
		week += td + myWeekTbl[k] + tdC;
	}
}
var weekTr = tr + week + trC;
var tableSource = '<table>' +
	'<tr><td colspan="7">' +
	 myYear + '年' + (myMonth+1) + '月' +
	 '</td></tr>' + weekTr + source + '</table>';

	$calendar.append(tableSource);	// 表の作成開始
}
for(var l=0; l<12; l++){
	setCalender(l);
}

});
</script>