(adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-8242763509535969", enable_page_level_ads: true }); [자바스크립트] 만년달력 / 달력 :: 깜냥깜냥
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
92
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>10000Calendar</title>
<style type="text/css">
.satu {
    color: skyblue;
}
 
.sund {
    color: #F79DC2;
}
</style>
<script language="javascript">
    var today = new Date(); // 오늘 날짜
    var date = new Date();
 
    function prevCalendar() {
        // 이전 달을 today에 값을 저장하고 달력을 뿌려줍니다.
        today = new Date(today.getFullYear(), today.getMonth() - 1, today
                .getDate());
        buildCalendar();
    }
    function nextCalendar() {
        // 다음 달을 today에 값을 저장하고 달력을 뿌려줍니다.
        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"); // yyyy년 m월 출력할 곳
        tblCalendarYM.innerHTML = today.getFullYear() + "년 "
                + (today.getMonth() + 1) + "월"; // yyyy년 m월 출력
        // 기존 테이블에 뿌려진 줄, 칸 삭제
        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++) { // 1일부터 마지막 일까지
            cell = row.insertCell();
            cell.innerHTML = i;
            cnt = cnt + 1;
            if (cnt % 7 == 1) {//일요일 계산
                cell.innerHTML = "<font color=#F79DC2>" + i//일요일에 색
            }
            if (cnt % 7 == 0) { // 1주일이 7일 이므로 토요일 계산
                cell.innerHTML = "<font color=skyblue>" + i//토요일에 색
                row = calendar.insertRow();// 줄 추가
            }
            if (today.getFullYear() == date.getFullYear()
                    && today.getMonth() == date.getMonth()
                    && i == date.getDate()) {
                cell.bgColor = "#FAF58C";
            }
        }
 
    }
</script>
</head>
<body onload="buildCalendar();">
    <table align="center" id="calendar" boarder="3">
        <tr>
            <td><label onclick="prevCalendar()"><</label></td>
            <td colspan="5" align="center" id="calendarYM">yyyy년 m월</td>
            <td><label onclick="nextCalendar()">></label></td>
        </tr>
        <tr>
            <td align="center" class="sund">Sun</td>
            <td align="center">Mon</td>
            <td align="center">Tue</td>
            <td align="center">Wed</td>
            <td align="center">Thu</td>
            <td align="center">Fri</td>
            <td align="center" class="satu">Sat</td>
        </tr>
    </table>
</body>
</html>



출력을 하게 되면 이렇게 되겠죠! 

 


저작자표시 비영리

'code > 웹' 카테고리의 다른 글

[HTML] HTML 색상표  (0) 2017.04.20
[자바스크립트] 계산기  (0) 2017.04.20
[자바스크립트]유효성 검사를 한 회원가입 페이지  (0) 2017.04.20
[자바스크립트] inner class 이용해서 미리보기  (0) 2017.04.20
[자바스크립트] 폰트 설정해주기!  (0) 2017.04.20

+ Recent posts

티스토리툴바