java script

오늘 날짜가 하이라이트 되는 달력

디자인인스 2011. 1. 7. 12:02
// 이 스크립트는 자바스크립트의 Date() 함수를 이용하여 달력을 만들어보는 스크립트 입니다
// 아래의 소스코드를 <HEAD>와 </HEAD> 사이에 붙여 넣으세요

<script>
<!--
setCal()

function getTime() { // 현재시간 추출
        var now = new Date()
        var hour = now.getHours()
        var minute = now.getMinutes()
        now = null
        var ampm = ""

        if (hour >= 12) {
        hour -= 12
        ampm = "PM"
        } else
        ampm = "AM"
        hour = (hour == 0) ? 12 : hour

        if (minute < 10)
        minute = "0" + minute
        return hour + ":" + minute + " " + ampm
}

function leapYear(year) { // 년도 추출
        if (year % 4 == 0)
        return true
        return false
}

function getDays(month, year) { //날짜 추출
        var ar = new Array(12)
        ar[0] = 31
        ar[1] = (leapYear(year)) ? 29 : 28
        ar[2] = 31
        ar[3] = 30
        ar[4] = 31
        ar[5] = 30
        ar[6] = 31
        ar[7] = 31
        ar[8] = 30
        ar[9] = 31
        ar[10] = 30
        ar[11] = 31

        return ar[month]
}

function getMonthName(month) { // 월 추출
        var ar = new Array(12)
        ar[0] = "1월"
        ar[1] = "2월"
        ar[2] = "3월"
        ar[3] = "4월"
        ar[4] = "5월"
        ar[5] = "6월"
        ar[6] = "7월"
        ar[7] = "8월"
        ar[8] = "9월"
        ar[9] = "10월"
        ar[10] = "11월"
        ar[11] = "12월"

        return ar[month]
}

function setCal() {
        var now = new Date()
        var year = now.getYear()
        var month = now.getMonth()
        var monthName = getMonthName(month)
        var date = now.getDate()
        now = null

        var firstDayInstance = new Date(year, month, 1)
        var firstDay = firstDayInstance.getDay()
        firstDayInstance = null

        var days = getDays(month, year)

        drawCal(firstDay + 1, days, date, monthName, year)
}

function drawCal(firstDay, lastDate, date, monthName, year) {
        var headerHeight = 15 // 테이블 헤더셀의 높이
        var border = 1 // 테이블 테두리
        var cellspacing = 1 // 셀간의 간격
        var headerColor = "red" // 테이블 헤더 색상
        var headerSize = "+1" // 테이블 헤더 글자 크기
        var colWidth = 60 // 테이블 셀의 크기
        var dayCellHeight = 15 // 요일 라인의 높이
        var dayColor = "blue" // 요일 색상
        var cellHeight = 20 // 셀의 높이
        var todayColor = "red" // 오늘 날짜 색상
        var timeColor = "blue" // 시간 표시 색상

        var text = ""
        text += '<TABLE width=200 BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'
        text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>'
        text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'
        text += year + ' ' + monthName
        text += '</FONT>'
        text += '</TH>'

        var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
        openCol += '<FONT COLOR="' + dayColor + '">'
        var closeCol = '</FONT></TD>'

        var weekDay = new Array(7)
        weekDay[0] = "일"
        weekDay[1] = "월"
        weekDay[2] = "화"
        weekDay[3] = "수"
        weekDay[4] = "목"
        weekDay[5] = "금"
        weekDay[6] = "토"

        text += '<TR ALIGN="center" VALIGN="center">'
        for (var dayNum = 0; dayNum < 7; ++dayNum) {
                text += openCol + weekDay[dayNum] + closeCol
        }
        text += '</TR>'

        var digit = 1
        var curCell = 1

        for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
                text += '<TR ALIGN="right" VALIGN="top">'
                for (var col = 1; col <= 7; ++col) {
                        if (digit > lastDate)
                        break
                        if (curCell < firstDay) {
                                text += '<TD></TD>';
                                curCell++
                        } else {
                                if (digit == date) {
                                        text += '<TD HEIGHT=' + cellHeight + '>'
                                        text += '<FONT COLOR="' + todayColor + '">'
                                        text += digit
                                        text += '</FONT><BR>'

                                        // 현재 시간을 나타내려면 아래의 3줄의 주석을 해제 하세요
                                        // text += '<FONT COLOR="' + timeColor + '" SIZE=2>'
                                        // text += '<CENTER>' + getTime() + '</CENTER>'

                                        // text += '</FONT>'
                                        text += '</TD>'
                                } else
                                text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'
                                digit++
                        }
                }
                text += '</TR>'
        }

        text += '</TABLE>'

        document.writｅ(text)
}
//-->
</script>

// 여기까지 입니다<!---->

 

저작자표시 비영리 변경금지