カスタムカレンダー、クリックマークの日付範囲

Question

私はPHPでカスタムカレンダーをプログラムしましたが、すべてがチャームのように機能します。しかし、今はjqueryの機能に問題があります。ユーザーが特定の日付をクリックすると、その日付範囲内のすべての日付（データ属性）を選択する必要があります。

これは、次のようになります（22が選択されるまで、16日）

私のコード今のところ：

$(document).ready(function() { 
 
    var range = 7; //$('.price-list-calendar').data("package-range"); 
 
    var range_array = []; 
 
    for (var i = 1; i < range; i++) { 
 
    range_array.push(i); 
 
    } 
 

 
    $(document).on('click', 'td.green', function(e) { 
 
    e.preventDefault(); 
 
    if ($("td.firstClick").length == 0) { 
 
     $(this).addClass("firstClick"); 
 

 
     $('td.green').filter(function(i) { 
 
     return range_array.indexOf(i) > -1 
 
     }).addClass("selected"); 
 

 
    } else { 
 
     $(this).removeClass("firstClick"); 
 
     $('td.green').removeClass("selected"); 
 
    } 
 
    }); 
 

 
});

.green { 
 
    background: #cfe09b; 
 
} 
 

 
.yellow { 
 
    background: #fff59b; 
 
} 
 

 
.red { 
 
    background: #f3997b; 
 
} 
 

 
h2 { 
 
    font-size: 1.625rem; 
 
    text-transform: uppercase; 
 
    font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif; 
 
    margin-bottom: 10px; 
 
} 
 

 
table.page-calendar thead, 
 
table.page-calendar thead tr { 
 
    border: 0; 
 
    background: none; 
 
    font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif; 
 
} 
 

 
table.page-calendar thead span.month, 
 
table.page-calendar thead tr span.month { 
 
    font-size: 1.625rem; 
 
    text-transform: upprecase; 
 
} 
 

 
table.page-calendar thead span.year, 
 
table.page-calendar thead tr span.year { 
 
    font-size: 0.875rem; 
 
} 
 

 
table.page-calendar thead td, 
 
table.page-calendar thead tr td { 
 
    padding: 0; 
 
    text-align: center; 
 
    border: 1px solid #e6e6e6; 
 
    color: #dcaa2c; 
 
    text-transform: uppercase; 
 
} 
 

 
table.page-calendar thead td.empty, 
 
table.page-calendar thead tr td.empty { 
 
    background: #e6e6e6; 
 
} 
 

 
table.page-calendar thead td.empty span, 
 
table.page-calendar thead td a, 
 
table.page-calendar thead tr td.empty span, 
 
table.page-calendar thead tr td a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 20px 0; 
 
    font-size: 2.875rem; 
 
    min-height: 88px; 
 
} 
 

 
table.page-calendar thead td a, 
 
table.page-calendar thead tr td a { 
 
    background: #dcaa2c; 
 
    border: 1px solid #dcaa2c; 
 
    -webkit-transition: 0.5s ease; 
 
    -moz-transition: 0.5s ease; 
 
    -ms-transition: 0.5s ease; 
 
    -o-transition: 0.5s ease; 
 
} 
 

 
table.page-calendar thead td a:hover, 
 
table.page-calendar thead tr td a:hover { 
 
    background: rgba(220, 170, 44, 0.7); 
 
} 
 

 
table.page-calendar thead td i, 
 
table.page-calendar thead tr td i { 
 
    color: #ffffff; 
 
} 
 

 
tbody { 
 
    background: rgba(230, 230, 230, 0.5); 
 
} 
 

 
.calendar-row td { 
 
    border: 1px solid #ffffff; 
 
    background: none; 
 
    text-align: center; 
 
} 
 

 
.calendar-row td.calendar-day { 
 
    background: rgba(204, 204, 204, 0.5); 
 
} 
 

 
.calendar-row td.calendar-day.green { 
 
    background: #cfe09b; 
 
    cursor: pointer; 
 
} 
 

 
.calendar-row td.calendar-day.yellow { 
 
    background: #fff59b; 
 
} 
 

 
.calendar-row td.calendar-day.red { 
 
    background: #f3997b; 
 
} 
 

 
.calendar-row td.calendar-day.firstClick { 
 
    background: #dcaa2c; 
 
    color: #ffffff; 
 
} 
 

 
.calendar-row td.calendar-day.selected { 
 
    background: rgba(220, 170, 44, 0.5); 
 
    color: #ffffff; 
 
} 
 

 
.calendar-row td.calendar-day.reserved { 
 
    background: #dcaa2c; 
 
    color: #ffffff !important; 
 
} 
 

 
.calendar-row td.calendar-day.secondClick { 
 
    background: #dcaa2c; 
 
    color: #ffffff; 
 
} 
 

 
.calendar-row td.calendar-day-np { 
 
    background: rgba(230, 230, 230, 0.1); 
 
} 
 

 
.calendar-row td.today { 
 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px; 
 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px; 
 
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px; 
 
    position: relative; 
 
    z-index: 12; 
 
} 
 

 
.calendar-row.heading td { 
 
    border: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif; 
 
    font-size: 1rem; 
 
    padding: 15px 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="page-calendar" cellspacing="0" cellpadding="0"> 
 
    <thead> 
 
    <tr> 
 
     <td colspan="1" class="empty" valign="middle"><span>&nbsp;</span></td> 
 
     <td colspan="6" valign="middle"><span class="month">Februar</span> <span class="year">2017</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="calendar-day-head"> So</td> 
 
     <td class="calendar-day-head">Mo</td> 
 
     <td class="calendar-day-head">Di</td> 
 
     <td class="calendar-day-head">Mi</td> 
 
     <td class="calendar-day-head">Do</td> 
 
     <td class="calendar-day-head">Fr</td> 
 
     <td class="calendar-day-head">Sa</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="calendar-row"> 
 
     <td class="calendar-day-np"></td> 
 
     <td class="calendar-day-np"></td> 
 
     <td class="calendar-day-np"></td> 
 
     <td class="calendar-day " data-date="01.02.2017" data-amount=""> 
 
     <div class="day-number">1</div> 
 
     </td> 
 
     <td class="calendar-day " data-date="02.02.2017" data-amount=""> 
 
     <div class="day-number">2</div> 
 
     </td> 
 
     <td class="calendar-day " data-date="03.02.2017" data-amount=""> 
 
     <div class="day-number">3</div> 
 
     </td> 
 
     <td class="calendar-day " data-date="04.02.2017" data-amount=""> 
 
     <div class="day-number">4</div> 
 
     </td> 
 
    </tr> 
 
    <tr class="calendar-row"> 
 
     <td class="calendar-day " data-date="05.02.2017" data-amount=""> 
 
     <div class="day-number">5</div> 
 
     </td> 
 
     <td class="calendar-day " data-date="06.02.2017" data-amount=""> 
 
     <div class="day-number">6</div> 
 
     </td> 
 
     <td class="calendar-day " data-date="07.02.2017" data-amount=""> 
 
     <div class="day-number">7</div> 
 
     </td> 
 
     <td class="calendar-day " data-date="08.02.2017" data-amount=""> 
 
     <div class="day-number">8</div> 
 
     </td> 
 
     <td class="calendar-day " data-date="09.02.2017" data-amount=""> 
 
     <div class="day-number">9</div> 
 
     </td> 
 
     <td class="calendar-day " data-date="10.02.2017" data-amount=""> 
 
     <div class="day-number">10</div> 
 
     </td> 
 
     <td class="calendar-day " data-date="11.02.2017" data-amount=""> 
 
     <div class="day-number">11</div> 
 
     </td> 
 
    </tr> 
 
    <tr class="calendar-row"> 
 
     <td class="calendar-day " data-date="12.02.2017" data-amount=""> 
 
     <div class="day-number">12</div> 
 
     </td> 
 
     <td class="calendar-day " data-date="13.02.2017" data-amount=""> 
 
     <div class="day-number">13</div> 
 
     </td> 
 
     <td class="calendar-day " data-date="14.02.2017" data-amount=""> 
 
     <div class="day-number">14</div> 
 
     </td> 
 
     <td class="calendar-day " data-date="15.02.2017" data-amount=""> 
 
     <div class="day-number">15</div> 
 
     </td> 
 
     <td class="calendar-day today green firstClick" data-date="16.02.2017" data-amount="1044.000"> 
 
     <div class="day-number">16</div> 
 
     </td> 
 
     <td class="calendar-day green selected" data-date="17.02.2017" data-amount="1044.000"> 
 
     <div class="day-number">17</div> 
 
     </td> 
 
     <td class="calendar-day green selected" data-date="18.02.2017" data-amount="1044.000"> 
 
     <div class="day-number">18</div> 
 
     </td> 
 
    </tr> 
 
    <tr class="calendar-row"> 
 
     <td class="calendar-day green selected" data-date="19.02.2017" data-amount="1044.000"> 
 
     <div class="day-number">19</div> 
 
     </td> 
 
     <td class="calendar-day green selected" data-date="20.02.2017" data-amount="1044.000"> 
 
     <div class="day-number">20</div> 
 
     </td> 
 
     <td class="calendar-day green selected" data-date="21.02.2017" data-amount="1044.000"> 
 
     <div class="day-number">21</div> 
 
     </td> 
 
     <td class="calendar-day green selected" data-date="22.02.2017" data-amount="1044.000"> 
 
     <div class="day-number">22</div> 
 
     </td> 
 
     <td class="calendar-day green" data-date="23.02.2017" data-amount="1044.000"> 
 
     <div class="day-number">23</div> 
 
     </td> 
 
     <td class="calendar-day red" data-date="24.02.2017" data-amount="955.000"> 
 
     <div class="day-number">24</div> 
 
     </td> 
 
     <td class="calendar-day red" data-date="25.02.2017" data-amount="955.000"> 
 
     <div class="day-number">25</div> 
 
     </td> 
 
    </tr> 
 
    <tr class="calendar-row"> 
 
     <td class="calendar-day red" data-date="26.02.2017" data-amount="955.000"> 
 
     <div class="day-number">26</div> 
 
     </td> 
 
     <td class="calendar-day red" data-date="27.02.2017" data-amount="955.000"> 
 
     <div class="day-number">27</div> 
 
     </td> 
 
     <td class="calendar-day red" data-date="28.02.2017" data-amount="955.000"> 
 
     <div class="day-number">28</div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

希望誰も私を助けることができます！

について

mです。

UPDATE

使用して日付で、それを解決：私が使用している今、代わりにセルインデックスの、D

var range = calendar_wrapper.data("package-range") - 1; 

     //Add Days 
     function addDays(date, days) { 
      var result = new Date(date); 
      result.setDate(result.getDate() + days); 
      return result; 
     } 

     //Dates between 
     function getDates(startDate, stopDate) { 
      var dateArray = new Array(); 
      var currentDate = startDate; 
      while (currentDate <= stopDate) { 
       dateArray.push(currentDate) 
       currentDate = addDays(currentDate,1); 
      } 
      return dateArray; 
     } 

     $(document).on('click', calendar_wrapper_class + ' td.green', function(e) { 
      e.preventDefault(); 
      if($("td.firstClick").length == 0) { 
       $(this).addClass("firstClick"); 

       var date_var = $(this).data("date-js"); 
       var start_date = new Date(date_var); 
       var end_date = addDays(start_date, range); 
       var date_array = getDates(start_date, end_date); 

       $.each(date_array,function(k,v) { 
        var datestring = ("0" + v.getDate()).slice(-2) + "." + ("0"+(v.getMonth()+1)).slice(-2) + "." + v.getFullYear(); 
        $('td.green[data-date="' + datestring + '"]').addClass("selected"); 
       }); 

      } else { 
       $(this).removeClass("firstClick"); 
       $('td.green').removeClass("selected"); 
      } 
     }); 

Answer 1

自分で解決策を見つけた日付

var range = calendar_wrapper.data("package-range") - 1; 

    //Add Days 
    function addDays(date, days) { 
     var result = new Date(date); 
     result.setDate(result.getDate() + days); 
     return result; 
    } 

    //Dates between 
    function getDates(startDate, stopDate) { 
     var dateArray = new Array(); 
     var currentDate = startDate; 
     while (currentDate <= stopDate) { 
      dateArray.push(currentDate) 
      currentDate = addDays(currentDate,1); 
     } 
     return dateArray; 
    } 

    $(document).on('click', calendar_wrapper_class + ' td.green', function(e) { 
     e.preventDefault(); 
     if($("td.firstClick").length == 0) { 
      $(this).addClass("firstClick"); 

      var date_var = $(this).data("date-js"); 
      var start_date = new Date(date_var); 
      var end_date = addDays(start_date, range); 
      var date_array = getDates(start_date, end_date); 

      $.each(date_array,function(k,v) { 
       var datestring = ("0" + v.getDate()).slice(-2) + "." + ("0"+(v.getMonth()+1)).slice(-2) + "." + v.getFullYear(); 
       $('td.green[data-date="' + datestring + '"]').addClass("selected"); 
      }); 

     } else { 
      $(this).removeClass("firstClick"); 
      $('td.green').removeClass("selected"); 
     } 
    });