-- 달력 수정중
html
<body>
<table id="calendar" align="center">
<tr>
<td align="center"><label onclick="prevCalendar()"> ◀ </label></td>
<td colspan="5" align="center" id="calendarTitle">yyyy년 m월</td>
<td align="center"><label onclick="nextCalendar()"> ▶ </label></td>
</tr>
<tr>
<td class="weeks" id="sun" align="center">일</td>
<td class="weeks" align="center">월</td>
<td class="weeks" align="center">화</td>
<td class="weeks" align="center">수</td>
<td class="weeks" align="center">목</td>
<td class="weeks" align="center">금</td>
<td class="weeks" id ="sat" align="center">토</td>
</tr>
</table>
<input type="text" id="startDate" value="">
<input type="text" id="endDate" value="">
</body>
스크립트
<script type="text/javascript">
$(function(){
buildCalendar();
$(".days").mouseover(function(){
$(".days").css('cursor', 'pointer');
});
});
var today = new Date(); // 오늘 날짜
function buildCalendar(){
var row = null;
var cnt = 0;
var clickedMonth = "";
var calendarTable = document.getElementById("calendar");
var calendarTableTitle = document.getElementById("calendarTitle"); // calendarTabletTitle : 년, 월
calendarTableTitle.innerHTML = today.getFullYear()+"년 "+(today.getMonth()+1)+"월";
var firstDate = new Date(today.getFullYear(), today.getMonth(), 1);
var lastDate = new Date(today.getFullYear(), today.getMonth()+1, 0);
// 초기화
while(calendarTable.rows.length > 2){
calendarTable.deleteRow(calendarTable.rows.length -1);
}
row = calendarTable.insertRow();
console.log(firstDate.getDay()); // 달력의 첫 날
console.log(lastDate); // 달력의 마지막 날
for(i = 0; i < firstDate.getDay(); i++){
cell = row.insertCell();
cnt += 1;
}
for(i = 1; i <= lastDate.getDate(); i++){
cell = row.insertCell();
cnt += 1;
cell.setAttribute('id', i);
cell.setAttribute('class', 'days');
cell.innerHTML = i;
cell.align = "center";
cell.onclick = function(){
clickedYear = today.getFullYear();
clickedMonth = ( 1 + today.getMonth() );
clickedDate = this.getAttribute('id');
clickedDate = clickedDate >= 10 ? clickedDate : '0' + clickedDate;
clickedMonth = clickedMonth >= 10 ? clickedMonth : '0' + clickedMonth;
clickedYMD = clickedYear + "-" + clickedMonth + "-" + clickedDate;
if ($("#startDate").val() == "" && $("#endDate").val() == "" ){
$("#startDate").val(clickedYMD);
}else if($("#startDate").val() != "" && $("#endDate").val() == ""){
$("#endDate").val(clickedYMD);
}else if($("#startDate").val() != "" && $("#endDate").val() != ""){
$("#startDate").val(clickedYMD);
$("#endDate").val("");
}
/*
let startDate ;
let endDate ;
if(startDate == "" && endDate == ""){
startDate = this;
}else if(startDate != "" && endDate == ""){
endDate = this;
}else if(startDate != "" && endDate != ""){
startDate = "";
endDate = "";
startDate = this;
}
if(startDate.classList.contains('start-date')){
startDate.classList.remove('start-date');
}else{
startDate.classList.add('start-date');
}
if(endDate.classList.contains('end-date')){
endDate.classList.remove('end-date');
}else{
endDate.classList.add('end-date');
}
console.log("시작 : " + startDate + " / 끝 :" + endDate); */
/* if($("#startDate").val() != "" && $("#endDate").val() == ""){
// 시작날짜 있음 끝날짜 없음 = 끝날짜만 설정
$("#endDate").val(clickedYMD);
endDate.classList.remove('end-date');
endDate = null;
endDate = this;
this.classList.add('end-date');
}else if($("#startDate").val() != "" && $("#endDate").val() != ""){
$("#startDate").val(clickedYMD);
$("#endDate").val("");
endDate.classList.remove('end-date');
startDate.classList.remove('start-date');
this.classList.add('start-date');
startDate = null;
startDate = this;
}else{
$("#startDate").val(clickedYMD);
$("#endDate").val("");
this.classList.add('start-date');
startDate = this;
} */
}
if (cnt % 7 == 1) {
cell.innerHTML = "<font color=#F79DC2>" + i + "</font>";
}
if (cnt % 7 == 0){
cell.innerHTML = "<font color=skyblue>" + i + "</font>";
row = calendar.insertRow();
}
}
if(cnt % 7 != 0){
for(i = 0; i < 7 - (cnt % 7); i++){
cell = row.insertCell();
}
}
let blockDays = ['2022-10-23','2022-10-24'];
for(i = 0; i < blockDays.length; i++){
let blockMonth = blockDays[i].substr(5,2);
if(blockMonth == (firstDate.getMonth()+1)){
for(i = 0; i < blockDays.length; i++){
let block = blockDays[i].substr(8,2);
cell = document.getElementById(block);
cell.style.backgroundColor = "#E0E0E0";
cell.style.color = '#C6C6C6';
cell.onclick = function(){};
}
}
}
}
function prevCalendar(){
today = new Date(today.getFullYear(), today.getMonth()-1, today.getDate());
buildCalendar();
}
function nextCalendar(){
today = new Date(today.getFullYear(), today.getMonth()+1, today.getDate());
buildCalendar();
}
</script>