mozaik-ext-calendar
Google Calendar widgets for Mozaïk dashboard.
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
:;mozaikbus; -
Register widgets by adding to dashboard
src/App.jsx
:;mozaik; -
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: processenvGOOGLE_SERVICE_EMAILgoogleServiceKeypath: processenvGOOGLE_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: '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 configurationvar 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' ; moduleexports = // Configure api api: calendar: googleServiceEmail: processenvGOOGLE_SERVICE_EMAIL googleServiceKeypath: processenvGOOGLE_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: '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.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