Skip to content

Instantly share code, notes, and snippets.

@Duckuism

Duckuism/thisMonthCalendar-styling.html

Last active January 29, 2020 02:01
Show Gist options
  • Save Duckuism/f322a8e6344feb54407a2cb8255b89cb to your computer and use it in GitHub Desktop.
Save Duckuism/f322a8e6344feb54407a2cb8255b89cb to your computer and use it in GitHub Desktop.
Download ZIP
thisMonthCalendar-styling
Raw
thisMonthCalendar-styling.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Calendar with Vanilla Javascript</title>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
position: relative;
}
#calendar {
height: 99%;
box-sizing: border-box;
padding: 0.5%;
}
.calendar__day {
background-color: #ffdfba;
display: inline-block;
vertical-align: bottom;
width: calc(97% / 7);
height: calc(98% / 5);
box-sizing: border-box;
border-radius: 5px;
padding: 20px;
}
.horizontalGutter {
margin-right: 0.5%;
}
.verticalGutter {
margin-top: 0.5%;
}
.calendar__dayNum {
color: #808080;
}
.calendar__weatherIcon {
width: 30px;
height: 30px;
float: right;
}
.calendar__gen {
clear: both;
height: 100%;
position: relative;
}
.calendar__genValue {
position: absolute;
bottom: 30px;
right: 0;
}
</style>
</head>
<body>
<div id="calendar"></div>
<script>
//https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
const today = new Date();
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
const setCalendarData = (year, month) => {
let calHtml = "";
//getMonth(): Get the month as a number (0-11)
//0부터 시작하므로 현재 달에서 -1한 값이 Date 객체의 현재 달
const setDate = new Date(year, month - 1, 1);
//getDate(): Get the day as a number (1-31)
const firstDay = setDate.getDate();
//getDay(): Get the weekday as a number (0-6)
const firstDayName = setDate.getDay();
//new Date(today.getFullYear(), today.getMonth(), 0); => 지난달 마지막 날
//new Date(today.getFullYear(), today.getMonth(), 1); => 이번달 1일
//+1로 다음 달을 넣고, day에 0을 넣으면 현재 달의 마지막 날짜가 나옴.
const lastDay = new Date(
today.getFullYear(),
today.getMonth() + 1,
0
).getDate();
//현재 달을 넣고, day에 0을 넣으면 이전 달의 마지막 날짜가 나옴.
const prevLastDay = new Date(
today.getFullYear(),
today.getMonth(),
0
).getDate();
let startDayCount = 1;
let lastDayCount = 1;
//1~5주차 -> 5로 해도 상관 없지 않나? 왜 6으로 했을까. 5로 해도 됨.
for (let i = 0; i < 5; i++) {
//일요일~월요일
for (let j = 0; j < 7; j++) {
// i == 0: 1주차일 때
// j == firstDayName: 이번 달 시작 요일일 때
if (i == 0 && j == firstDayName) {
//일요일일 때, 토요일일 때, 나머지 요일 일 때
if (j == 0) {
calHtml +=
"<div class='calendar__day horizontalGutter'><span class='calendar__dayNum'>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'<span>0 </span>kWh</div></div></div>";
} else if (j == 6) {
calHtml +=
"<div class='calendar__day'><span class='calendar__dayNum'>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'<span>0 </span>kWh</div></div></div>";
} else {
calHtml +=
"<div class='calendar__day horizontalGutter'><span class='calendar__dayNum'>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'<span>0 </span>kWh</div></div></div>";
}
// i == 0: 1주차일 때
// j < firstDayName: 이번 달 시작 요일 이전 일 때
} else if (i == 0 && j < firstDayName) {
//일요일일 때, 토요일일 때, 나머지 요일 일 때
if (j == 0) {
calHtml +=
"<div class='calendar__day horizontalGutter'><span class='calendar__dayNum'>" +
(prevLastDay - (firstDayName - 1) + j) +
"</span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'><span>0 </span>kWh</div></div></div>";
} else if (j == 6) {
calHtml +=
"<div class='calendar__day'><span class='calendar__dayNum'>" +
(prevLastDay - (firstDayName - 1) + j) +
"</span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'><span>0 </span>kWh</div></div></div>";
} else {
calHtml +=
"<div class='calendar__day horizontalGutter'><span class='calendar__dayNum'>" +
(prevLastDay - (firstDayName - 1) + j) +
"</span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'><span>0 </span>kWh</div></div></div>";
}
// i == 0: 1주차일 때
// j > firstDayName: 이번 달 시작 요일 이후 일 때
} else if (i == 0 && j > firstDayName) {
//일요일일 때, 토요일일 때, 나머지 요일 일 때
if (j == 0) {
calHtml +=
"<div class='calendar__day horizontalGutter'><span class='calendar__dayNum'>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'><span>0 </span>kWh</div></div></div>";
} else if (j == 6) {
calHtml +=
"<div class='calendar__day'><span class='calendar__dayNum'>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'><span>0 </span>kWh</div></div></div>";
} else {
calHtml +=
"<div class='calendar__day horizontalGutter'><span class='calendar__dayNum'>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'><span>0 </span>kWh</div></div></div>";
}
// startDayCount > lastDay: 이번 달의 마지막 날 이후일 때
} else if (startDayCount > lastDay) {
//일요일일 때, 토요일일 때, 나머지 요일 일 때
if (j == 0) {
calHtml +=
"<div class='calendar__day horizontalGutter verticalGutter'><span class='calendar__dayNum'>" +
lastDayCount++ +
"</span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'><span>0 </span>kWh</div></div></div>";
} else if (j == 6) {
calHtml +=
"<div class='calendar__day verticalGutter'><span class='calendar__dayNum'>" +
lastDayCount++ +
"</span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'><span>0 </span>kWh</div></div></div>";
} else {
calHtml +=
"<div class='calendar__day horizontalGutter verticalGutter'><span class='calendar__dayNum'>" +
lastDayCount++ +
"</span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'><span>0 </span>kWh</div></div></div>";
}
}
// startDayCount <= lastDay: 이번 달의 마지막 날이거나 이전일 때
if (i > 0 && startDayCount <= lastDay) {
//일요일일 때, 토요일일 때, 나머지 요일 일 때
if (j == 0) {
//일요일
calHtml +=
"<div class='calendar__day horizontalGutter verticalGutter'><span class='calendar__dayNum'>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'><span>0 </span>kWh</div></div></div>";
} else if (j == 6) {
//토요일
calHtml +=
"<div class='calendar__day verticalGutter'><span class='calendar__dayNum'>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'><span>0 </span>kWh</div></div></div>";
} else {
//월~금
calHtml +=
"<div class='calendar__day horizontalGutter verticalGutter'><span class='calendar__dayNum'>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span><canvas class='calendar__weatherIcon'></canvas><div class='calendar__gen'><div class='calendar__genValue'><span>0 </span>kWh</div></div></div>";
}
}
}
}
console.log(calHtml);
//캘린더에 내용 붙임
document
.querySelector("#calendar")
.insertAdjacentHTML("beforeend", calHtml);
};
const setFixDayCount = number => {
//캘린더 하루마다 아이디를 만들어주기 위해 사용
let fixNum = "";
if (number <= 10) {
fixNum = "0" + (number - 1);
} else {
fixNum = number - 1;
}
return fixNum;
};
if (today.getMonth() + 1 < 10) {
setCalendarData(today.getFullYear(), "0" + (today.getMonth() + 1));
} else {
setCalendarData(today.getFullYear(), "" + (today.getMonth() + 1));
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment