Calendar 기능을 구현하고 싶습니다.

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
Calendar 기능을 구현하고 싶습니다.

QA

Calendar 기능을 구현하고 싶습니다.

답변 3

본문

사진 보시면 네모칸을 클릭하면 달력이 나와서 여기서 원하는 날짜 선택하면 네모칸 안에 날짜가 나오게 기능을 구현하고 싶은데

제가 알기로는 따로 js 다운 을 해야 한다고 들었거든요.. 프로그램같이  

여러가지 종류가 있다는데 조언 부탁드립니다.ㅠ.ㅠ 



4b1a08855b58ff7959188527d0d049e0_1404278405_1964.JPG 

이 질문에 댓글 쓰기 :

답변 3

<input type="text" name="wr_10" value="<?php echo $write['wr_10'] ?>" id="fr_date" required class="frm_input" size="11" maxlength="10">

여분필드로 이렇게 값을 주시고

스크립트에

$(function(){

    $("#fr_date, #to_date").datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", showButtonPanel: true, yearRange: "c-99:c+99", maxDate: "+0d" });

});
추가를 해주세요.


최상단에는

include_once(G5_PLUGIN_PATH.'/jquery-ui/datepicker.php');
인쿠르드는 필수 입니다.

jQuery UI가 편하지 않나요?
그누보드4 회원가입에 아마 달력이 있을테니
그걸 참고해 보시는 것도...ㅎ

jQuery UI의 datepicker가 가장 쉽고 유용하긴 합니다.

 

근데, 조금 생각해보면 PHP로도 쉽게 구현 할 수 는 있습니다.  

다양하게 활용할 목적으로 최근에 PHP로 제작을 해봤는데, 자바스크립트로 만드는 것보다 쉽더라구요.  

그래도  datepicker로 사용할 거라면,  javascript나  jQuery를 어느정도 함께 사용해야 할 듯 합니다.  

 

PHP로 구현하는 로직을 설명 드리면, 

1. 42개의 셀을 만듭니다.(42개로 만드는 이유는 달력에서 최대로 필요한 공간 입니다. 6주 - 1주, 마지막 주가 정확하게 월, 일로 끝나지 않기 때문에...)

 

2. 처음 시작하는 요일을 구합니다. php의 date 함수에서 'w'옵션을 사용하시면 0~6의 숫자로 요일을 가져올 수 있습니다.  

   처음 시작하는 날자 (예) 2014-07-01)로 시작하는 stamp 값을 mktime을 사용하여 구합니다.  

   예) $first_day_stamp = mktime(0,0,0, 7, 1, 2014);

   달력은 한달 단위로 계속 변해야 하니깐 stamp를 구하는 함수를 만드는 것이 좋습니다.  

    Stamp가 구해졌다면, 다음과 같이 요일을 구합니다.  

 

   $start_day = date('w', $first_day_stamp);   

 

3. 마지막 끝나는 날을 구합니다.  

    마지막 끝나는 날은 다음달 첫날(예) 2014-08-01)을 stamp로 만든다음 하루만큼(60 * 60 * 24)를 빼주면 됩니다.  그런 다음 다시 날짜로 변환 합니다.  

   예) $last_day_stamp = mktime(0,0,0, 8, 1, 2014) - (60 * 60 * 24 );

         $last_date = date('d', $last_day_stamp);

 

4. 여기 까지 했다면 달력을 출력할 준비가 되었습니다.  

   달력을 출력 해보면

 

예)

 <div>

<div>일</div>

<div>월</div>

<div>화</div>

<div>수</div>

<div>목</div>

<div>금</div>

<div>토</div> 

</div> 

  for ( i = 0; $i < 42; $i++ ) {  

        if ( $i % 7 == 0 ) echo "<div>";

         

         if ( $i < $start_day ) echo "<div></div>"; // 1일이 시작하는 요일이 일요일이 아닌 경우는 처음 시작하는 요일이 될 때 까지 공백을 출력하고

         else {   

                if ( $i > $last_date + start_day + 1) { // 마지막 날 이후는 공백으로 출력

                      echo "<div></div>"; 

                } else {

                     echo "<div>".($i - $start_day + 1 )."</div>"; 

                } 

                   } 

 

                  if ( $i % 7 == 6 ) echo "</div>"; 

                      }

 

      위와 같이 구성을 한다면(실제로 테스트를 해보지 않아서 에러가 있을 수도 있습니다.) 대강 달력 출력은 될 듯 합니다.  

   

    datepicker와 같이 이벤트 처리를 해야 한다면, 각 셀의 div에 id 또는 다른 생성한 attribute에  날짜값을 부여하고( 예) id = '2014-07-20' 또는 date='2014-07-20'으로 정하고  

   jQuery나 javascript를 통해서 그 값을 가져오고 지정된 input text 박스에 값을 부여해 주면 될 듯 합니다.  

 

  

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 44
© SIRSOFT
현재 페이지 제일 처음으로