반응형
Javasciprt와 JQeury를 이용한 달력 만들기입니다.
날짜를 클릭 시 input type="text"에 날짜가 입력되도록 구현하였습니다.
달력을 구현하는 script부분을 제외하곤 나머지 부분은 적절히 수정하여 사용하시기 바랍니다.
HTML
<div class="calendar">
<div class="header">
<button class="calendar_btn" onclick="prevCal();"><</button>
<div class="title"><span class="year"></span><span class="month"></span></div>
<button class="calendar_btn" onclick="nextCal();">></button>
</div>
<div class="day">
<div>S</div>
<div>M</div>
<div>T</div>
<div>W</div>
<div>T</div>
<div>F</div>
<div>S</div>
</div>
<div class="dates"></div>
</div>
<input type="text" id="period_1"> ~ <input type="text" id="period_2">
Javascript & JQuery
<script type="text/javascript">
var CDate = new Date();
var today = new Date();
var selectCk = 0;
var buildcalendar = function(){
var htmlDates = '';
var prevLast = new Date(CDate.getFullYear(), CDate.getMonth(), 0); //지난 달의 마지막 날
var thisFirst = new Date(CDate.getFullYear(), CDate.getMonth(), 1); //이번 달의 첫쨰 날
var thisLast = new Date(CDate.getFullYear(), CDate.getMonth() + 1, 0); //이번 달의 마지막 날
document.querySelector(".year").innerHTML = CDate.getFullYear() + "년"; // year에 년도 출력
document.querySelector(".month").innerHTML = (CDate.getMonth() + 1) + "월"; //month에 월 출력
const dates = [];
if(thisFirst.getDay()!=0){
for(var i = 0; i < thisFirst.getDay(); i++){
dates.unshift(prevLast.getDate()-i); // 지난 달 날짜 채우기
}
}
for(var i = 1; i <= thisLast.getDate(); i++){
dates.push(i); // 이번 달 날짜 채우기
}
for(var i = 1; i <= 13 - thisLast.getDay(); i++){
dates.push(i); // 다음 달 날짜 채우기 (나머지 다 채운 다음 출력할 때 42개만 출력함)
}
for(var i = 0; i < 42; i++){
if(i < thisFirst.getDay()){
htmlDates += '<div class="date last">'+dates[i]+'</div>';
}else if(today.getDate()==dates[i] && today.getMonth()==CDate.getMonth() && today.getFullYear()==CDate.getFullYear()){
htmlDates += '<div id="date_'+dates[i]+'" class="date today" onclick="fn_selectDate('+dates[i]+');">'+dates[i]+'</div>';
}else if(i >= thisFirst.getDay() + thisLast.getDate()){
htmlDates += '<div class="date next">'+dates[i]+'</div>';
}else{
htmlDates += '<div id="date_'+dates[i]+'" class="date" onclick="fn_selectDate('+dates[i]+');">'+dates[i]+'</div>';
}
}
document.querySelector(".dates").innerHTML = htmlDates;
}
function prevCal(){
CDate.setMonth(CDate.getMonth()-1);
buildcalendar();
}
function nextCal(){
CDate.setMonth(CDate.getMonth()+1);
buildcalendar();
}
function fn_selectDate(date){
var year = CDate.getFullYear();
var month = CDate.getMonth() + 1;
var date_txt = "";
if(CDate.getMonth + 1 < 10){
month = "0" + (CDate.getMonth() + 1);
}
if(date < 10){
date_txt = "0" + date;
}
if(selectCk == 0){
$(".date").css("background-color", "");
$(".date").css("color", "");
$("#date_"+date).css("background-color", "red");
$("#date_"+date).css("color", "white");
$("#period_1").val(year+"-"+month+"-"+date);
$("#period_2").val("");
selectCk = date;
}else{
$("#date_"+date).css("background-color", "red");
$("#date_"+date).css("color", "white");
for(var i = selectCk + 1 ; i < date ; i++){
$("#date_"+i).css("background-color", "#FFDDDD");
}
$("#period_2").val(year+"-"+month+"-"+date);
selectCk = 0;
}
}
buildcalendar();
</script>
CSS
.calendar {width: 400px; padding: 5px 20px 20px 20px; box-sizing: border-box; border: 1px solid;}
.calendar > .header {text-align: center;}
.calendar > .header > .title {width:50%; display: inline-block;}
.calendar > .header > .calendar_btn {
width: 30px;
height: 30px;
border: none;
padding: 0;
background-color: #ffffff;
vertical-align: middle;
color: black;
}
.calendar > .day {width:100%; display: table; table-layout: fixed;}
.calendar > .day > div {display: table-cell; text-align: center; height: 50px; vertical-align: middle;}
.calendar > .day > div:first-child {color: red;}
.calendar > .day > div:last-of-type {color: blue;}
.calendar > .dates {display: flex; flex-wrap: wrap; width: 100%;}
.calendar > .dates > .date {text-align: center; width: calc(100%/7); height: 50px; box-sizing: border-box;line-height: 3; border-radius: 3px;}
.calendar > .dates > .date:nth-child(7n){color: blue;}
.calendar > .dates > .date:nth-child(7n+1){color: red;}
.calendar > .dates > .last {color: #c8c8c8 !important;}
.calendar > .dates > .next {color: #c8c8c8 !important;}
반응형
'Programming > Web' 카테고리의 다른 글
[Network] 3-way handshake, 4-way handshake의 개념 및 동작 원리 (0) | 2022.03.13 |
---|---|
세션(Session), 쿠키(Cookie), JWT(JSON Web Token) 의 개념 및 차이점 (0) | 2022.03.12 |
CSS 프로그레스 바(progress bar) (0) | 2021.10.12 |
<button> 버튼 태그가 작동 안될 때 (0) | 2021.10.10 |
CSS 테두리만 있는 말풍선 그리기 (0) | 2021.10.10 |
댓글