Skip to content
Plugin to get easy the content of your Google calendar as a list in your Kirby-website.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Plugin to get easy the content of your Google calendar as a list in your Kirby-Website.

Requirements: Kirby CMS >= v3.0.1


There are three ways to get the plugin:


Download and copy this repository to /site/plugins/. That's it. You're done.

Git submodule

Go to the root of your Project, copy git submodule add´google-calendar-plugin.git site/plugins/google-calendar-plugin in your command line and press enter. Done. The plugin appears in site/plugins.


Copy composer require benediktengel/google-calendar-plugin to your command line and press enter. Done. Also here, the plugin appears in site/plugins.


1. Set your API-Key and your calendarID in your site/config/config.php

'' => 'YOUR-API-KEY',

Need Help? How to get them.

2. Place the snippet in your template

Find the right place for the calendar and add <?= snippet('calendar') ?>

3. Be glad

You did it.


  • Set your API-Key:' => 'YOUR-API-KEY'

    • required
  • Set your calendarID: '' => 'YOUR-CALENDAR-ID'

    • required
  • Change the date format: '' => 'd.m.Y'

    • default: 'd.m.Y'
    • optional
  • Change the time format: '' => 'H:i'

    • default: 'H:i'
    • optional
  • What attributes of the events do you want: '' => []

    • default: ['title', 'dateStart','timeStart', 'dateEnd', 'timeEnd', 'description', 'location', 'url']
    • possible:
      • 'title'
      • 'dateStart'
      • 'timeStart'
      • 'dateEnd'
      • 'timeEnd'
      • 'description'
      • 'location'
      • 'url'
    • optional
  • Show only upcoming events: '' => true

    • default: true
    • optional
    • works only if attributes are set to default or the attribute dateEnd is set.
  • Shorten the displayed description: '' => '300'

    • default: '300'
    • optional
    • works only if cutDescription is true
  • Don't short the description: '' => true

    • default: true
    • optional
  • Name of the link: '' => 'Show more.'

    • default: 'Show more.'
    • optional
  • Style it!

    Each Event comes like this, so you can use the classes to style:

    <div class="calendar-event">
        <h4 class="calendar-title">
            New Year's Eve party
        <p class="calendar-datetime">
            <span class="calendar-start">
                31.12.2018 20:00
            </span> -
            <span class="calendar-end">
                01.01.2019 08:00
        <p class="calendar-location">
            My place
        <p class="calendar-description">
            Come to celebrate the new year together.
            <a class="calendar-link">
                Show more.


  • Section for the settings
  • month view
  • week view

Wishes? Write an issue and use the label enhancement.


Write an issue and maybe I can help you.




Benedikt Engel, 2019

Want to support me? If yes, buy me a coffee ☕. Beer is also okay🍻.


You can’t perform that action at this time.