mozaik-ext-calendar

Google Calendar widgets for Mozaïk dashboard.

Table of contents

• Setup
• Widget: calendar.next_event
  • parameters
  • usage
• Changelog
• License
• Credit

Setup

Follow the steps to install and configure widget into dashboard

• Install modules from npmjs:

  npm install mozaik-ext-calendar

• Register client api by adding to dashboard app.js:

  import calendar from 'mozaik-ext-calendar/client';
  mozaik.bus.registerApi('calendar', calendar);

• Register widgets by adding to dashboard src/App.jsx:

  import calendar from 'mozaik-ext-calendar';
  mozaik.addBatch('calendar', calendar);

• Build the dashboard:

  npm run build-assets

• Create Google service account for reading the calendar events

  • Create a project and service account in Google Developer Console if you don't have one yet

  • Enable API: Calendar API

  • Collect service email and .p12 file

  • Convert .p12 file into .PEM

  • Configure service key and .PEM file into dashboard config.js file and environment variables / .env file:

    api: {
      calendar: {
        googleServiceEmail: process.env.GOOGLE_SERVICE_EMAIL,
        googleServiceKeypath: process.env.GOOGLE_SERVICE_KEYPATH
      }
    }

• Share the calendar(s) and collect id(s)

  • Login to Google Calendar
  • Select calendar you want to show in dashboard > Share this Calendar
  • Add service email address to list
  • Collect the Calendar ID from Calendar Details page (needed in widget configuration)

• Configure widgets (see next sections)

• Run the dashboard:

  npm start

Widget: calendar.next_event

Show next upcoming or ongoing event from calendar(s). If multiple calendars are defined, the event closest to current moment is shown.

parameters

key | required | description --------------|----------|--------------- calendars | yes | A list of calendar ids to read. Each entry must have id and title. Example: [{ id: '[email protected]', title: 'User' }, { id: '[email protected]', title: 'Another' }] ordinal | no | The ordinal of the calendar event. 0 (default) shows the next/current, 1 shows the next after current etc. Handy with meeting room reseravation calendars

usage

// dashboard config.js

// Calendars variable for widget configuration
var calendars = [
  { title: 'Meeting room 1', id: '[email protected]' },
  { title: 'Meeting room 2', id: '[email protected]' }
];

module.exports = {
  // Configure api
  api: {
    calendar: {
      googleServiceEmail: process.env.GOOGLE_SERVICE_EMAIL,
      googleServiceKeypath: process.env.GOOGLE_SERVICE_KEYPATH
    },
    // Other services ...
  },

  // Set widgets
  dashboards: [
    columns: 2,
    rows: 2,
    // See next sections for details
    widgets: [
      {
        type: 'calendar.next_event',
        calendars: calendars,
        ordinal: 0, // closest event to current moment
        columns: 1, rows: 1,
        x: 0, y: 0
      },
      {
        type: 'calendar.next_event',
        calendars: calendars,
        ordinal: 1, // event after closest one
        columns: 1, rows: 1,
        x: 1, y: 0
      },
    ]
  ]
}

Widget: calendar.list

List upcoming events in a list

parameters

key | required | description --------------|----------|--------------- calendars | yes | A list of calendar ids to read. Each entry must have id and title. Example: [{ id: '[email protected]', title: 'User' }, { id: '[email protected]', title: 'Another' }] title | no | Title to show. Defaults to Calendar dateFormat | no | Show event start time with Moment.js supported format. Default: LL limit | no | Maximum number of events to show. Defaults to 0 which means no limit

usage

  // Widget usage
  dashboards: [
    columns: 2,
    rows: 2,
    widgets: [
      {
        type: 'calendar.list',
        calendars: calendars,
        title: 'Upcoming events',
        dateFormat: 'LLL',
        limit: 5,
        columns: 1, rows: 1,
        x: 0, y: 0
      }
    ]
  ]
}

Changelog

Release 0.3.1

• Handle calendar reading error gracefully

Release 0.3.0

• New widget: List

Release 0.2.0

• Updated support against Mozaik 1.4
• Linted code
• Moved to ES6

Release 0.1.3

• Added missing almanac.js file in repo

Release 0.1.2

• Added previews in documentation

Release 0.1.1

• Fixed the documentation

Release 0.1.0

• Initial release

License

Distributed under the MIT license

Credit

The module is backed by SC5