Search code examples
javascriptgoogle-calendar-apidatetime-format

Outputting AM/PM from a Google Calendar onto an HTML page using Javascript

I'm using a Google Calendar to display games from a hockey league. As part of this, I am also pulling some details from those Google Calendar events and displaying them on the individual team pages (HTML) for each of the teams in that league. I used to be able to "hard-code" PM into the time output since all of the games were in the afternoon. However this season there will be some morning games, and I will no longer be able to do that.

For now, I'm just outputting the time in 24-hour format. But ideally I would prefer to display the 12-hr format with the AM or PM suffix.

I've attached the code I am currently using below. Can anyone offer a solution to disply the AM or PM as part of this code snippet?

    <script>
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
    var myObj, i, x = "";
    myObj = JSON.parse(this.responseText, function (key, value){
    if (key == "dateTime") {

        function unix_to_readable(value) {
        var date = new Date(value) ;
        return ('0' + (date.getMonth()+1)).slice(-2) + '/'
             + ('0' + date.getDate()).slice(-2) + '/'
             + date.getFullYear() + '<br/>' 
            + date.getHours() % 12 
            + ':' + ('0' + date.getMinutes()).slice(-2) 
            + ' PM'; 
        }
        return unix_to_readable(value);
        } 
    
        else {
            return value;
        }
    }
    );

    for (i = 0; i < myObj.items.length; i++) 
    {
      x += "<tr class='TableHeader'><td colspan='2' align='center'>" + myObj.items[i].summary + "</td></tr><tr><td align='center'><b>" + myObj.items[i].start.dateTime + "</b></td><td align='center' style='font-size:12px'>" + myObj.items[i].location + "</td></tr><tr><td colspan='2'></td></tr>";
    }
    document.getElementById("demo").innerHTML = x;  }
    };

    xmlhttp.open("GET", "https://www.googleapis.com/calendar/v3/calendars/9lh231pkuunmglga33vso1cnv8%40group.calendar.google.com/events?q=" + q + "&timeMin=2023-09-01T01:00:00-05:00&timeMax=2024-03-01T01:00:00-05:00&singleEvents=True&orderBy=startTime&key=AIzaSyBFDfMVc8WUWgXluMpYr4-OVkUn1EyIbuM", true);
    xmlhttp.send();
    </script>
Solution

  • In your script, how about the following modification? In this modification, your unix_to_readable is modified.

    From:

    function unix_to_readable(value) {
var date = new Date(value) ;
return ('0' + (date.getMonth()+1)).slice(-2) + '/'
     + ('0' + date.getDate()).slice(-2) + '/'
     + date.getFullYear() + '<br/>' 
    + date.getHours() % 12 
    + ':' + ('0' + date.getMinutes()).slice(-2) 
    + ' PM'; 
}

    To:

    function unix_to_readable(value) {
  var date = new Date(value);
  return ('0' + (date.getMonth() + 1)).slice(-2) + '/'
    + ('0' + date.getDate()).slice(-2) + '/'
    + date.getFullYear() + '<br/>'
    + date.toLocaleString("en-US", { minute: "2-digit", hour: "numeric", hour12: true });
}

    or

    function unix_to_readable(value) {
  var date = new Date(value);
  return date.toLocaleString("en-US", { day: "2-digit", month: "2-digit", year: "numeric" }) + '<br/>'
  + date.toLocaleString("en-US", { minute: "2-digit", hour: "2-digit", hour12: true });
}

    • Please modify en-US to your actual situation.

    • If you want to add 0 to the hour, please modify hour: "numeric" to hour: "2-digit".

    References: