Widget:GoogleCalendarEventList

From neicext
Jump to navigation Jump to search

This widget renders events from a public Google calendar as a definitions list, client side, using ajax and JSON and jQuery.

Author: Joel Hedlund, NeIC

Installation

  1. Install the Widgets mediawiki extension.
  2. Upload a calendar icon to your wiki (e.g. http://commons.wikimedia.org/wiki/File:Ico-calendario.gif).
  3. Copy this page to Widget:GoogleCalendarEventList on your wiki.
  4. Edit it to point calendaricon to your calendar icon (e.g. https://wiki.neic.no/w/ext/img_auth.php/7/78/Calendar-icon.gif).

Usage

{{#widget:GoogleCalendarEventList
 | calendarid = Id of your public google calendar.
 | key = Browser API access key to access your calendar (see below).
 | past = Optional. Display past events. Default is false, eg show future events.
 | hashtags = Optional. Only show events with these hashtags; comma separated list, case insensitive. Default (no tags) means show all events.
 | linkpref = Optional. Specify what the event title should prefer to link to (see below).
 | hideblurb = Optional. Do not display the event oneliner (if any). Default is false, eg show the blurb.
 | hidedetails = Optional. Do not allow clicking to display event details (if any). Default is false, eg allow click to display details (if any).
 }}

Key

The key can be generated in the Google developer console. The below explanation is from here: http://stackoverflow.com/questions/26982523/google-calendar-api-v3-access-not-configured

  1. Create a project
    Do that by going to the Google Developer Console and clicking Create Project. I was confused by this because my application is entirely front-end, and I didn't think I needed Google Developer project. I was wrong; I needed a project to perform the next steps.
  2. Create an API key for your project
    After creating the project, click on the project name and navigate to APIs & auth > Credentials. Under "Public API access", click Create new key > {KEY_TYPE} > Create; in my case {KEY_TYPE} was Browser key since I have an entirely front-end application. Skip filling in referers for now. This should create you an API key that you insert into the URL above (where it says {API_KEY}.
  3. Add referers
    If you've made it this far, you should see the error OP was talking about. The reason you get this error is that even though the calendar is public, Google only allows requests from specified domains. So I could publish my calendar's ID and even my API key, and another developer would not be able to access my calendar programmatically without me allowing that.

    To resolve this, click Edit allowed referers—under APIs & auth > Credentials—and add (1) the name of the domain that will be making the request to the API and (2) if you're developing locally http://localhost:{PORT}/*. Make sure you add the wildcard at the end.
  4. Make an HTTP request from an allowed domain
    After all of this configuration, you'll still get an error if you just paste the URL into your browser. This is because the request has to come from one of the domains you just allowed. Just make the request from whatever application you're building.

Linkpref

Default: wikipage,wiki,webpage,website,homepage,site,event,info,more information,googlecalendar.

Linkpref determines what keywords to look for and in what order, when scanning event descriptions for suitable title links. Such a link must be given on the form "keyword: url" on a line of its own. For example: 

Wikipage: http://wiki.neic.no/wiki/NeIC2015

The special keyword googlecalendar tells the widget to link to the event in Google calendar instead. First found will be used.

Format your events to display nice in the widget

  • Give a very concise title.
  • (Optional) provide a description.
    • The first line of the description is assumed to be a one line summary of the event. If you do not want to write such a summary, but still want to provide further details, please start the description with a blank line, and then go on and write whatever you like.
    • If you want, you can then follow this up with however many more lines of details as you like. Blank lines are also fine, use them if it makes things more readable. Web links and links to wiki pages for more details are useful to include. Please look at other events for examples.

The wiki widget hides the details part by default, but the user can still bring it up by clicking the "show/hide details" links.

A note on title links: this widget will try to make the title of each event a clickable link to more information on the event. To do this it will look through the description text for each event to find suitable links. In order for the widget to find a link it must be clearly marked, on the form "keyword: url" on a line of its own. For example: 

Wikipage: http://wiki.neic.no/wiki/NeIC2015
Website: http://www.uppnex.se/events/eInfraMPS2015
Event: http://www.nordicehealth.se/attachements/flyer_NIASC_mtg_Jan2015_b.pdf

#Linkpref determines what keywords to look for and in what order. First found will be used.


Retrieved from "https://wiki.neic.no/w/ext/index.php?title=Widget:GoogleCalendarEventList&oldid=10989"