{"id":19151429,"url":"https://github.com/sc5/mozaik-ext-calendar","last_synced_at":"2025-05-07T05:24:28.728Z","repository":{"id":29991767,"uuid":"33539186","full_name":"SC5/mozaik-ext-calendar","owner":"SC5","description":"Google Calendar widgets for Mozaïk dashboard","archived":false,"fork":false,"pushed_at":"2018-02-23T05:41:31.000Z","size":50,"stargazers_count":6,"open_issues_count":2,"forks_count":6,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-14T07:16:02.823Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SC5.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-07T11:30:23.000Z","updated_at":"2020-04-27T07:27:48.000Z","dependencies_parsed_at":"2022-07-13T19:09:46.110Z","dependency_job_id":null,"html_url":"https://github.com/SC5/mozaik-ext-calendar","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SC5%2Fmozaik-ext-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SC5%2Fmozaik-ext-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SC5%2Fmozaik-ext-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SC5%2Fmozaik-ext-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SC5","download_url":"https://codeload.github.com/SC5/mozaik-ext-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252819545,"owners_count":21809037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T08:14:41.595Z","updated_at":"2025-05-07T05:24:28.706Z","avatar_url":"https://github.com/SC5.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mozaik-ext-calendar\n\nGoogle Calendar widgets for Mozaïk dashboard.\n\n![preview-page-views](https://raw.githubusercontent.com/SC5/mozaik-ext-calendar/master/previews/next_event.png)\n\n**Table of contents**\n\u003c!-- MarkdownTOC depth=0 autolink=true bracket=round --\u003e\n\n- [Setup](#setup)\n- [Widget: calendar.next_event](#widget-calendarnext_event)\n  - [parameters](#parameters)\n  - [usage](#usage)\n- [Changelog](#changelog)\n- [License](#license)\n- [Credit](#credit)\n\n\u003c!-- /MarkdownTOC --\u003e\n\n\n## Setup\n\nFollow the steps to install and configure widget into dashboard\n\n- Install modules from npmjs:\n\n  ```shell\n  npm install mozaik-ext-calendar\n  ```\n\n- Register client api by adding to dashboard `app.js`:\n\n  ```javascript\n  import calendar from 'mozaik-ext-calendar/client';\n  mozaik.bus.registerApi('calendar', calendar);\n  ```\n\n- Register widgets by adding to dashboard ``src/App.jsx``:\n\n  ```javascript\n  import calendar from 'mozaik-ext-calendar';\n  mozaik.addBatch('calendar', calendar);\n  ```\n\n- Build the dashboard:\n\n  ```shell\n  npm run build-assets\n  ```\n\n- Create Google service account for reading the calendar events\n\n  - Create a project and service account in Google Developer Console if you don't have one yet\n  - Enable API: Calendar API\n  - Collect service email and .p12 file\n  - Convert .p12 file into .PEM\n  - Configure service key and .PEM file into dashboard `config.js` file and environment variables / `.env` file:\n\n    ```javascript\n    api: {\n      calendar: {\n        googleServiceEmail: process.env.GOOGLE_SERVICE_EMAIL,\n        googleServiceKeypath: process.env.GOOGLE_SERVICE_KEYPATH\n      }\n    }\n    ```\n\n- Share the calendar(s) and collect id(s)\n\n  - Login to Google Calendar\n  - Select calendar you want to show in dashboard \u003e **Share this Calendar**\n  - Add service email address to list\n  - Collect the **Calendar ID** from **Calendar Details** page (needed in widget configuration)\n\n- Configure widgets (see next sections)\n\n- Run the dashboard:\n\n  ```shell\n  npm start\n  ```\n\n## Widget: calendar.next_event\n\nShow next upcoming or ongoing event from calendar(s).\nIf multiple calendars are defined, the event closest to current\nmoment is shown.\n\n![preview-page-views](https://raw.githubusercontent.com/SC5/mozaik-ext-calendar/master/previews/next_event.png)\n\n### parameters\n\nkey           | required | description\n--------------|----------|---------------\n`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' }]`*\n`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*\n\n### usage\n\n```javascript\n// dashboard config.js\n\n// Calendars variable for widget configuration\nvar calendars = [\n  { title: 'Meeting room 1', id: 'company.com_123@group.calendar.google.com' },\n  { title: 'Meeting room 2', id: 'company.com_321@group.calendar.google.com' }\n];\n\nmodule.exports = {\n  // Configure api\n  api: {\n    calendar: {\n      googleServiceEmail: process.env.GOOGLE_SERVICE_EMAIL,\n      googleServiceKeypath: process.env.GOOGLE_SERVICE_KEYPATH\n    },\n    // Other services ...\n  },\n\n  // Set widgets\n  dashboards: [\n    columns: 2,\n    rows: 2,\n    // See next sections for details\n    widgets: [\n      {\n        type: 'calendar.next_event',\n        calendars: calendars,\n        ordinal: 0, // closest event to current moment\n        columns: 1, rows: 1,\n        x: 0, y: 0\n      },\n      {\n        type: 'calendar.next_event',\n        calendars: calendars,\n        ordinal: 1, // event after closest one\n        columns: 1, rows: 1,\n        x: 1, y: 0\n      },\n    ]\n  ]\n}\n```\n\n\n## Widget: calendar.list\n\nList upcoming events in a list\n\n![preview-page-views](https://raw.githubusercontent.com/SC5/mozaik-ext-calendar/master/previews/list.png)\n\n### parameters\n\nkey           | required | description\n--------------|----------|---------------\n`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' }]`*\n`title`       | no       | *Title to show. Defaults to `Calendar`*\n`dateFormat`  | no       | *Show event start time with Moment.js supported format. Default: `LL`*\n`limit`       | no       | *Maximum number of events to show. Defaults to `0` which means no limit*\n\n### usage\n\n```javascript\n  // Widget usage\n  dashboards: [\n    columns: 2,\n    rows: 2,\n    widgets: [\n      {\n        type: 'calendar.list',\n        calendars: calendars,\n        title: 'Upcoming events',\n        dateFormat: 'LLL',\n        limit: 5,\n        columns: 1, rows: 1,\n        x: 0, y: 0\n      }\n    ]\n  ]\n}\n```\n\n## Changelog\n\n### Release 0.3.0\n\n- New widget: List\n\n### Release 0.2.0\n\n- Updated support against Mozaik 1.4\n- Linted code\n- Moved to ES6\n\n### Release 0.1.3\n\n- Added missing almanac.js file in repo\n\n### Release 0.1.2\n\n- Added previews in documentation\n\n### Release 0.1.1\n\n- Fixed the documentation\n\n### Release 0.1.0\n\n- Initial release\n\n## License\n\nDistributed under the MIT license\n\n## Credit\n\nThe module is backed by [SC5](http://sc5.io/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsc5%2Fmozaik-ext-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsc5%2Fmozaik-ext-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsc5%2Fmozaik-ext-calendar/lists"}