개발을 하다보면 빼 놓을 수 없는 것이 한가지 있다. 바로 달력 이다. 개발자를 귀찮게 하는 요소 중 한 가지 인데, 제일 큰 이유는 아래와 같다.

대표적인 라이브러리는 jQuery Datepicker 이다. 하지만 UI 는 그대로 사용 할 수 없다.

제공 되는 서비스에 따라 달력은 여러가지 형태로 제공 되게 된다. 요구 조건에 맞게 변경 하는 방법을 알아 보자.

jquery, jquery ui 라이브러리를 다운로드 한다.

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

Html 을 작성 한다.

<div id="datepicker"></div>

Datepicker Element 를 생성 한다.

$('#datepicker').datepicker({
    inline: true,
    showOtherMonths: true,
    showMonthAfterYear: true,
    monthNames: [ '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12' ],
    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토']
});

기본적인 준비는 완료 되었다. 이제 CSS 를 적용 해보자. 간단하게 정리를 해보았다.

• ui-datepicker: 배경 표시
• ui-datepicker-title: 년, 월 표시
• ui-datepicker-header: 요일 표시
• ui-datepicker-prev: 이전 달 버튼
• ui-datepicker-next: 이후 달 버튼
• ui-datepicket table: 일 표시

추가적인 내용은 동적으로 생성 되는 HTML 을 참고 하도록 하자.

샘플 URL: http://jsfiddle.net/whitelife/6mxx8rex/

위 방법을 이용해서 CSS 작업을 한다면, 의도하는 달력을 제작 할 수 있을 것이다.

참고 사이트

• http://www.hongkiat.com/blog/jquery-ui-datepicker/

출처: http://blog.whitelife.co.kr/288 [White Life Story]