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

您可以使用它来获取开始日期和结束日期之间的日期，格式为＆＃34; YYYY-MM-DD＆＃34;

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');

jQuery - 显示JSON .startTime和;之间的所有日期。 .endTime值

1 个答案: