kwiki
kwiki

[JavaScript] サンプル

html

<html>
<head> 
<link rel="stylesheet" type="text/css" href="css/my.css" />
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/testCalender.js"></script>
</head>
<body> 
<div id="main" class="current">
	<div id="Calender1" class="calenderContent">
		<div id="labelCalender1">2月</div>
		<div id="testCalender" class="calender">
		</div>
	</div>
	<div id="Calender2" class="calenderContent">
		<div id="labelCalender2">3月</div>
		<div id="testCalender2" class="calender">
		</div>
	</div>
</div>
<div id="modal" class="showModal">
	<div class="modal">
		<input type="text" class="txtbox">
		<input type="submit">
	</div>
</div>
</body>
</html>

js


var FEBRUARY = 1;
var MARCH = 2;

$(function () { 
var testCalender = document.getElementById('testCalender');
var testCalender2 = document.getElementById('testCalender2');


viewBackground(testCalender, 2015, FEBRUARY);
viewBackground(testCalender2, 2015, MARCH);


document.getElementById('labelCalender1').textContent = "February";
document.getElementById('labelCalender2').textContent = "March";
});

function viewBackground(canvas, year, month) { 

drawSquares(0, 0, canvas, "日", 'red');
drawSquares(1, 0, canvas, "月", 'white');
drawSquares(2, 0, canvas, "火", 'white');
drawSquares(3, 0, canvas, "水", 'white');
drawSquares(4, 0, canvas, "木", 'white');
drawSquares(5, 0, canvas, "金", 'white');
drawSquares(6, 0, canvas, "土", 'blue');


var dayData = getDayData(year, month);


for (y = 1; y < 6; y++) {
	for (x = 0; x < 7; x++) {
		var day = (dayData[(y - 1) * 7 + x + 1] != undefined ? dayData[(y - 1) * 7 + x + 1] : "");
		if (x != 0 && x != 6) {
			drawSquares(x, y, canvas, day, 'white');
		} else {
			drawSquares(x, y, canvas, day, 'grey');
		}
	}
}
}

function getDayData(year, month) { 
var targetDate = new Date(year, month, 1);
var MAX_DAY = new Date(year, month + 1, 0).getDate();
var dayData = new Array();
for (i = 0; i <= MAX_DAY; i++) {
	var monthlyDeff = targetDate.getDay();
	var day;
	if (i - monthlyDeff <= 0) {
		day = "";
	} else if (i - monthlyDeff > MAX_DAY) {
		day = "";
	} else {
		day = i - monthlyDeff;
	}
	dayData.push(day);
}
return dayData;
}

function drawSquares(x, y, canvas, message, color) { 
var newCanvas = document.createElement("canvas");
newCanvas.width = 60;
newCanvas.height = 60;
canvas.appendChild(newCanvas);
if (y != 0) {
	newCanvas.addEventListener("mousedown", doMouseDown, false);
}
var ctx = newCanvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = color;
ctx.fillRect(0, 0, 60, 60);
ctx.fillStyle = 'black';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(message, 30, 30);
ctx.fill();
}

function doMouseDown(event) { 
showDialog(getClickedDay(this.offsetLeft - this.parentNode.offsetLeft, this.offsetTop - this.parentNode.offsetTop));
}

function getClickedDay(x, y) { 
var clickedAreaX = Math.ceil(x / 60) + 1;
var clickedAreaY = Math.ceil(y / 60) - 1;
var clickedDay = clickedAreaY * 7 + clickedAreaX
return clickedDay
}

function showDialog(day) { 
alert(day);
}


css

.current { 
overflow: hidden;
}

.calenderContent { 
width:430px;
height:390px;
float:left;
}

.calenderContent:after { 
content: '';
display: block;
clear:both;
}

.calender { 
height:370px;
}

.hiddenModal { 
display:none;
}

.showModal { 
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:1;
background-color:rgba(180,180,180,0.7);
}

.modal { 
position:absolute;
top:10%;
left:40%;
width:300px;
height:500px;
background:#00ffff;
opacity:1.0;
}

.txtbox { 
margin:10px;
}
「[JavaScript] サンプル」をウィキ内検索
最終更新：2015年02月27日 17:32
ツールボックス

下から選んでください:

新しいページを作成する
ヘルプ / FAQ もご覧ください。