Skip to content

Instantly share code, notes, and snippets.

@yoshida-mediba

yoshida-mediba/README.md

Last active December 21, 2016 06:23
Show Gist options
  • Save yoshida-mediba/706358e5ffe3a10fd936bc31dc1e91d4 to your computer and use it in GitHub Desktop.
Save yoshida-mediba/706358e5ffe3a10fd936bc31dc1e91d4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

カレンダー

ES6つかってみたかったからかいてみたが、ES6感ってどうやったら出るかよくわかんない。

レギュレーション

ライブラリ使えない

結果

Raw
calender.html
<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();">&lt;</th>
<th colspan="5" id="title"></th>
<th class="button" onclick="calender.next();">&gt;</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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment