Создание нескольких div (или таблиц) при зависании

Question

Я пытаюсь создать довольно простой календарь. Вот мой HTML:

<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> 

На зависания, я хотел бы, дни этого конкретного месяца будет отображаться. Вместо того чтобы создавать таблицы для каждого месяца, как так:

<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 див за каждый месяц, есть способ, чтобы создать одну таблицы или один набор дивы, который может быть использован для каждого месяца?

Очевидно, проблема в том, что расположение и количество дней между месяцами отличается. Есть ли сценарий, который может быть написан для этого? Этот способ кажется, что это было бы намного более чистым и эффективным.

Или было бы проще просто обрабатывать каждый месяц отдельно?

спасибо.

Answer 1

Это javascript-код который генерирует таблицу в соответствии с вашими требованиями.

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 готова, теперь вы можете использовать его согласно вашему требованию. Не забудьте добавить ссылку Datejs.

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 стилях создают границы с небольшой работой в браузере. (Возможно, это полезно для использования 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 проводит первый день месяца (0 = Sun, 1 = пн, и т.д.) Первый #Days div просто стиль, так что его левое поле толкает день 1 в правильное положение.

daysInMonth - это то, что он говорит. Мы просто прячемся каждый день за последний день. Прежде чем делать это, мы показываем все дни, если мы меняемся с каждым месяцем.

This Fiddle содержит требование о том, чтобы изменить месяц на hover.