Google Calendar - Event Date, not first instance date

Question

I'm creating an online agenda that pulls events from a google calendar, and it is currently pulling the start date of only the first instance of a repeating event. Is there anything I can do with the api and javascript to show the actual date of each event, not just the first instance?

My HTML:

<div ng-controller="calCtrl">
<div ng-repeat="event in events">
  <div class="event-row">
    <span id="eventTitle">{{ event.summary }}</span>
    <span id="eventDate">{{ event.start.date | date:'EEE M/d/yyyy' }}{{ event.start.dateTime | date:'EEE M/d/yyyy' }}</span> // 
    <span id="eventTime">{{event.start.dateTime | date:'H:mm' }}</span>
    <span id="eventLocation">{{event.location}}</span>
  </div>
</div>

My JS so far:

var app = angular.module('eventApp', []);

app.factory('calendarServ', ['$http', function($http) {
  var today = (new Date()).toISOString();
  var APIKey = "___________";
  var url = "https://www.googleapis.com/calendar/v3/calendars/–––––––/events?maxResults=30&&timeMin=" + today + "&key=" + APIKey;

  return $http.get(url)
    .success(function(data) {
      return data;
    })
    .error(function(err) {
      return err;
    });
}]);

app.controller('calCtrl', ["$scope", "$http", "calendarServ", function($scope, $http, calendarServ) {
  $scope.events;

  calendarServ.success(function(data) {
    $scope.events = data.items;
  });
}]);

If you haven't already (perhaps you put in a dummy one or otherwise altered it), you might want to redact your API key from your code snippet. — WGriffing, Mar 03 '20 at 19:25

score 0 · Answer 1 · answered Mar 24 '20 at 10:43

You can fetch the actual data of recurring events' instances by making a request to the following API endpoint:

https://www.googleapis.com/calendar/v3/calendars/{calendarId}/events/{eventId}/instances

You will get an object with the recurring event's instances, and their details such as start time, end time, etc.

Example response:

{
      "status": "confirmed", 
      "kind": "calendar#event", 
      "end": {
        "timeZone": "Europe/Madrid", 
        "dateTime": "2020-04-07T12:30:00+02:00"
      }, 
      "created": "2020-03-24T10:24:37.000Z", 
      "iCalUID": "xxxxxxxxxxxxxxxxxx", 
      "reminders": {
        "useDefault": true
      }, 
      "htmlLink": "https://www.google.com/calendar/event?eid=-x-x-x-x-x-x-x-x-x-x-x-x--x-x-x", 
      "sequence": 0, 
      "updated": "2020-03-24T10:24:37.166Z", 
      "summary": "Test recurring event", 
      "start": {
        "timeZone": "Europe/Madrid", 
        "dateTime": "2020-04-07T11:30:00+02:00"
      }, 
      "etag": "\"3170xxxxdddd2000\"", 
      "originalStartTime": {
        "timeZone": "Europe/Madrid", 
        "dateTime": "2020-04-07T11:30:00+02:00"
      }, 
      "recurringEventId": "50qkopajasmentalescsql", 
      "organizer": {
        "self": true, 
        "email": "fatt.miks@egfreeed.eu"
      }, 
      "creator": {
        "self": true, 
        "email": "fatt.miks@egfreeed.e"
      }, 
      "id": "50qkoeauc7jpn3nmelih5loitmustB&wor00Z"
    }

Note: Check out the OAuthPlayground to test out the Google APIs.

References: - Calendar API Event instances

Google Calendar - Event Date, not first instance date

1 Answers1