☆HTML☆
カレンダー
カレンダーを作りました。
本日の日付は、緑色で表示されています。
＜＜、＞＞をクリックすると前月、翌月のカレンダーを見ることが出来ます。
Todayを押すと、本日の月のカレンダーに戻ります。
| « |
2021/05 |
» |
| Sun |
Mon |
Tue |
Wed |
Thu |
Fri |
Sat |
| Today |
☆CSS☆
body{
font-family: 'Courier New',monospace;
font-size: 20px;
}
*{
margin:0;
}
header{
text-align: center;
background-color: rgb(255, 253, 113);
font-weight: bold;
font-size: 30px;
padding-top: 15px;
padding-bottom: 15px;
}
section{
padding-left: 30%;
padding-top: 20px;
padding-bottom: 20px;
}
table{
border-collapse: collapse; /*セルの間のスペースを消すことが出来る命令*/
border:2px solid #eee;
margin: 30px auto;
}
thead,tfoot{
background-color:#eee;
}
th,td{
padding: 8px;
text-align: center;
}
tbody td:first-child{
color: red;
}/*first-childはの中の最初の要素に装飾を加えたい時に使用する疑似クラス、last-childは最後の要素*/
tbody td:last-child{
color: blue;
}
tfoot{
font-weight: bold;
}
td.disabled{
opacity:0.3
}
td.today{
font-weight: bold;
color: rgb(48, 255, 7)
}
#prev,#next,#today{
cursor: pointer;
user-select: none;
}
☆JavaScript☆
'use strict'
console.clear();
{
const today = new Date();
let year = today.getFullYear();
let month = today.getMonth();//現在の年、月の取得
//let month = 4; //Javascriptでは月は0が1月となる為、これは5月を表している。
function getCalendarHead() {
const dates = [];
const d = new Date(year, month, 0).getDate();
const n = new Date(year, month, 1).getDay();
//前月の末週を取得するもの。dは先月の末日のオブジェクトの取得、nは今月の1日のオブジェクトが週の何日目かを取得し、カレンダーに前月の末週の日付がいくつ今月のカレンダーに入るかの個数を取得している。
for (let i = 0; i < n; i++) {
dates.unshift({
date: d - i,
isToday: false,
isDisabled: true,
});
}//ループを回すたびに先頭に数値を入れる為、unshiftを使用している({30},{29,30}のような形)
return dates;
}
function getCalendarBody() {
const dates = [];//日付の配列、JavaScriptではdateは日付,dayは曜日を意味するため、ここではdatesが適切
const lastDate = new Date(year, month + 1, 0).getDate();//1日から末日までの日付を入れる。（今月の日付取得の配列）当月の末日の取得方法として、翌月の0日目を指定する事で実行している。
for (let i = 1; i <= lastDate; i++) {
dates.push({
date: i,
isToday: false,
isDisabled: false,
});//どれが今日の日付かを判断するために、dates配列を単純な日付の配列からオブジェクト配列に変えている。
}
if (year === today.getFullYear() && month === today.getMonth()) {
dates[today.getDate() - 1].isToday = true;//現在の日付を取得
}//年月が完全に一致しているところだけ表示を変える為のプログラム、このifが無いと、現在の日にちと同じ日にちは、年月が異なっていても表示が変わってしまう。
return dates;
}
function getCalendarTail() {
const dates = [];
const lastDay = new Date(year, month + 1, 0).getDay();
for (let i = 1; i < 7 - lastDay; i++) {
dates.push({
date: i,
isToday: false,
isDisabled: true,
});
}
return dates;
}//当月のカレンダーに入力される翌月分の日付の取得の関数、やり方は前月分の取得と同じ
function clearCalendar() {
const tbody = document.querySelector('tbody');
while (tbody.firstChild) {
tbody.removeChild(tbody.firstChild);
}
}//月を移動するたびにカレンダーが追加されているのでtbodyをクリアし、その現象を無くしている
function renderTitle() {
const title = `${year}/${String(month + 1).padStart(2, '0')}`;//↑イベントが発生した時年月の表示を合わせるもの。padStartを使って、月が一桁の場合は前に０が入るようにしている。padStart('2'桁で表示,それに満たない場合は'0'の文字列で埋める)という命令である。padStartは文字列のみに適用される為、Stringを使用し、()の中身を文字列に変換している。
document.getElementById('title').textContent = title;
}
function renderWeeks() {
const dates = [
...getCalendarHead(),
...getCalendarBody(),
...getCalendarTail(),
];
const weeks = [];
const weeksCount = dates.length / 7;
for (let i = 0; i < weeksCount; i++) {
weeks.push(dates.splice(0, 7));
}
weeks.forEach(week => {
const tr = document.createElement('tr');
week.forEach(date => {
const td = document.createElement('td');
td.textContent = date.date;
if (date.isToday) {
td.classList.add('today');
}
if (date.isDisabled) {
td.classList.add('disabled');
}
tr.appendChild(td);
});
document.querySelector('tbody').appendChild(tr);
});
}//weeksを使用し、HTMLに描画している。全ての日付を統合する関数、関数の呼び出しの前についている...はスプレッド構文といい、全ての要素を一つの配列の中で展開させるために用いている。（これが無いと配列の中に三つの配列が入ってしまう）
function createCarlendar() {
clearCalendar();
renderTitle();
renderWeeks();
}//全ての日付を統合する関数、関数の呼び出しの前についている...はスプレッド構文といい、全ての要素を一つの配列の中で展開させるために用いている。（これが無いと配列の中に三つの配列が入ってしまう）
document.getElementById('prev').addEventListener('click', () => {
month--;
if (month < 0) {
year--;
month = 11;
}
createCarlendar();
});//前月がクリックされた時の表示
document.getElementById('next').addEventListener('click', () => {
month++;
if (month > 11) {
year++;
month = 0;
}
createCarlendar();
});//翌月がクリックされた時の表示
document.getElementById('today').addEventListener('click', () => {
year = today.getFullYear();
month = today.getMonth();
createCarlendar();
});//todayがクリックされた時に現在の日付に戻る処理
createCarlendar();
} |