asrob-uc3m / asrob-uc3m.github.io

Nuestra web
https://asrob.uc3m.es
MIT License
4 stars 0 forks source link

Displaying Upcoming Events From a Google Calendar in Web #21

Open jgvictores opened 6 years ago

jgvictores commented 6 years ago

La idea es evitar varios commits semanales que son simplemente para actualizar la fecha de la reunión.

https://kevin.deldycke.com/2012/07/displaying-upcoming-events-google-calendar-javascript/

From @jgvictores on June 22, 2018 17:24 Copied from original issue: asrob-uc3m/actas#152

jgvictores commented 6 years ago

Public .ics link: https://calendar.google.com/calendar/ical/e97mebpnhjcq8pbl28plc8l3is%40group.calendar.google.com/public/basic.ics

jgvictores commented 6 years ago

Getting a Forbidden Error 403 using method in post mentioned in the description (which was from 2011).

From https://productforums.google.com/forum/#!topic/calendar/mZSk3FXR_KY (2012) we read:

As Google announced back in November 2011 and then again in June of this year, v1 and v2 have been deprecated. Therefore you need to use v3 to get your event lists. Unfortunately it appears that with v3, obtaining an API key is now mandatory. Here's the v3 documentation for getting a list of events from a Google calendar.

Let's check out v3!

jgvictores commented 6 years ago

https://developers.google.com/calendar/quickstart/js works nicely, but must

jgvictores commented 6 years ago

Much better:

      function listCals() {
        gapi.client.calendar.calendarList.list({
          'maxResults': 10,
        }).then(function(response) {
          var events = response.result.items;
          console.dir(events);
          appendPre('CalendarIDs:');
          if (events.length > 0) {
            for (i = 0; i < events.length; i++) {
              // var event = events[i];
              appendPre(events[i].id);
            }
          } else {
            appendPre('No calendarIDs found.');
          }
        });
      }
jgvictores commented 5 years ago

...where we discover the private/secret calendar ID xxxxxxxxxxxxxx@group.calendar.google.com, which can actually be seen as commented on these instructions to embed a calendar:

  1. On a computer, open Google Calendar. You can only get the code to embed in your website from a computer, not the Google Calendar app.
  2. In the top right, click Settings icon > Settings
  3. On the left side of the screen, click the name of the calendar you want to embed.
  4. In the "Integrate calendar" section, copy the iframe code displayed.
  5. Under the embed code, click Customize.
  6. Choose your options, then copy the HTML code displayed.
jgvictores commented 5 years ago

https://stackoverflow.com/questions/13651017/accessing-google-calendar-api-without-authorization-via-javascript

jgvictores commented 5 years ago

https://github.com/thanpolas/calendarth

jgvictores commented 5 years ago

Previous code required too much auth. Jquery/AJAX was not working, but CORS does work.

<!DOCTYPE html>
<html>
<body>

<h2>Using the XMLHttpRequest Object</h2>

<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>

<script>
function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "https://www.googleapis.com/calendar/v3/calendars/xxxxxxxxxxxxxx@group.calendar.google.com/events?key=xxxxxxxxxxxxxxxxxxxxxx", true);
  xhttp.send();
}
</script>

</body>
</html>
jgvictores commented 5 years ago

https://developers.google.com/calendar/pricing

jgvictores commented 5 years ago

https://stackoverflow.com/questions/21939713/hide-api-key-for-a-github-page

jgvictores commented 5 years ago

And from https://docs.simplecalendar.io/google-api-key/ we read: "To read events from your public Google Calendars you’ll need create a Google API key and save within your plugin settings."

jgvictores commented 5 years ago

Seems like key is restricted to Calendar, but cannot have finer granularity on control other than:

screenshot from 2018-12-11 18-05-32

This is, no read-only permissions, which would be interesting.

More at: https://cloud.google.com/docs/authentication/api-keys?hl=en&visit_id=636801482896800161-1151496171&rd=1

jgvictores commented 5 years ago

Also have been looking at "github pages hide api key", some interesting posts:

jgvictores commented 5 years ago

https://github.com/github/platform-samples/tree/master/hooks

jgvictores commented 5 years ago

Public URL from https://github.com/asrob-uc3m/asrob-uc3m.github.io/issues/21#issuecomment-406341733 + (https://pypi.org/project/ics/ = https://icspy.readthedocs.io/en/stable/ = https://github.com/C4ptainCrunch/ics.py) looks good.

jgvictores commented 5 years ago
from ics import Calendar
from urllib.request import urlopen

import arrow
from datetime import datetime

import locale
locale.setlocale(locale.LC_ALL, 'es_ES.utf8') # es-ES, check `locale -a` 

url = "https://calendar.google.com/calendar/ical/e97mebpnhjcq8pbl28plc8l3is%40group.calendar.google.com/public/basic.ics"
calendar = Calendar(urlopen(url).read().decode())

now = arrow.get(datetime.now())
events = list(calendar.timeline.start_after(now))

for event in events:
    if (event.name == 'Reunión Robot Devastation'): # 'Rd Meeting'
        dt = event.begin.datetime
        print(dt.strftime("%A %d de %B a %H:%M") + " en " + event.location)