[js] 달력만들기(2) (Calendar)

다른 시도

[](https://blog.daum.net/janustop/65)

[](https://velog.io/@eesiwoo/D23%EA%B3%BC%EC%A0%9C-%EB%8B%AC%EB%A0%A5-%EB%A7%8C%EB%93%A4%EA%B8%B0)

엎고, 다시하기로 결정했다.

테이블에 값넣는 방법을 잘 몰랐는데, insertcell()함수를 찾았다.

그리고 무작정 날짜를 넣는 것보다는, 필요한 날짜를 모두 구한다음 하는게 나을 것 같았다.

var x = new Date();
var dayname = new Array("SUN", "MON", "TUE", "WED", "THI", "FRI", "SAT");
var monthname = new Array(
  "JAN",
  "FAB",
  "MAR",
  "APR",
  "MAY",
  "JUN",
  "JUL",
  "AUG",
  "SEP",
  "OCT",
  "NOV",
  "DEC"
);

//참고 : https://poiemaweb.com/js-date

var day = dayname[x.getDay()];
//getDay함수는 0부터 시작해 요일을 숫자로 나타내므로, dayname배열의 인덱스 값으로 사용해 매칭되는 요일을 출력하도록 한다.
var date = x.getDate();
var month = monthname[x.getMonth()];
//var month = x.getMonth() + 1 :월을 숫자로 표기할 경우, getMonth로 불러올 시 1월은 숫자0으로 출력되므로, +1을 해줘야한다.(1월=0+1,2월=1+!)
//현재는 요일과 같이 monthname배열안의 영어로 월을 표기할 것이기 때문에, getMonth로 얻은 숫자로 나타낸 월값을 인덱스로 넣은다음, 해당 키값을 불러오도록 한다.
//테스트 :
// alert(day + " " + date + " " + month);

//이번 달 첫번째 날짜 구하기
var firstdate = new Date(x.getYear(), x.getMonth(), 1).getDate();
// 현재 날짜의 연,월을 받아온 뒤, 이 정보의 첫번째 값....
var lastdate = new Date(x.getYear(), x.getMonth() + 1, 0).getDate();
//test:
// alert(month + "/" + firstdate + "~" + lastdate);

//이번 달 첫번째 날짜의 요일 구하기
// var firstday = new Date(x.getYear(), x.getMonth(), x.getDay(), 1).getDay();
var firstday = new Date(x.getYear(), x.getMonth() + 1, 0).getDay();
//마지막 인수를 0으로 만들었을 때 5월의 첫째날 요일인 토요일이 출력된다.
//test:
// alert(dayname[firstday]);
//SAT
// alert(firstday);
//6

/*참고: https://www.python2.net/questions-130270.htm
        https://hianna.tistory.com/473
        https://nearman.tistory.com/entry/7-%EB%8F%99%EC%A0%81%ED%85%8C%EC%9D%B4%EB%B8%94-%EB%A7%8C%EB%93%A4%EA%B8%B0-Javascript%EB%A1%9C-%EB%8F%99%EC%A0%81%ED%85%8C%EC%9D%B4%EB%B8%94Dynamic-Table-%EB%A7%8C%EB%93%A4%EA%B8%B0
        http://kaludin.egloos.com/v/2311348
        https://curryyou.tistory.com/206
           */

//테이블에 행과 열을 추가하고, 각각 값을 넣는 방법이 감이 오지 않아서 찾아봤다.

//테이블에 날짜 값 넣기
var datecoll = new Array();
calender = document.getElementById("table1");
row = calendar.insertRow();
for (i = 1; i <= lastdate; i++) {
  datecoll.push(i);
}
//test:
//alert(datecoll);
//새로운 배열을 생성, 이번달 첫번째 날에 해당하는 요일에 1을 넣고,마지막 날짜까지 +1을 반복하며 값을 넣는다.

var table = document.getElementById("table1");
//열을 추가할 테이블 선택
var irow1 = table1.insertRow(0);
var irow2 = table1.insertRow(1);
var irow3 = table1.insertRow(2);
var irow4 = table1.insertRow(3);
var irow5 = table1.insertRow(4);

//테이블에 행추가
var icell = irow.insertCell();
// 추가한 행에 셀 추가

// var irow = table1.insertRow(0);
// var irow2 = table1.insertRow(1);
// var icell = irow.insertCell(0);
// var icell2 = irow2.insertCell(0);
// var icell21 = irow2.insertCell(1);

// icell.textContent = datecoll[0];
// icell2.textContent = "10";
// icell21.textContent = "10";

// for (i=0;i<2;i++){
//     eval("var icell"+i+)
// }

// icell.innerHTML = "4";
// 한 셀에는 입력 가능하나, 연속적으로 값을 넣을 수는 없다.

// 이런식으로 각 셀에 값을 넣을 수 있다. 반복문으로 만들 수 있겠다.
// var icell1 = irow.insertCell(0);
// icell1.textContent = "3";
// var icell1 = irow.insertCell(1);
// icell1.textContent = "3";

for (i = 0; i < lastdate + firstday; i++) {
  //   const irow = table1.insertRow(i % 7);
  //맨 뒤 셀을 추가해야하는 만큼 반복횟수도 증가한다.

  let icell = irow.insertCell(i);
  if (i < firstday) {
    icell.textContent = "*";

    /*5월의 1일은 토요일이고,일월화수목금토일 순으로 숫자로는 6이다.(getday기준)
    6번째 칸부터 날짜가 들어가야한다.따라서 6 이전의 칸은 공란을 입력한다.
    */
  } else {
    if (i == 7) {
      let icell = irow2.insertcell(i);

      irow.icell.textContent = datecoll[i - firstday];
    } else {
      icell.textContent = datecoll[i - firstday];
    }
    //첫번째 날짜가 시작되기 전 5개 칸만큼 밀어 입력했으므로, 해당 칸만큼 맨 뒤 셀을 추가한다.
  }
}

//1~31의 숫자가 한 행에 전부 입력된다.

// table1.insertRow(0).insertCell(0).innerHTML = "3";
// table1.insertRow(0).insertCell(1).innerHTML = "7";

// for (i = 0; i < lastdate; i++) {
//   table1.insertRow(i);
//   for (j = 0; j < 7; j++) {
//     table1.insertCell(j).innerHTML = "1";
//   }
// }
//추가한 셀에 1~31날짜가 담긴 배열 datecoll의 첫번째 요소 추가

//두번째 셀에 datecoll의 두번째 요소 추가

//일단, 1~31까지 (첫번째~마지막 날짜) 전부 테이블에 값을 채워보자.
// for (i = 0; i < lastdate; i++) {

//   icell[0].innerHTML = datecoll[i];
//   icell[1].innerHTML = datecoll[i];
// }

[](https://blog.daum.net/janustop/65)

[](https://velog.io/@eesiwoo/D23%EA%B3%BC%EC%A0%9C-%EB%8B%AC%EB%A0%A5-%EB%A7%8C%EB%93%A4%EA%B8%B0)

차라리...가로로 나열되는 날짜들이 줄바꿈되도록 컨테이너로 감싸고, 여백과 간격을 적당히 조정해 한 행에 날짜 7개만 들어갈 수 있도록 만들면 되지 않을까?