mdmullins/gridsome-source-google-calendar

Gridsome Source for Google Calendar

Source plugin for fetching events list from Google Calendar.

Requirements

Gridsome: >0.7.0

Install

yarn add gridsome-source-google-calendar

npm

npm install gridsome-source-google-calendar

How to use

You will need to generate a google api key here. The calendarId can be found in the calendar settings > integrate calendar.

You will also need to make your calendar viewable to the public to use the api credentials.

module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: 'gridsome-source-google-calendar',
      options: {
        apiKey: 'GOOGLE_API_KEY',
        calendarId: "GOOGLE_CALENDAR_ID",
        maxResults: 25,
        // default max is one year from now
        timeMax: maxDate.toISOString(),
        // default min is now
        timeMin: minDate.toISOString(),
        timeZone: "Europe/London",
        type: "googleCalendar",
        // type: 'TYPE_NAME', //Optional - default is googleCalendar. Used for graphql queries.
      }
    }
  ]
}

Example query on page template

<page-query>
  query MyData {
    allGoogleCalendar {
      edges {
        node {
          id
          title
        }
      }
    }
  }
</page-query>

To use data in page

<template>
  <div>
    {{ $page.allGoogleCalendar.node.id }}
  </div>
  <div>
    {{ $page.allGoogleCalendar.node.title }}
  </div>
</template>

Using Templates

To use this in a template first setup the template route in gridsome.config.js

module.exports = {
  siteName: 'Gridsome',
  plugins: [
    {
      use: 'gridsome-source-google-calendar',
      options: {
        apiKey: 'GOOGLE_API_KEY',
        calendarId: "GOOGLE_CALENDAR_ID",
        maxResults: 25,
        // default max is one year from now
        timeMax: maxDate.toISOString(),
        // default min is now
        timeMin: minDate.toISOString(),
        timeZone: "Europe/London",
        type: "googleCalendar",
        // type: 'TYPE_NAME', //Optional - default is googleCal. Used for graphql queries.
      }
    }
  ],
  templates: {
    googleSheet: [
      {
        path: '/:id',
        component: './src/templates/googleCalendar.vue'
      }
    ]
  }
}

Example template in src/template/googleSheet.vue

<template>
  <layout>
    <div>{{$page.googleCal.title}}</div>
    <div>{{$page.googleCal.body}}</div>
  </layout>
</template>

<page-query>
query Post ($path: String!) {
  googleCal (path: $path) {
    title
    body
  }
}
</page-query>