jQuery - Display all dates between JSON .startTime & .endTime values

Question

I'm trying to get a php read-only calendar to display dates from a Google Calendar, using jQuery to apply color to the background of the relevant cells. Code for each calendar table looks like this:

<?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>

Which generates a calendar table that I've repeated x12:

It gives each date on the calendar a unique id in date format YYYY-MM-DD, which seems to be working. That is in preparation for the jQuery below (matches the JSON format in the XML), which is where I get stuck:

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

    });
  });

}

As you can see, I can get jQuery to use the .startTime/.endTime as the ID, which allows me to colour the individual dates. But I need to color up all the days between .startTime and .endTime (usually a whole week) in one go. They don't have to be different colors - I've just done that to highlight start/end date.

So what I'm looking for is the way to colour up the whole week in one hit. If anyone can help I'd be very grateful as its proving to be beyond me.

Ezequiel · Accepted Answer · 2014-01-30 16:36:47Z

1

You could use this to obtain the dates between the start and end date, formatted as "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;
};

You can then do something like:

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

edited Jan 30, 2014 at 16:36

answered Jan 29, 2014 at 20:42

Ezequiel

4065 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

theflyingant Over a year ago

Thanks for for taking the time to share this - its working pretty well but there's a problem. It works well when events all fall within the same month, but if they span over 2 months (ie. 26th April - 2nd May) it colors up only 1st May and also 1st June.

theflyingant Over a year ago

Sorry - I didn't explain that very well. For my example week above, it would colour up 26-30th April, also 1st May & 1st June.

Ezequiel Over a year ago

Hey, I'm pretty sure it's not this code the one that's doing that, you probably have an error with your ids, or another JS highlighting those dates. I just tried it in the chrome dev tools console. Just copy/paste there the date functions, and then paste this: var start = new Date('2014-04-26'); var end = new Date('2014-04-30'); getDates(start, end);. The result is: ["2014-04-25", "2014-04-26", "2014-04-27", "2014-04-28", "2014-04-29"], which is correct.

theflyingant Over a year ago

Thanks for getting back - I appreciate your help. Its still not working for me when a date spans across 2 different months, for example - April 26th, 27th, 28th, 29th, 30th, May 1st, 2nd?

Collectives™ on Stack Overflow

jQuery - Display all dates between JSON .startTime & .endTime values

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related