Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

mozaik-ext-calendar

Google Calendar widgets for Mozaïk dashboard.

preview-page-views

Table of contents

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.

preview-page-views

parameters

key required description
calendars yes A list of calendar ids to read. Each entry must have id and title. Example: [{ id: 'user.name@gmail.com', title: 'User' }, { id: 'another.user@gmail.com', 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: 'company.com_123@group.calendar.google.com' },
  { title: 'Meeting room 2', id: 'company.com_321@group.calendar.google.com' }
];

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

preview-page-views

parameters

key required description
calendars yes A list of calendar ids to read. Each entry must have id and title. Example: [{ id: 'user.name@gmail.com', title: 'User' }, { id: 'another.user@gmail.com', 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.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

About

Google Calendar widgets for Mozaïk dashboard

Resources

License

Packages

No packages published
You can’t perform that action at this time.