Python + CSS + JS로 이쁜 달력만들기
이전에 Dataframe의 Datetime 포맷을 바꾸던중 문듯 생각이 났다,
"기본적으로 Datetime 라이브러리 안에는 한국 날짜에 따른 요일을 가져올 수 있지 않나?"
그러면 달력도 만들 수 있겠네?
[Python] Datetime format change(yyyy-mm-dd)/ Datetime 포맷 바꾸기
Datetime Python은 직관적인 코드를 사용하여 데이터를 원하는 형태로 가공이 가능하다, 그중에서도 Datetime을 사용하여, 특정 날짜를 원하는 형태로 바꾸는 방법이 있다.(How to Change Datetime Format) Genera
mrnoobiest.tistory.com
Python코드로 달력만들어서 공유하기
매년 초가 되면 달력을 판매하는 경우가 많다, 이때 자동으로 달력을 생성해서 판매하면 좋지 않을까?
라는 생각을 했다. 더욱이 한국의 공휴일에 맞게 해당 하는 날짜에 빨간색으로 표시하면 더 좋겠다.
도와줘요 AI
ChatGPT에게 코드 좀 짜달라고 하자.
import calendar
year = int(input("연도를 입력하세요: "))
# 달력 생성
cal = calendar.HTMLCalendar(calendar.SUNDAY) # 일요일부터 시작하도록 설정
cal_str = cal.formatyear(year)
# HTML 코드 작성
html_code = '''
<!DOCTYPE html>
<html>
<head>
<title>2024년 달력</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<style>
.sat, .sun {
color: red;
}
.calendar {
margin-top: 20px;
}
.calendar table {
table-layout: fixed;
width: 100%;
}
.calendar th,
.calendar td {
text-align: center;
padding: 10px;
border: 1px solid #ccc;
}
.calendar .header {
background-color: #f8f9fa;
font-weight: bold;
}
.calendar .saturday {
color: red;
}
.calendar .sunday {
color: red;
}
.calendar .holiday {
color: red;
}
</style>
<body>
<h1 class="text-center">2024년 달력</h1>
<div class="calendar">
'''
html_code+=cal_str
html_code+='''
</div>
</body>
</html>
'''
# HTML 파일로 저장
filename = f"calendar_{year}.html"
with open(filename, "w") as file:
file.write(html_code)
print(f"{filename} 파일이 생성되었습니다.")
좋다, 그런데 달력에는 필수적으로 있어야하는 항목이 있는데 바로 "공휴일"이다.
공휴일을 입력했을때, 해당 날짜의 day를 빨간색으로 색칠하는 JS를 작성해달라고 해보자.
공휴일에는 빨간색으로
['01-01','01-31','02-01','02-02','02-03','03-01','04-10','05-05','05-06','05-15','05-19','06-06','08-15','09-12','09-13','09-14','09-15','09-16','10-03','10-09','12-25'];
이제 해당 날짜 list를 사용해서 class="month"와 동일한 앞자리를 선택하고, 해당 "month"의 일자가 동일한 경우 color:red를 적용해달라고 하자.
<script>
document.addEventListener('DOMContentLoaded', function() {
const specialDays = ['01-01','01-31','02-01','02-02','02-03','03-01','04-10','05-05','05-06','05-15','05-19','06-06','08-15','09-12','09-13','09-14','09-15','09-16','10-03','10-09','12-25'];;
const months = document.querySelectorAll('.month'); // 모든 월을 선택
for (let month of months) {
const monthText = month.textContent.trim(); // 월의 이름을 가져옵니다.
let monthNumber; // 월을 숫자로 변환합니다.
switch (monthText) {
case 'January':
monthNumber = '01';
break;
case 'February':
monthNumber = '02';
break;
case 'March':
monthNumber = '03';
break;
case 'April':
monthNumber = '04';
break;
case 'May':
monthNumber = '05';
break;
case 'June':
monthNumber = '06';
break;
case 'July':
monthNumber = '07';
break;
case 'August':
monthNumber = '08';
break;
case 'September':
monthNumber = '09';
break;
case 'October':
monthNumber = '10';
break;
case 'November':
monthNumber = '11';
break;
case 'December':
monthNumber = '12';
break;
default:
monthNumber = '00'; // Default case, 혹시 몰라서 추가했습니다.
}
// 현재 월에 해당하는 td 태그들 찾기
const days = month.closest('table').querySelectorAll('td');
for (let day of days) {
let dayNumber = day.textContent.trim();
// 날짜가 한 자리 수일 경우 앞에 0을 추가
if (dayNumber.length === 1) {
dayNumber = '0' + dayNumber;
}
// 현재 날짜가 specialDays 배열에 있는지 확인
const dayText = `${monthNumber}-${dayNumber}`;
if (specialDays.includes(dayText)) {
day.style.color = 'red'; // 조건에 맞으면 색상을 빨간색으로 변경
}
}
}
});
</script>
이쁘게 코드를 작성해 주었다, 해당 코드를 포함하여 자동으로 생성하는 Python코드를 작성해보자.
완성코드
import calendar
year = int(input("연도를 입력하세요: "))
# 달력 생성
cal = calendar.HTMLCalendar(calendar.SUNDAY) # 일요일부터 시작하도록 설정
cal_str = cal.formatyear(year)
# HTML 코드 작성
html_code = '''
<!DOCTYPE html>
<html>
<head>
<title>2024년 달력</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<style>
.sat, .sun {
color: red;
}
.calendar {
margin-top: 20px;
}
.calendar table {
table-layout: fixed;
width: 100%;
}
.calendar th,
.calendar td {
text-align: center;
padding: 10px;
border: 1px solid #ccc;
}
.calendar .header {
background-color: #f8f9fa;
font-weight: bold;
}
.calendar .saturday {
color: red;
}
.calendar .sunday {
color: red;
}
.calendar .holiday {
color: red;
}
</style>
<body>
<h1 class="text-center">2024년 달력</h1>
<div class="calendar">
'''
html_code+=cal_str
html_code+='''</div></body>'''
html_code+='''
<script>
document.addEventListener('DOMContentLoaded', function() {
const specialDays = ['01-01','01-31','02-01','02-02','02-03','03-01','04-10','05-05','05-06','05-15','05-19','06-06','08-15','09-12','09-13','09-14','09-15','09-16','10-03','10-09','12-25'];;
const months = document.querySelectorAll('.month'); // 모든 월을 선택
for (let month of months) {
const monthText = month.textContent.trim(); // 월의 이름을 가져옵니다.
let monthNumber; // 월을 숫자로 변환합니다.
switch (monthText) {
case 'January':
monthNumber = '01';
break;
case 'February':
monthNumber = '02';
break;
case 'March':
monthNumber = '03';
break;
case 'April':
monthNumber = '04';
break;
case 'May':
monthNumber = '05';
break;
case 'June':
monthNumber = '06';
break;
case 'July':
monthNumber = '07';
break;
case 'August':
monthNumber = '08';
break;
case 'September':
monthNumber = '09';
break;
case 'October':
monthNumber = '10';
break;
case 'November':
monthNumber = '11';
break;
case 'December':
monthNumber = '12';
break;
default:
monthNumber = '00'; // Default case, 혹시 몰라서 추가했습니다.
}
// 현재 월에 해당하는 td 태그들 찾기
const days = month.closest('table').querySelectorAll('td');
for (let day of days) {
let dayNumber = day.textContent.trim();
// 날짜가 한 자리 수일 경우 앞에 0을 추가
if (dayNumber.length === 1) {
dayNumber = '0' + dayNumber;
}
// 현재 날짜가 specialDays 배열에 있는지 확인
const dayText = `${monthNumber}-${dayNumber}`;
if (specialDays.includes(dayText)) {
day.style.color = 'red'; // 조건에 맞으면 색상을 빨간색으로 변경
}
}
}
});
</script>
'''
html_code+='''
</html>
'''
# HTML 파일로 저장
filename = f"calendar_{year}.html"
with open(filename, "w") as file:
file.write(html_code)
print(f"{filename} 파일이 생성되었습니다.")
결과물
위의 달력은 html이므로 여기에 효과를 더 넣던지 이미지를 배경으로 넣던지, 글자를 가운데 정렬이 아닌 좌측 상단 정렬을 해서 메모할 수 있는 공간을 만들던지,
사용자가 원하는 형태로 개조가 가능하다. 한번 위 코드를 사용해서 자신만의 달력을 만들어보는 것을 추천한다.
끝.
728x90
반응형
