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 的日历表：

它以日期格式 YYYY-MM-DD 为日历上的每个日期提供一个唯一的 id，这似乎是有效的。那是为下面的 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');