개발을 하다보면 빼 놓을 수 없는 것이 한가지 있다. 바로 달력 이다. 개발자를 귀찮게 하는 요소 중 한 가지 인데, 제일 큰 이유는 아래와 같다.
대표적인 라이브러리는 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 작업을 한다면, 의도하는 달력을 제작 할 수 있을 것이다.
참고 사이트