API tools faq
paste
asimryu

JavaScript Calendar - 자바스크립트 달력만들기

asimryu
Jan 20th, 2018
708
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.02 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>JavaScript Calendar</title>
  6.  <style type="text/css">
  7.   .calneder-header {
  8.    width: 100%;
  9.    height: 30px;
  10.    margin-bottom: 5px;
  11.   }
  12.   .calneder-header > div {
  13.    float: left;
  14.    width: 33.333%;
  15.   }
  16.   #year-month {
  17.    text-align: center;
  18.   }
  19.   .calneder-header .next-btns {
  20.    text-align: right;
  21.   }
  22.   .calendar-table {
  23.    border-collapse: collapse;
  24.    width: 100%;
  25.   }
  26.   .calendar-table thead td {
  27.    background-color: #E5E5E5;
  28.   }
  29.   .calendar-table tr td:first-child {
  30.    color: #FF0000;
  31.   }
  32.   .calendar-table tr td:last-child {
  33.    color: #0000FF;
  34.   }  
  35.   .calendar-table td {
  36.    border: 1px solid #666;
  37.    text-align: center;
  38.    padding: 10px;
  39.   }
  40.   .today {
  41.    background-color: #C0DFE8;
  42.   }
  43.   .calendar-footer {
  44.    margin-top: 10px;
  45.    text-align: center;
  46.   }
  47.  </style>
  48. </head>
  49. <body>
  50.  <!-- JavaScript로 달력 만들기 예제  -->
  51.  <div class="calneder-header">
  52.   <div class="prev-btns">
  53.    <button onclick="moveYearMonth('Y', -1)">&lt;&lt;이전년도</button>
  54.    <button onclick="moveYearMonth('M', -1)">&lt;이전달</button>
  55.   </div>
  56.   <div id="year-month"></div>
  57.   <div class="next-btns">
  58.    <button onclick="moveYearMonth('M', 1)">다음달&gt;</button>
  59.    <button onclick="moveYearMonth('Y', 1)">다음년도&gt;&gt;</button>
  60.   </div>
  61.  </div>
  62.  <div id="calendar"></div>
  63.  <div class="calendar-footer"><button onclick="goToday()">오늘 날짜로</button></div>
  64.  <script type="text/javascript">
  65.   var currentYear, currentMonth; //년,월 변경 시 값을 기억하기 위한 전역 변수 선언
  66.  
  67.   goToday(); //페이지에 처음 들어오면 goToday함수 실행하여 오늘 날짜 달력 표시
  68.  
  69.   //달력을 화면에 표시해주는 함수
  70.   function calendar(year,month) {
  71.  
  72.    //현재 출력중인 년도를 기억하기 위한 변수 currentYear의 값을 전달받은 인수 year의 값으로 변경
  73.    currentYear = year;
  74.    //현재 출력중인 월을 기억하기 위한 변수 currentMonth 값을 전달받은 인수 month 값으로 변경
  75.    currentMonth = month;
  76.  
  77.    //월별 날자 수 배열, 2월은 해마다 다르므로 getFebuaryDays 함수로 구함
  78.    var lastDaysOfYear = [31,getFebuaryDays(year),31,30,31,30,31,31,30,31,30,31];
  79.    var lastDayOfMonth = lastDaysOfYear[month]; //선택된 달의 마지막 날짜 구하기
  80.    var firstDate = new Date(year, month, 1); //선택된 년월의 1일을 기준으로 Date 생성
  81.    var lastDate = new Date(year, month, lastDayOfMonth); //선택된 년월의 마지막 날을 기준으로 Date 생성
  82.    var weekOfFirstDay = firstDate.getDay();// 선택된 달의 1일의 요일 구하기
  83.    var weekOfLastDay = lastDate.getDay();// 선택된 달의 1일의 요일 구하기
  84.  
  85.    document.getElementById("year-month").innerHTML = year + "." + (month+1);
  86.  
  87.    //달력 테이블 시작하기
  88.    var calendarTable = "<table class='calendar-table'><thead><tr><td>일</td><td>월</td><td>화</td><td>수</td><td>목</td><td>금</td><td>토</td></tr></thead><tbody>";
  89.  
  90.    //1일부터 선택된 달의 마지막 날까지 반복
  91.    var week = 0; //요일을 일요일로 초기화(반복문에서 0~6 반복)
  92.    for( var i=1; i<=lastDayOfMonth; i++ ){
  93.  
  94.    if( week === 0 ) calendarTable += "<tr>"; //요일이 0이면 <tr> 추가
  95.  
  96.     if( i === 1 && weekOfFirstDay > 0) { //만일 1일이 일요일이 아니면
  97.     for( var j=0;j<weekOfFirstDay; j++) { //1일의 요일 전까지 빈 칸<td>를 추가
  98.       calendarTable += "<td>&nbsp;</td>";
  99.       week++; //빈 칸을 하나 추가할 때마다 week(요일) 값을 1씩 늘림
  100.      } //j 반복문 끝
  101.     }
  102.  
  103.     //출력되는 날짜가 시스템의 현재 년월일과 일치하면 td에 today class 추가
  104.     if( year === new Date().getFullYear() && month === new Date().getMonth() && i === new Date().getDate() ) {
  105.     calendarTable += "<td class='today'>";
  106.     } else {
  107.      calendarTable += "<td>";
  108.     }
  109.     calendarTable += i + "</td>"; //반목되는 i 값을 날짜로 칸 추가
  110.  
  111.  
  112.  
  113.     week++; //날짜 칸을 추가할 때마다 week(요일) 값을 1씩 늘림
  114.  
  115.     //만일 선택된 달의 마지막 날이 토요일이 아니면 마지막 날 다음부터 토요일까지 빈 칸 추가
  116.     if( i === lastDayOfMonth && weekOfLastDay < 6) {
  117.     for( var k=weekOfLastDay+1;k<=6; k++) {
  118.      calendarTable += "<td>&nbsp;</td>";
  119.       week++;
  120.      } //k 반복문 끝
  121.     }
  122.  
  123.     if(week > 6) {
  124.      calendarTable += "</tr>";
  125.      week = 0;
  126.     }
  127.  
  128.    } //i 반복문 끝
  129.  
  130.    calendarTable += "</tbody></table>";
  131.    document.getElementById("calendar").innerHTML = calendarTable;
  132.  
  133.   } //함수 calendar() 끝
  134.  
  135.   //년도 별 2월의 날자수를 구하는 함수
  136.   function getFebuaryDays(year) {
  137.    var m2days;
  138.    if ( ( year % 100 != 0 ) && ( year % 4 == 0 ) || ( year % 400 == 0 ) ){
  139.    return 29;
  140.    }else{
  141.     return 28;
  142.    }
  143.   }
  144.  
  145.   //년도, 날짜 이동 버튼에서 호출하여 실행하는 함수
  146.   //YM = 값이 Y이면 년도를, M이면 월을 변경
  147.   //val = -1 도는 1, -1이면 더해도 빼기가 되고 1은 더해줌
  148.   function moveYearMonth(YM, val) {
  149.    if( YM === "Y" ) { //연도이면 값을 그대로 빼거나 더해 줌
  150.     calendar((currentYear + val),currentMonth);
  151.    } else if( YM === "M" ) {
  152.     if( currentMonth + val > 11 ) {
  153.      //월의 증감값 11(12월) 보다 크면 년도를 1 증가시켜주고 다음년도의 1월(0)로 이동
  154.      calendar((currentYear + 1),0);
  155.     } else if( currentMonth + val < 0 ) {
  156.     //월의 증감값이 0(1월) 보다 작으면 이면 년도를 1 감소시켜주고 다음년도의 12월(11)로 이동
  157.     calendar((currentYear - 1),11);
  158.    } else {
  159.     //월의 증감값이 0~11 사이에 있으면 현재년도에서 월 증감값 그대로 이동
  160.     calendar(currentYear,(currentMonth + val));
  161.    }
  162.   }
  163.  }
  164.  
  165.  //오늘 날짜가 포함된 달력으로 이동
  166.  function goToday() {
  167.   calendar( new Date().getFullYear(), new Date().getMonth() );
  168.  }
  169. </script>
  170. </body>
  171. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!