ES6つかってみたかったからかいてみたが、ES6感ってどうやったら出るかよくわかんない。
ライブラリ使えない
<html> | |
<head> | |
<title>Calender</title> | |
<style type="text/css"> | |
table, th, td { | |
border-collapse: collapse; | |
border: 1px solid darkorange; | |
margin: 10px; | |
} | |
th { | |
border: 1px solid darkorange; | |
} | |
td { | |
width: 50px; | |
height: 50px; | |
text-align: center; | |
font-size: 25px; | |
} | |
th { | |
height: 25px; | |
color: white; | |
background-color: orange; | |
cursor: default; | |
} | |
.button { | |
cursor: pointer; | |
} | |
.button:hover { | |
color: gray; | |
background-color: white; | |
} | |
</style> | |
<script type="text/javascript"> | |
var calender; | |
var weeklist = new Map([ | |
['Sun', new Map([ | |
['th01', 'Sun'], | |
['th02', 'Mon'], | |
['th03', 'Tue'], | |
['th04', 'Wed'], | |
['th05', 'Tha'], | |
['th06', 'Fri'], | |
['th07', 'Sat'] | |
])], | |
['Mon', new Map([ | |
['th01', 'Mon'], | |
['th02', 'Tue'], | |
['th03', 'Wed'], | |
['th04', 'Tha'], | |
['th05', 'Fri'], | |
['th06', 'Sat'], | |
['th07', 'Sun'] | |
])] | |
]); | |
class Calender { | |
constructor(year, month, week) { | |
this.year = year; | |
this.month = month; | |
this.week = week; | |
this.render(); | |
} | |
prev() { | |
this.month --; | |
if (this.month == 0) { | |
this.year --; | |
this.month = 12; | |
} | |
location.hash = this.year + '/' + this.month; | |
this.render(); | |
} | |
next() { | |
this.month ++; | |
if (this.month == 13) { | |
this.year ++; | |
this.month = 1; | |
} | |
location.hash = this.year + '/' + this.month; | |
this.render(); | |
} | |
set_week(week) { | |
window.sessionStorage.setItem('start', week); | |
this.week = week; | |
this.render(); | |
} | |
render() { | |
// 年月を表示 | |
document.getElementById('title').innerText = this.year + '年' + this.month + '月'; | |
// 今日判定用 | |
let now = new Date(); | |
// 週の始まりの計算 | |
for (let [key, value] of weeklist.get(this.week)) { | |
document.getElementById(key).innerText = value; | |
} | |
let date = new Date(this.year, this.month-1, 1); | |
let day = date.getDay() + 1; | |
if (this.week == 'Mon') { | |
day --; | |
if (day == 0) { | |
day = 7; | |
} | |
} | |
// 一番左上の日付にする | |
date = new Date(date.getTime() - (day * 24 * 60 * 60 * 1000)); | |
// カレンダー埋めていく | |
for (let i=1; i<=6; i++) { | |
for (let j=1; j<=7; j++) { | |
// 6行目表示非表示の切り替え:少々強引 | |
if (i == 6 && (new Date(date.getTime() + (24 * 60 * 60 * 1000))).getMonth()+1 != this.month) { | |
document.getElementById("td"+i+j).style.display = 'none'; | |
} else { | |
document.getElementById("td"+i+j).style.display = 'table-cell'; | |
} | |
} | |
for (let j=1; j<=7; j++) { | |
date = new Date(date.getTime() + (24 * 60 * 60 * 1000)); | |
if (date.getMonth()+1 != this.month) { | |
document.getElementById("td"+i+j).style.backgroundColor = 'silver'; | |
} else if(date.getDay() == 0) { | |
document.getElementById("td"+i+j).style.backgroundColor = 'pink'; | |
} else if(date.getDay() == 6) { | |
document.getElementById("td"+i+j).style.backgroundColor = 'skyblue'; | |
} else { | |
document.getElementById("td"+i+j).style.backgroundColor = 'white'; | |
} | |
// 今日を判定 | |
if (date.getFullYear() == now.getFullYear() && date.getMonth() == now.getMonth() && date.getDate() == now.getDate()) { | |
document.getElementById("td"+i+j).style.color = 'red'; | |
} else { | |
document.getElementById("td"+i+j).style.color = 'black'; | |
} | |
document.getElementById("td"+i+j).innerText = date.getDate(); | |
} | |
} | |
} | |
} | |
function onload() { | |
// ローカルストレージにいれてみた | |
let start = document.getElementById('start'); | |
if (window.sessionStorage.getItem('start')) { | |
for (let option of start) { | |
if (option.value == window.sessionStorage.getItem('start')) { | |
option.selected = true; | |
} | |
} | |
} else { | |
window.sessionStorage.setItem('start', start.options[start.selectedIndex].value); | |
} | |
// ブックマークなどしても移動できるようにURLにしてみた | |
if (location.hash) { | |
year = location.hash.substring(1, 5); | |
month = location.hash.substring(6, 8); | |
} else { | |
year = (new Date()).getFullYear(); | |
month = (new Date()).getMonth() + 1; | |
} | |
// カレンダー起動 | |
calender = new Calender(year, month, window.sessionStorage.getItem('start')); | |
} | |
</script> | |
</head> | |
<body onload="onload();"> | |
<fieldset> | |
<legend>Settings</legend> | |
曜日の始まり: | |
<select id="start" onchange="calender.set_week(this.options[this.selectedIndex].value);"> | |
<option value="Sun" selected>日曜日</option> | |
<option value="Mon">月曜日</option> | |
</select> | |
</fieldset> | |
<table cellpadding="0" cellspacing="0"> | |
<tr> | |
<th class="button" onclick="calender.prev();"><</th> | |
<th colspan="5" id="title"></th> | |
<th class="button" onclick="calender.next();">></th> | |
</tr> | |
<tr> | |
<th id="th01"></th> | |
<th id="th02"></th> | |
<th id="th03"></th> | |
<th id="th04"></th> | |
<th id="th05"></th> | |
<th id="th06"></th> | |
<th id="th07"></th> | |
</tr> | |
<tr> | |
<td id="td11"></td> | |
<td id="td12"></td> | |
<td id="td13"></td> | |
<td id="td14"></td> | |
<td id="td15"></td> | |
<td id="td16"></td> | |
<td id="td17"></td> | |
</tr> | |
<tr> | |
<td id="td21"></td> | |
<td id="td22"></td> | |
<td id="td23"></td> | |
<td id="td24"></td> | |
<td id="td25"></td> | |
<td id="td26"></td> | |
<td id="td27"></td> | |
</tr> | |
<tr> | |
<td id="td31"></td> | |
<td id="td32"></td> | |
<td id="td33"></td> | |
<td id="td34"></td> | |
<td id="td35"></td> | |
<td id="td36"></td> | |
<td id="td37"></td> | |
</tr> | |
<tr> | |
<td id="td41"></td> | |
<td id="td42"></td> | |
<td id="td43"></td> | |
<td id="td44"></td> | |
<td id="td45"></td> | |
<td id="td46"></td> | |
<td id="td47"></td> | |
</tr> | |
<tr> | |
<td id="td51"></td> | |
<td id="td52"></td> | |
<td id="td53"></td> | |
<td id="td54"></td> | |
<td id="td55"></td> | |
<td id="td56"></td> | |
<td id="td57"></td> | |
</tr> | |
<tr> | |
<td id="td61"></td> | |
<td id="td62"></td> | |
<td id="td63"></td> | |
<td id="td64"></td> | |
<td id="td65"></td> | |
<td id="td66"></td> | |
<td id="td67"></td> | |
</tr> | |
</table> | |
</body> | |
</html> |