DHTML Calendar 1.0 작은 스크립트 달력

+ '오늘' 의 좌,우로 있는 화살표를 클릭하고 있으면 년도, 월 등이 좌악~ 펼쳐진다.
+ 클릭, 클릭 으로 이동도 당연 가능하다.
+ 이벤트 함수, 콜백 함수 등 프로그래밍시 연결이 용이하다.
+ 다국어 설정이 쉽게 되어있다. (각 언어 설정 파일 따로 위치)
+ prototype.js 등과 충돌이 없다.

invalid-file

+ 첨부파일은 한글 파일 직접 수정한 전체 소스 파일.
- 개발자의 홈피에서 다운받고 한글을 쓰려고
<script type="text/javascript" src="/js/jscalendar/lang/calendar-ko.js"></script>
를 했으나 달력이 나타나질 않았다.
삽질을 하다보니 calendar-en.js 보다 항목이 적었던 것이다.
그래서 en 과 같게 항목을 추가 번역하여 넣었더니 정상 작동하였다.

+ 필자의 사용 예

<style type="text/css">
    @import url('skins/aqua/theme.css');
    /*@import url('calendar-blue.css');*/

    #calendar-container { margin-top: 1em; }

    .special { background-color: lightblue; }
</style>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="lang/calendar-ko.js"></script>
<script type="text/javascript" src="calendar-setup.js"></script>

...주저리 주저리...

<!-- 미니달력 --><div id="calendar-container"></div>

...주저리 주저리...

<script language="javascript" type="text/javascript">
//<![CDATA
    var SPECIAL_DAYS = {
        7 : [ 1, 6, 8, 12, 18 ],     // 0: 은 1월을 뜻한다. [숫자] 는 일을 뜻한다.
        8 : [ 21, 11 ]                 // 이건 9월 21일, 11일을 의미
    }

    function dateIsSpecial(year, month, day) {
        var m = SPECIAL_DAYS[month];
        if (!m) return false;
        for (var i in m) if (m[i] == day) return true;
        return false;
    }

    Calendar.setup({
        flat         : "calendar-container", // ID of the parent element
        ifFormat     : "%Y-%m-%d",
        flatCallback : function(calendar) {  // our callback function
            // Beware that this function is called even if the end-user only
            // changed the month/year.  In order to determine if a date was
            // clicked you can use the dateClicked property of the calendar:
            if (calendar.dateClicked) {
              // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
              var y = calendar.date.getFullYear();
              var m = calendar.date.getMonth();     // integer, 0..11
              var d = calendar.date.getDate();      // integer, 1..31
              // redirect...
              window.location = "worknote.asp?date="+ y +"-"+ m +"-"+ d;
            }
        },
        dateStatusFunc : function(date, y, m, d) {    // 특정 일자의 색 바꾸기
            if (dateIsSpecial(y, m, d))    return "special";    // CSS 에 정의한 클래스명
            else return false; // other dates are enabled
            // return true if you want to disable other dates
        }
        //onUpdate : function()
    });
    Calendar.create();    // flat 방식은 이 함수까지만 실행해도 보인다. popup 은 메뉴얼 참조.

//]]>
</script>

+ 제작자 홈피: http://dynarch.com/mishoo/
+ GPL 라이센스.