Skip to content

Instantly share code, notes, and snippets.

@Duckuism

Duckuism/thisMonthCalendar-getDaysOfThisMonth.html

Last active January 28, 2020 05:26
Show Gist options
  • Save Duckuism/f529609a0114d1104c1d6a62deebc2c3 to your computer and use it in GitHub Desktop.
Save Duckuism/f529609a0114d1104c1d6a62deebc2c3 to your computer and use it in GitHub Desktop.
Download ZIP
thisMonthCalendar-getDaysOfThisMonth
Raw
thisMonthCalendar-getDaysOfThisMonth.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>
</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><span>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span></div>";
} else if (j == 6) {
calHtml +=
"<div><span>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span></div>";
} else {
calHtml +=
"<div><span>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span></div>";
}
// i == 0: 1주차일 때
// j < firstDayName: 이번 달 시작 요일 이전 일 때
} else if (i == 0 && j < firstDayName) {
//일요일일 때, 토요일일 때, 나머지 요일 일 때
if (j == 0) {
calHtml +=
"<div><span>" +
(prevLastDay - (firstDayName - 1) + j) +
"</span><span></span></div>";
} else if (j == 6) {
calHtml +=
"<div><span>" +
(prevLastDay - (firstDayName - 1) + j) +
"</span><span></span></div>";
} else {
calHtml +=
"<div><span>" +
(prevLastDay - (firstDayName - 1) + j) +
"</span><span></span></div>";
}
// i == 0: 1주차일 때
// j > firstDayName: 이번 달 시작 요일 이후 일 때
} else if (i == 0 && j > firstDayName) {
//일요일일 때, 토요일일 때, 나머지 요일 일 때
if (j == 0) {
calHtml +=
"<div><span>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span></div>";
} else if (j == 6) {
calHtml +=
"<div><span>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span></div>";
} else {
calHtml +=
"<div><span>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span></div>";
}
// startDayCount > lastDay: 이번 달의 마지막 날 이후일 때
} else if (startDayCount > lastDay) {
//일요일일 때, 토요일일 때, 나머지 요일 일 때
if (j == 0) {
calHtml +=
"<div><span>" +
lastDayCount++ +
"</span><span></span></div>";
} else if (j == 6) {
calHtml +=
"<div><span>" +
lastDayCount++ +
"</span><span></span></div>";
} else {
calHtml +=
"<div><span>" +
lastDayCount++ +
"</span><span></span></div>";
}
}
// startDayCount <= lastDay: 이번 달의 마지막 날이거나 이전일 때
if (i > 0 && startDayCount <= lastDay) {
//일요일일 때, 토요일일 때, 나머지 요일 일 때
if (j == 0) {
calHtml +=
"<div><span>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span></div>";
} else if (j == 6) {
calHtml +=
"<div><span>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span></div>";
} else {
calHtml +=
"<div><span>" +
startDayCount++ +
"</span><span id='" +
year +
month +
setFixDayCount(startDayCount) +
"'></span></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