jQuery - 顯示JSON .startTime和.endTime值之間的所有日期

Question

我試圖讓PHP只讀日曆顯示Google日曆中的日期，使用jQuery將顏色應用於相關單元格的背景。代碼爲每個日曆表看起來像這樣：

<?php 

$monthNames = Array("January", "February", "March", "April", "May", "June", "July", 
"August", "September", "October", "November", "December"); 

if (!isset($_REQUEST["month"])) $_REQUEST["month"] = date("n"); 
if (!isset($_REQUEST["year"])) $_REQUEST["year"] = date("Y"); 

$cMonth = $_REQUEST["month"]; 
$cYear = $_REQUEST["year"]; 

$prev_year = $cYear; 
$next_year = $cYear; 
$prev_month = $cMonth-1; 
$next_month = $cMonth+1; 

if ($prev_month == 0) { 
    $prev_month = 12; 
    $prev_year = $cYear - 1; 
} 
if ($next_month == 13) { 
    $next_month = 1; 
    $next_year = $cYear + 1; 
} 

if (!isset($_REQUEST["short-month"])) $_REQUEST["short-month"] = date("m"); 
$cShortMonth = $_REQUEST["short-month"]; 
?> 

// Generate the calendar 


<div class="month"> 
    <?php $month_of_year = 1; ?> 

    <h2><?php echo $monthNames[$cMonth+$month_of_year-2].' '.$cYear; ?></h2> 
    <table class="cal"> 
     <tr> 
      <td class="day-cell">S</td> 
      <td class="day-cell">M</td> 
      <td class="day-cell">T</td> 
      <td class="day-cell">W</td> 
      <td class="day-cell">T</td> 
      <td class="day-cell">F</td> 
      <td class="day-cell">S</td> 
     </tr> 
     <?php 
     $timestamp = mktime(0,0,0,$cMonth+$month_of_year-1,1,$cYear); 
     $maxday = date("t",$timestamp); 
     $thismonth = getdate ($timestamp); 
     $startday = $thismonth['wday']; 

     for ($i=0; $i<($maxday+$startday); $i++) { 

      $year_id = $cYear; 
      $month_id_raw = $cShortMonth+$month_of_year-1; 
      $month_id = str_pad($month_id_raw, 2, "0", STR_PAD_LEFT); 
      $day_id_raw = $i - $startday + 1; 
      $day_id = str_pad($day_id_raw, 2, "0", STR_PAD_LEFT); 

      if(($i % 7) == 0) echo "<tr>"; 
      if($i < $startday) echo "<td></td>"; 
      else echo "<td class='date-cell' id='" . $year_id . "-" . $month_id . "-" . $day_id . "'>" . ($i - $startday + 1) . "</td>"; 
      if(($i % 7) == 6) echo "</tr>"; 
     }?> 
    </table> 
</div> 

產生，我已經反覆X12日曆表：

它給每一個日期在日曆上一個唯一的ID日期格式YYYY-MM-DD ，這似乎工作。這是在下面了jQuery（在XML的JSON格式相匹配），這是我卡住準備：

function GCalEvents() { 

var calendar_json_url = "https://www.google.com/calendar/feeds/myemail%40googlemail.com/public/full?orderby=starttime&sortorder=ascending&max-results=3&futureevents=true&alt=json" 

    // Get list of upcoming events formatted in JSON 
    jQuery.getJSON(calendar_json_url, function(data){ 

    // Parse and render each event 
    jQuery.each(data.feed.entry, function(i, item){ 

     // Apply background to start dates. 
     var start_time_id = item.gd$when[0].startTime; 
     var end_time_id = item.gd$when[0].endTime; 
     jQuery("#" + start_time_id).css("background","red"); 
     jQuery("#" + end_time_id).css("background","green"); 

    }); 
    }); 

} 

正如你看到的，我可以讓jQuery的使用.startTime/.endTime作爲該ID可讓我爲各個日期着色。但是我需要一次性將.startTime和.endTime（通常是整整一週）之間的所有日子着色。他們不必是不同的顏色 - 我剛剛做到這一點，以突出開始/結束日期。

所以我正在尋找的方法是在整個一星期內着色一次。如果有人能夠幫助，我會非常感激，因爲它的證明超越了我。

Answer 1

您可以使用它來獲取的開始和結束日期之間的日期，格式爲「YYYY-MM-DD」

var formatInt = function (i) { 
    if (i < 10) return "0" + i; 
    return i; 
}; 
var format = function (d) { 
    var date = d.getDate(); 
    var month = d.getMonth() + 1; 
    var year = d.getFullYear(); 
    return year + "-" + formatInt(month) + "-" + formatInt(date); 
}; 
var getDates = function (start, end) { 
    var current = new Date(start); 
    var finish = new Date(end); 
    var result = []; 

    do { 
     current.setDate(current.getDate() + 1); 
     result.push(format(current)); 
    } while (current < finish); 

    return result; 
}; 

然後你可以這樣做：

var start = item.gd$when[0].startTime; 
var end = item.gd$when[0].endTime; 

var dates = getDates(start, end).map(function toId(date) { return "#" + date }).join(","); 
$(dates).css('background', 'green');