[html][JavaScript] 초간단 웹에서 자바 스크립트 달력 만들기/코드 포함

728x90

현재 월 달력이 출력 되는 프로그램

보완 해야할것

테이블 전체 테두리가 안되는것과 마지막일 다음 공란이 안생기는 점이 보안 하고

또한 오늘 날에 표시 되는것과 주말 색 변경등 보완 해야한다

buildCalendar();

</script>

부분을 컨트롤 하는것을 모르겠다

<.HTML>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<!DOCTYPE html>
<!--숙제-->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <style>table { border-collapse: collapse;}  </style>
    <title>달력 만들기</title>
    <script type="text/javascript" >
    var today = new Date();//오늘 날짜
 
 
    function prevClaendar(){//이전 달력
      today = new Date(today.getFullYear(), today.getMonth()-1,today.getDate());
      buildCalendar();
    }
    //다음 달력을 오늘을 저장하고 달력에 뿌려줌
    function nextCalendar(){
      today = new Date(today.getFullYear(), today.getMonth()+1,today.getDate());
      buildCalendar();
 
    }
    function buildCalendar(){
      var nMonth = new Date(today.getFullYear(),today.getMonth(),1);// 이번달의 첫번째날
      var lastDate =new Date(today.getFullYear(),today.getMonth()+1,0);//이번달의 마지막날
      var tblCalendar =document.getElementById("calendar");    //테이블 달력을 만드는 테이블
      var tblCalendarYM =document.getElementById("calendarYM"); ///XXXX년도XX월 출력
      tblCalendarYM.innerHTML = today.getFullYear()+"년"+(today.getMonth()+1)+"월";
 
      //기존에 테이블에 잇던 달력 내용 삭제
      while(tblCalendar.rows.length>2){
        tblCalendar.deleteRow(tblCalendar.rows.length -1);
      }
      var row = null;
      row =tblCalendar.insertRow();
      var cnt =0;
      // 1일이 시작되는 칸을 맞추어줌
 
      for ( i=0; i <nMonth.getDay(); i++) {
        cell =row.insertCell();
        cnt = cnt + 1;
    }
      //달력 출력
      for(i=1; i<=lastDate.getDate(); i++){
        cell =row.insertCell();
        cell.innerHTML = i;
        cnt = cnt + 1;
        if (cnt%7 == 0)    //1주=7일
         row = calendar.insertRow();
 
      }
    }
 
    </script>
  </head>
  <body>
    <table id="calendar"  border="3" align="center" width="800" height="500"  >
      <tr >
        <td align ="center"> <label onclick="prevClaendar()"><</label> </td>
        <td colspan="5" align ="center" id="calendarYM">yyyy년 m월</td>
        <td align ="center"> <label onclick="nextCalendar()">></label> </td>
      </tr>
 
      <tr>
        <td align="center">일</td>
        <td align="center">월</td>
        <td align="center">화</td>
        <td align="center">수</td>
        <td align="center">목</td>
        <td align="center">금</td>
        <td align="center">토</td>
      </tr>
 
    </table>
 
        <!--js에서 만든   buildCalendar(); 함수를 테이불 밑에 붙이면 완성된다
        테이블 전체 테두리가 안되는것과 마지막일 다은 공란이 안생기는 점이 보안
        해야한다-->
        <!-- <script type="text/javascript">
          buildCalendar();
        </script>
        컨트롤 하는것을 모르겠다 -->
        
        <script type="text/javascript" >
 
          buildCalendar();
        </script>
 
 
  </body>
</html>
 
Colored by Color Scripter

cs

<.js>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

var today = new Date();//오늘 날짜
 
 
function prevClaendar(){//이전 달력
  today = new Date(today.getFullYear(), today.getMonth()-1,today.getDate());
  buildCalendar();
}
//다음 달력을 오늘을 저장하고 달력에 뿌려줌
function nextCalendar(){
  today = new Date(today.getFullYear(), today.getMonth()+1,today.getDate());
  buildCalendar();
 
}
function buildCalendar(){
  var nMonth = new Date(today.getFullYear(),today.getMonth(),1);// 이번달의 첫번째날
  var lastDate =new Date(today.getFullYear(),today.getMonth()+1,0);//이번달의 마지막날
  var tblCalendar =document.getElementById("calendar");    //테이블 달력을 만드는 테이블
  var tblCalendarYM =document.getElementById("calendarYM"); ///XXXX년도XX월 출력
  tblCalendarYM.innerHTML = today.getFullYear()+"년"+(today.getMonth()+1)+"월";
 
  //기존에 테이블에 잇던 달력 내용 삭제
  while(tblCalendar.rows.length>2){
    tblCalendar.deleteRow(tblCalendar.rows.length -1);
  }
  var row = null;
  row =tblCalendar.insertRow();
  var cnt =0;
  // 1일이 시작되는 칸을 맞추어줌
 
  for ( i=0; i <nMonth.getDay(); i++) {
    cell =row.insertCell();
    cnt = cnt + 1;
}
  //달력 출력
  for(i=1; i<=lastDate.getDate(); i++){
    cell =row.insertCell();
    cell.innerHTML = i;
    cnt = cnt + 1;
    if (cnt%7 == 0)    //1주=7일
      row = calendar.insertRow();
  }
}
 
Colored by Color Scripter

cs

<출력값>(2018년4월 기준)

※보안 할것

전체 테이블 테두리 /마지막일 다음 칸 만들기/ 일 가운데정렬 및 색 설정

저의 블로그 봐주셔서 감사합니다

재.미.있.게 보셧다면 아래 하트 ❤(공감) 과 댓글 부탁 드려요 .

728x90

저작자표시

'자바스크립트()' 카테고리의 다른 글

[자바스크립트]java scr ipt배열 (Array) js 잘하기 참고 사이트 링크, 코드포함 (0)	2021.04.28
자바스크립트 showImage(이미지변경하기) (0)	2018.04.06
[자바스크립트]documet 이용 배경바꾸기 .JS (0)	2018.04.05