<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>달력</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calendar-container">
<button id="prevMonth" class="nav-button"><</button>
<div class="wrap">
<div class="header">
<select id="yearSelect"></select>
</div>
<div id="year"></div>
<div id="month"></div>
<div class="week">
<div id="monday"></div>
<div id="tuesday"></div>
<div id="wednesday"></div>
<div id="thursday"></div>
<div id="friday"></div>
<div id="saturday"></div>
<div id="sunday"></div>
</div>
</div>
<button id="nextMonth" class="nav-button">></button>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.calendar-container {
display: flex;
align-items: center;
}
.wrap {
width: 300px;
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
text-align: center;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
position: relative;
}
#month {
text-align: center;
margin: 0 10px;
font-size: 30px;
margin-bottom : 20px;
}
#yearSelect {
font-size: 10px;
padding: 5px;
position: absolute;
top: 0;
right: 0;
}
.week {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 5px;
margin-top: 10px;
}
.week div {
width: 40px;
height: 40px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
border: 1px solid #ccc;
box-sizing: border-box;
position: relative;
padding: 5px;
margin-left: -1px;
}
.week div span {
position: absolute;
top: 0px;
left: 0px;
font-size: 12px;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.week .header {
justify-content: center;
align-items: center;
font-weight: normal;
}
/* 현재 날짜 스타일 */
.current-day {
background-color: skyblue;
color: white;
border-radius: 50%;
}
.nav-button {
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.nav-button:hover {
background-color: #0056b3;
}
.nav-button:focus {
outline: none;
}
#prevMonth {
margin-right: 20px;
}
#nextMonth {
margin-left: 20px;
}
document.addEventListener("DOMContentLoaded", function() {
const daysOfWeek = ["일", "월", "화", "수", "목", "금", "토"];
let today = new Date();
let currentYear = today.getFullYear();
let currentMonth = today.getMonth();
const currentDate = today.getDate();
const yearSelect = document.getElementById("yearSelect");
function populateYearSelect(startYear, endYear) {
for (let year = startYear; year <= endYear; year++) {
let option = document.createElement("option");
option.value = year;
option.text = year + "년";
yearSelect.appendChild(option);
}
yearSelect.value = currentYear; // Set the default selected value to current year
}
function renderCalendar(year, month) {
document.getElementById("year").innerText = year + "년";
document.getElementById("month").innerText = (month + 1) + "월";
const firstDay = new Date(year, month, 1).getDay();
const lastDate = new Date(year, month + 1, 0).getDate();
const daysContainer = document.querySelector(".week");
daysContainer.innerHTML = ""; // Clear any existing content
// Create day of week headers
daysOfWeek.forEach(day => {
const dayHeader = document.createElement("div");
dayHeader.innerText = day;
dayHeader.classList.add("header");
daysContainer.appendChild(dayHeader);
});
// Add blank days for the first week
for (let i = 0; i < firstDay; i++) {
const blankDay = document.createElement("div");
daysContainer.appendChild(blankDay);
}
// Add days of the month
for (let date = 1; date <= lastDate; date++) {
const day = document.createElement("div");
const dayNumber = document.createElement("span");
dayNumber.innerText = date;
// 현재 날짜인 경우 스타일 추가
if (year === today.getFullYear() && month === today.getMonth() && date === currentDate) {
dayNumber.classList.add("current-day");
}
day.appendChild(dayNumber);
daysContainer.appendChild(day);
}
}
document.getElementById("prevMonth").addEventListener("click", function() {
if (currentMonth === 0) {
currentMonth = 11;
currentYear--;
} else {
currentMonth--;
}
renderCalendar(currentYear, currentMonth);
});
document.getElementById("nextMonth").addEventListener("click", function() {
if (currentMonth === 11) {
currentMonth = 0;
currentYear++;
} else {
currentMonth++;
}
renderCalendar(currentYear, currentMonth);
});
yearSelect.addEventListener("change", function() {
currentYear = parseInt(yearSelect.value);
renderCalendar(currentYear, currentMonth);
});
populateYearSelect(1900, 2100); // Populate the year dropdown with a range of years
renderCalendar(currentYear, currentMonth);
});
