[js]달력만들기 (Calendar)

GY·2021년 6월 20일
0

Vanilla JS Project

목록 보기
9/19
post-thumbnail

달력만들기 글이 어디론가 사라져버렸다... 그래서 다시 작성한다...
완성하지 못했다. 구성한 테이블에 숫자를 넣는 부분에서 막혔다.
다른 사람들은 어떻게 만들었는지 참고해보려 찾아봤는데, 대부분 제이쿼리를 사용했다. 제이쿼리를 사용하는 개발자는 순수 자바스크립트만으로 구현을 할 줄 알아야하며, 제이쿼리를 안 쓰는 추세이기 때문에 공부할 필요가 없다고 알고 있다. 오히려 제이쿼리를 사용해 코드를 작성하는 버릇을 들이면 처음에 좋지 않을 것 같아서.. 순수 자바스크립트로 구현하는 방법을 찾아보려고 한다. (숫자간의 간격을 조정해 만드는 방법도 있었다)

결과물

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link
      href="https://fonts.googleapis.com/css?family=Pacifico&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" href="/images/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Calendar Project</title>
  </head>

  <body>
    <section>
      <div class="image-box">
        <p style="text-align: center">
          <img
            src="images/vanilla_coding_logo.png"
            style="height: 60px; width: 160px; margin-top: 30px"
          />
        </p>
      </div>
      <h1>Calendar</h1>
      <h2 id="wday">dd</h2>
      <h2 id="wdate">dd</h2>
      <div class="my">
        <h3 id="wmonth"></h3>
        <h3 id="wyear"></h3>
      </div>

      <!-- 달력 Start -->


        <table id="calendar">
              <!-- <thead> -->
            <th>SUN</th>
            <th>MON</th>
            <th>TUE</th>
            <th>WED</th>
            <th>THI</th>
            <th>FRI</th>
            <th>SAT</th>
            <!-- </thead> -->
            <!-- <tbody> -->
            <table id="table1"></table>
            <!-- <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr> -->
            <!-- </tbody> -->
        </div>
        </table>

      </div>
      <!-- 달력 End -->
    </section>

    <script src="index.js"></script>
  </body>
</html>

css

body {
  background-image: url("./images/bg.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Varela Round", sans-serif;
}

h1 {
  font-family: "Pacifico", cursive;
  text-align: center;
  font-size: 72px;
}
h2 {
  font-family: "Varela Round", sans-serif;
  text-align: center;
  font-size: 42px;
}
.my {
  margin: 10px;
  display: flex;
  text-align: center;
  flex: flex-wrap;
  justify-content: center;
}
.calendar {
  display: flex;
  justify-content: center;
}
/* .image-box {
  margin: auto;
} */
/* .wday {
  position: absolute;
  align-content: center;
} */

js

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 irow = table1.insertRow();
//테이블에 행추가
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 == 0) {
      let irow = table1.insertRow(1);
      let icell = irow.insertcell(i);

      irow.icell.textContent = "3";
    } 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];
// }

과정

오늘의 현재 요일 표기

getDay - 생활코딩

필요한 함수를 찾아보니, getDay()가 나온다.

다만 getDay 함수의 결과는 숫자로 출력되는데, 월요일은 1 화요일은 2와 같은 방식이다.

요일로 출력하기 위해서는 추가적인 방법이 필요하다. [MON,TUE,WED...]의 배열을 만들어 숫자를 연결해준다.

다만 getDay 만으로는 바로 오늘의 요일을 끌고 올 수는 없고,

newDate()로 함수가 실행되는 시점의 날짜 및 시간 데이터를 가져온 다음, 거기서 원하는 데이터인 요일만 getDay()로 끌고와 보여주어야 하는 것 같다.

var weekday = new Array(7);
weekday[0] = "MON";
weekday[1] = "TUE";
weekday[2] = "WED";
weekday[3] = "THU";
weekday[4] = "FRI";
weekday[5] = "SAT";
weekday[6] = "SUN";
var X = new Date();//현재 날짜나 시간에 대한 데이터를 받고
var weekday = new Array("MON", "TUE", "WED", "THI", "FRI", "SAT", "SUN");//요일별로 매칭해
var date = X.getDay();//여기서 요일에 대한 데이터를 가져온 다음
var getdate = weekday[date]//오늘의 요일을 출력
document.getElementById("wday").innerHTML = getdate;//wday라는 id의 요소 변경
<h1>Calendar</h1>
      <h1 id="wday">dd</h1>

실행결과화면

![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5c6ae3a8-04eb-4757-a7a1-93b855d01363/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5c6ae3a8-04eb-4757-a7a1-93b855d01363/Untitled.png)

오늘의 현재 날짜 표기

지금까지와 같은 방법으로 하면 될 것 같다

var date = x.getDate();
document.getElementById("wdate").innerHTML = date;

오늘의 현재 월 표기

오늘의 현재 연도 표기

var x = new Date();
var dayname = new Array("SUN", "MON", "TUE", "WED", "THI", "FRI", "SAT");
var day = x.getDay();
var date = x.getDate();
var month = x.getMonth();
var monthname = new Array(
  "JAN",
  "FAB",
  "MAR",
  "APR",
  "MAY",
  "JUN",
  "JUL",
  "AUG",
  "SEP",
  "OCT",
  "NOV",
  "DEC"
);
var getmonth = monthname[month];
var year = x.getFullYear();
var getday = dayname[day];
var getid = document.getElementById;
document.getElementById("wday").innerHTML = getday;
document.getElementById("wdate").innerHTML = date;
document.getElementById("wmonth").innerHTML = getmonth;
document.getElementById("wyear").innerHTML = year;

일,월,화,수,목,금,토 요일 라벨링 표기

이제 본격적으로 달력 형태를 만들어야 하는데, 요일과 각 날짜가 행과 열로 구성되어야 하니, 테이블로 만들면 될 것 같다.

[Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)

<div class="calendar">
        <th>SUN</th>
        <th>MON</th>
        <th>TUE</th>
        <th>WED</th>
        <th>THI</th>
        <th>FRI</th>
        <th>SAT</th>
      </div>
  • 현재 월의 1일이 무슨 요일인지 판별하고, 해당 요일 라벨링에 1일 표기하기

현재 월을 받아왔으니, 이 월의 1일이 무슨요일인지 판별해야 한다. 이건 함수가 있을 것 같다.

[JavaScript/자바스크립트] 특정 날짜에서 무슨 요일인지 구하기

var sdate = dayname[new Date('2021-05-01').getDay()];

현재 월의 마지막 날짜까지 달력에 표기하기

5월의 날짜를 전부 표로 넣어야 한다. 하나하나 과 로 만들어도 되겠지만...좀더 효율적인 방법은 없을까?

//이렇게 하나하나 다 만들 수는 없다..
<table>
          <div class="calendar">
            <th>SUN</th>
            <th>MON</th>
            <th>TUE</th>
            <th>WED</th>
            <th>THI</th>
            <th>FRI</th>
            <th>SAT</th>
          </div>
          <div class="calendardate">
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
          <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
          </tr>
        </div>
        </table>

7개 열, 5개 행을 만든다.

//..이건 안된다.
for (var i=0; i<7; i++) {
              document.write('<td>'+i+'</td>')
          }

//var로 선언해서 그런가..?let으로 해보자
document.write("<table>");
for (let i = 0; i < 5; i++) {
  document.write("<tr>");
  for (let i = 1; i < 8; i++) {
    document.write("<td>");
    document.write(i);
    document.write("</td>");
  }
  document.write("</tr>");
}
document.write("</table>");

//아래에서 도움을 받았다.

1. 자바스크립트를 이용한 자동 테이블 만들기 - 문제

  • 반복문으로 열마다 i+1로 숫자가 커지도록 표시한다.
//월의 첫번째 날이 무슨 요일인지 숫자로 받고
var sdate = [new Date("2021-05-01").getDay()];

//해당 열부터 차례대로 1~31까지 숫자를 채운다.

Dream the impassible Dream! : 네이버 블로그

해당 요일에 1을 표기해야한다.

var wholedate = [];
for (var i = 1; i < 8; i++) {
  if ((i = sdate)) {
    wholedate.push(i);
  }
}
//이런 식으로..새 배열을 만들어서>첫번째날이 무슨 요일인지 숫자로 받은다음>그 숫자와
//일치할 때>해당 배열에 값을 넣으면 안될까?

정 안되면..노가다로 하면 된다. tr과 td 각 행과 열에 id를 부여하고, 해당 행 열에 각각 날짜를 넣으면 될 것 같다. 정 안되면 이렇게 해보고, 나중에 더 효율적인 방법을 찾아보기로 하자.

배열을 만들어 1~31까지를 넣고,

각 배열을 순서대로 각 표 안에 출력하고,

  • 우측 화살표를 클릭 했을때, 다음 달의 요일 및 날짜 표기
  • 좌측 화살표를 클릭 했을때, 이전 달의 요일 및 날짜 표기
  • 특정 날짜를 클릭 했을때, 상단의 요일 및 날짜 반영하기

배운점 정리

[CSS] 이미지 가운데 놓기

이미지(img) 가운데 정렬하는 방법(html/css)

//1번
**<img src="top_logo.jpg" style="**

**margin-left: auto; margin-right: auto; display: block;"/>**

//2번
<p style="text-align: center;">
    <img src="top_logo.jpg"/>
</p>

출처: https://nine01223.tistory.com/147 [스프링연구소(spring-lab)]

가로정렬

margin: 10px;
  display: flex;
  text-align: center;
  flex: flex-wrap;
  justify-content: center;

flex와 함께 쓰려면 justify-content를 쓰는구나..!

document.write 출력문

everdevel

다시 달력 날짜 입력을 해보자!

테이블에 값 넣는 방법: insertcell()

[html/javascript] 동적으로 늘어나는 테이블을 만들어보자.

  • 기존 코드 js

    var x = new Date();
var dayname = new Array("SUN", "MON", "TUE", "WED", "THI", "FRI", "SAT");
var day = x.getDay();
var date = x.getDate();
var month = x.getMonth();
var monthname = new Array(
  "JAN",
  "FAB",
  "MAR",
  "APR",
  "MAY",
  "JUN",
  "JUL",
  "AUG",
  "SEP",
  "OCT",
  "NOV",
  "DEC"
);
var getmonth = monthname[month];
var year = x.getFullYear();
var getday = dayname[day];
var getid = document.getElementById;
document.getElementById("wday").innerHTML = getday;
document.getElementById("wdate").innerHTML = date;
document.getElementById("wmonth").innerHTML = getmonth;
document.getElementById("wyear").innerHTML = year;

// $("calendar")[0].innerText = "dd";
document.write("<table1>");

// for (let i = 0; i < 5; i++) {
//   //   document.write("<tr>");
//   for (let a = 1; a < 8; a++) {
//     document.write(" <td class="ta">");
//     document.write(a);
//     document.write("    </td>");
//   }
//   document.write("<br>");
// }
// document.write("</table>");
// document.getElementById("")
// document.innerHTML()

//이번달 첫째날 구하기
var firstdate = new Date(year,month,1).getDate()
var lastdate = new Date(year,month,1,0).getDate()
//1과0의 의미는??

for (i=1;i<last_date;i++){
    cell=row.insertCell()
    cell.setAttribute('id',[i]);
    cell.innerHTML = [i];
}

//달력에 날짜 넣기
function insertdate{
    calender=document.getElementById("table1")
    row=calendar.insertRow()
    //row를 지정하는 이유는 이후 cell이 추가될 자리를 알려주기 위함
    for(i=0;i<firstdate;i++)
    cell=row.insertCell()
}

// function addRow(table1) {

//     var table = document.getElementById(table1);

//     var rowlen = table1.rows.length;

//     //var row = table.insertRow();		// IE와 Chrome 동작을 달리함.

//     var row = table1.insertRow(rowlen-1);	// HTML에서의 권장 표준 문법

//     row.insertCell(0).innerHTML = "첫번째";

//     row.insertCell(1).innerHTML = "두번째";

//     row.insertCell(2).innerHTML = "세번째";

//     row.insertCell(3).innerHTML = "네번째";

//     row.insertCell(4).innerHTML = "다섯번째";

// }

// var wholedate = [];
// for (var i = 1; i < 8; i++) {
//   if ((i = sdate)) {
//     wholedate.push(i);
//   }
// }
// function add() {
//   var trm = document.createElement("tr"); //tr엘리먼트 생성
//   var td1 = document.createElement("td");
//   var td1 = document.createElement("td");
//   var td1 = document.createElement("td");
//   var td1 = document.createElement("td");
//   var td1 = document.createElement("td");
//   var td1 = document.createElement("td");
//   var td1 = document.createElement("td");

//   //td에 값넣기 위해 innerhtml사용
//   td1.innerHTML = "1";
//   td2.innerHTML = "2";

//   //td를 tr에 삽입해 자식요소가 되도록 함
//   trm.appendChild(td1);
//   trm.appendChild(td2);
//   var table = document.getElementById("calendar");
//   var tbody = table.children[2];
//   tbody.appendChild(tr);
// }
// add();

  • 기존코드html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link
      href="https://fonts.googleapis.com/css?family=Pacifico&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" href="/images/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Calendar Project</title>
  </head>

  <body>
    <section>
      <div class="image-box">
        <p style="text-align: center">
          <img
            src="images/vanilla_coding_logo.png"
            style="height: 60px; width: 160px; margin-top: 30px"
          />
        </p>
      </div>
      <h1>Calendar</h1>
      <h2 id="wday">dd</h2>
      <h2 id="wdate">dd</h2>
      <div class="my">
        <h3 id="wmonth"></h3>
        <h3 id="wyear"></h3>
      </div>

      <!-- 달력 Start -->

        <table id="calendar">
              <!-- <thead> -->
            <th>SUN</th>
            <th>MON</th>
            <th>TUE</th>
            <th>WED</th>
            <th>THI</th>
            <th>FRI</th>
            <th>SAT</th>
            <!-- </thead> -->
            <!-- <tbody> -->
            <table id="table1"></table>
            <!-- <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr> -->
            <!-- </tbody> -->
        </div>
        </table>

      </div>
      <!-- 달력 End -->
    </section>

    <script src="index.js"></script>
  </body>
</html>

  • 기존코드 css

    body {
  background-image: url("./images/bg.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Varela Round", sans-serif;
}

h1 {
  font-family: "Pacifico", cursive;
  text-align: center;
  font-size: 72px;
}
h2 {
  font-family: "Varela Round", sans-serif;
  text-align: center;
  font-size: 42px;
}
.my {
  margin: 10px;
  display: flex;
  text-align: center;
  flex: flex-wrap;
  justify-content: center;
}
.calendar {
  display: flex;
  justify-content: center;
}
/* .image-box {
  margin: auto;
} */
/* .wday {
  position: absolute;
  align-content: center;
} */
profile
GY
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.
이전 포스트

지그재그 클론코딩(4) 배너 슬라이드 만들기

다음 포스트

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

0개의 댓글