호버에서 여러 div (또는 표) 만들기

Question

다소 기본적인 달력을 만들려고합니다. 내가 표시 할 특정 월의 일 싶습니다 호버에

<div class="calendar"> 
     <div class="row clearfix"> 
      <div class="col-1-4" id="month-1"><h3>January</h3></div> 
      <div class="col-1-4" id="month-2"><h3>February</h3></div> 
      <div class="col-1-4" id="month-3"><h3>March</h3></div> 
      <div class="col-1-4" id="month-4"><h3>April</h3></div> 
     </div> 
     <div class="row clearfix"> 
      <div class="col-1-4" id="month-5"><h3>May</h3></div> 
      <div class="col-1-4" id="month-6"><h3>June</h3></div> 
      <div class="col-1-4" id="month-7"><h3>July</h3></div> 
      <div class="col-1-4" id="month-8"><h3>August</h3></div> 
     </div> 
     <div class="row clearfix"> 
      <div class="col-1-4" id="month-9"><h3>September</h3></div> 
      <div class="col-1-4" id="month-10"><h3>October</h3></div> 
      <div class="col-1-4" id="month-11"><h3>November</h3></div> 
      <div class="col-1-4" id="month-12"><h3>December</h3></div> 
     </div> 
</div> 

: 여기 내 HTML입니다.

<table class="days"> 
       <tr> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td>1</td> 
        <td>2</td> 
        <td>3</td> 
        <td>4</td> 
       </tr> 
       .... 
       <tr> 
        <td>26</td> 
        <td>27</td> 
        <td>28</td> 
        <td>29</td> 
        <td>30</td> 
        <td>31</td> 
        <td></td> 
       </tr> 
</table> 

또는 매달 35 개 된 div를 생성, 하나 개의 테이블 또는 매월 사용할 수 있습니다 div의 한 세트를 만들 수있는 방법이 대신과 같이 매달 테이블을 만드는?

분명히 문제는 배치와 달 간의 일수가 다릅니다. 이것을 수용 할 수있는 스크립트가 있습니까? 이 방법은 훨씬 더 깨끗하고 효율적인 것처럼 보입니다.

또는 매월 개별적으로 처리하는 것이 더 간단할까요?

감사합니다.

Answer 1

귀하의 요구 사항에 따라 테이블을 생성하는 자바 스크립트 코드입니다.

var _Days = new Array("sun", "mon", "tue", "wed", "thr", "fri", "sat"); //declare 7 days 

function getCalendar(){ 
var tempDate = new Date("2014/09/01"); //create date object of month and year you want create calendar here. 
var firstDayOfMonth = tempDate.moveToFirstDayOfMonth().getDayName(); 
var daysInMonth = tempDate.moveToLastDayOfMonth().getDate(); 
var i = 1, j = 1, html = '<table>'; 
//create header 
html += '<tr><th scope="col">sun</th><th scope="col">sun</th>' + 
           '<th scope="col">tue</th><th scope="col">wed</th> ' + 
           '<th scope="col">thr</th><th scope="col">fri</th> ' + 
           '<th scope="col">sat</th></tr>' 
while (j <= daysInMonth) { 
       html += '<tr>'; 
       $(_Days).each(function (index) { 
        if ((this == firstDayOfMonth || j > 1) && (j <= daysInMonth)) {     
          html += '<td>' + j + '</td>' 
         j++; 
        } else { 
         html += '<td>&nbsp;</td>'; 
        } 
       }); 
       html += '</tr>' 
      } 
} 
html+='</table>'; 

표 html이 준비되었습니다. 이제 귀하의 요청에 따라 사용할 수 있습니다. Datej의 참조를 추가하는 것을 잊어 버리지 않았습니다.

Answer 2

HTML 캘린더를 만드는 것은 사용자가 제공 한 이유로 압도적 일 수 있습니다.

그러나 HTML, CSS 및 몇 줄의 jQuery를 사용하여 수행 할 수 있습니다.

HTML :

<div id="Days"> 
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div> 
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div> 
    <div>11</div><div>12</div><div>13</div><div>14</div><div>15</div> 
    <div>16</div><div>17</div><div>18</div><div>19</div><div>20</div> 
    <div>21</div><div>22</div><div>23</div><div>24</div><div>25</div> 
    <div>26</div><div>27</div><div>28</div><div>29</div><div>30</div> 
    <div>31</div> 
</div> 

CSS :

#Days { 
    background:#ccc; 
    height:300px; 
    width:400px; 
} 

#Days div { 
    float:left; 
    width: 13.78571%; 
    height:16.1667%; 
    margin-right:0.5%; 
    margin-bottom:0.5%; 
    text-align:right; 
    background:white; 
} 

margin 스타일 브라우저에 의해 약간의 작업과 국경을 만듭니다. (A jsPerf이 증명하는 것이 유용 할 수있다.) #Days divwidth 및 백분율은 height 것을

참고. 여백을 포함하여 100/7 (주 7 일) 및 100/6 (일정에는 최대 6 개의 행이있을 수 있음)과 같습니다.

jQuery를 :

function showMonth(month,year) { 
    var dayStart = new Date(year, month-1, 1).getDay(); 
    var daysInMonth = new Date(year, month, 0).getDate(); 

    $('#Days div').first().css('margin-left',14.287571*dayStart+'%'); 
    $('#Days div').show(); 
    $('#Days div').eq(daysInMonth-1).nextAll().hide(); 
} //showMonth 

dayStart은 왼쪽 여백이로 일 1 못살게 굴지 있도록 첫 번째 #Days div는 단순히 스타일입니다 (= 일요일, 1 = 월요일 등 0) 달 1 일 보유 올바른 위치.

daysInMonth입니다. 우리는 단순히 마지막 날을 지나서 매일 숨 깁니다. 그렇게하기 전에 매월 변화하는 경우를 대비하여 모든 요일을 보여줍니다.

This Fiddle에는 hover에 대한 월 변경 요구 사항이 포함되어 있습니다.