そのまま表示

<html>
<meta http-equiv="content-type" charset="utf-8">
<head>
<title>Calendar</title>
</head>
<body>

<script language="JavaScript">
	
	class HogeHoge
	{
		
		MsgOut( ID , MsgStr , BaseColor )
		{
			
			document.write( '<canvas id="Wak_CanvasID' + ID + '" width="50" height="50"></canvas>' );
			
			var Wak_Element = document.getElementById('Wak_CanvasID' + ID);
			var Wak_Context = Wak_Element.getContext('2d');
			
			Wak_Element.style.backgroundColor = BaseColor; // 背景色
			
			Wak_Context.strokeStyle = 'rgb(0,0,0)';  //線の色
			Wak_Context.strokeRect(0, 0, Wak_Element.getBoundingClientRect().width
			                           , Wak_Element.getBoundingClientRect().height);
			Wak_Context.fillStyle = 'rgb(0,0,0)'; // 文字色
			Wak_Context.font = '20px serif';
			Wak_Context.fillText( MsgStr , 0, 20);
			
			// マウスを重ねると色が変わる
			Wak_Element.addEventListener( 'mouseover' , function (event) {
				event.target.style.backgroundColor = 'rgb(127, 255, 127)';
			} , false );
			
			// マウスを外すと色が戻る
			Wak_Element.addEventListener( 'mouseout'  , function (event) {
				event.target.style.backgroundColor = BaseColor;
			} , false );
			
		}
	}
	
	// 今日の日付を取得
	var ToDay     = new Date();
	var TargetDay = new Date(ToDay);
	
	// 今日の先頭日付を取得
	TargetDay.setDate( TargetDay.getDate() - TargetDay.getDay() ); // 0:日曜日 6:土曜日
	
	var HogeObj = [];
	for( IdxY = 1; IdxY <= 30 ; IdxY++ )
	{
		
		document.write( '<canvas id="Wak_CanvasIY' + IdxY + '" width="50" height="50"></canvas>' );
		
		var Wak_Element = document.getElementById('Wak_CanvasIY' + IdxY);
		var Wak_Context = Wak_Element.getContext('2d');
		
		Wak_Element.style.backgroundColor = 'rgb(255,255,255)'; // 背景色
		
		if( TargetDay.getDate() <= 7 )
		{
			Wak_Context.fillStyle = 'rgb(0,0,0)'; // 文字色
			Wak_Context.font = '20px serif';
			Wak_Context.fillText( ( TargetDay.getMonth() + 1 ) + '月' , 0, 20);
		}
		
		for( IdxX = 1; IdxX <= 7 ; IdxX++ )
		{
			
			HogeObj.push( new HogeHoge() );
			HogeObj[HogeObj.length - 1].MsgOut( TargetDay , TargetDay.getDate() , GetDayColor( TargetDay , ToDay ) );
			
			TargetDay.setDate( TargetDay.getDate() + 1 );
		}
		
		document.write( '<br>' );
		
	}
	
	function GetDayColor( WTargetDay , WToDay ){
		
		// 当日の色
		if( WTargetDay.toLocaleDateString()  == WToDay.toLocaleDateString() ){
			return 'rgb(255,255,0)';
		}
		
		// 曜日毎に変更
		switch( WTargetDay.getDay() ){ // 0:日曜日 6:土曜日
		case 0:
		case 6:
			return 'rgb(255,128,128)';
		default:
			return 'rgb(255,255,255)';
		}
	}
	
</script>

</body>
</html>
＜＜　広告　＞＞