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个div，有没有办法创建一个表或一组可以用于每个月的div？

显然，问题是月份之间的安排和天数不同。是否有可以编写的脚本来容纳这个？这种方式看起来会更加清洁和高效。

或者单独处理每个月会更简单吗？

谢谢。

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 div width和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 =太阳，1 =星期一等）第一个#Days div的样式简单，以便其左边距将第1天推入正确的位置。

daysInMonth就是这么说的。我们只是隐藏了最后一天的每一天。在此之前，我们会展示所有日子，以防我们每个月都在变化。

This Fiddle 包含您在hover上更改月份的要求。

在悬停时创建多个div（或表）

2 个答案: