nelsonsilva / meeting-room-dashboard

Basic LitElement web application that displays Google Calendar events.

Meeting Room Dashboard

Try it here!

Settings configuration

{
  "auth": {
    "apiKey": "[your API key here]",
    "clientId": "[your client ID here]",
    "discoveryDocs": [
      "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"
    ],
    "scope": "https://www.googleapis.com/auth/calendar.readonly"
  },
  "interval": 10000,
  "calendars": [
    {
      "label": "Room 1",
      "id": "[Room 1 calendar ID here]"
    },
    {
      "label": "Room 2",
      "id": "[Room 2 calendar ID here]"
    }
  ]
}

Configuring Google Calendar API credentials

1. Access Google APIs console.
2. Create a new project (if you don't have one already).
3. In the Dashboard, click "ENABLE APIS AND SERVICES".
4. Select and enable "Google Calendar API".
5. In the Google Calendar API view, click "Credentials" on the left and then "Create credentials" > "API key". You will use this key in your settings.
6. Click "RESTRICT KEY".
   1. Name? meeting-room-dashboard.
   2. API restrictions? Restrict key: Google Calendar API.
7. In "OAuth consent screen":
   1. Application name? meeting-room-dashboard.
   2. Authorized domains? mnixo.github.io.
   3. Save.
8. Click "Create credentials" > "OAuth client ID".
   1. Application type? Web application.
   2. Name? meeting-room-dashboard.
   3. Authorized JavaScript origins:
      1. https://mnixo.github.io (for the GitHub pages hosted one)
      2. http://localhost:8081 (to run locally)
   4. Authorized redirect URIs:
      1. https://mnixo.github.io (for the GitHub pages hosted one)
      2. http://localhost:8081 (to run locally)
   5. Save. You will use the provided client ID in your settings.

Getting the id of a calendar

1. Go to your Google Calendar view.
2. On the left you'll find "My calendars" and "Other calendars", if you have any. You can add more calendars by searching in the "Meet with..." section.
3. Hovering a calendar, click the options icon and then "Settings".
4. Look for "Calendar ID".