Stencil Google Calendar Webcomponent

This is a Web Component that displays your Google Calendar events.

This Web Component is built using StencilJS.

Usage

<zijderoute-calendar
  service-account-email="{YOUR_GOOGLE_SERVICE_ACCOUNT_EMAIL_ADRESS}"
  calendar-id="{YOUR_GOOGLE_CALENDAR_EMAIL_ADRESS}"
  token-sign-url="{YOUR_BACK_END_URL}"
  include-public-events=""
/>

token-sign-url defaults to http://localhost:3000 which is used by the npm run start-server example include-public-events defaults to '' which means false. Please by advised that "false" will evaluate to true

service-account-email

Unfortunately, it is not possible to just simply enter your email adress to access your calendar events.

In order to access your calendar events you must set up a Google Service Account. This might seem as a hassle at first sight, but if you have ever used a Google API Key (for Maps or any other Google service), it is actually pretty easy.

Once you created a service account be sure to copy the email adress and save the JSON file with your private key.

Note: You do not need to generate an API key for Google Calendar.

calendar-id

The calendar-id is the (Google) email address whose calendar you'd like to access.

In order to actually access the calendar events you need to share your calendar with your service-account-email.

token-sign-url

This is your back-end route which generates a signed RS-256 JWT using your service-account's private key.

A very simple examples to do this using NodeJS and Express can be found under /server. Here you can also find the schema the JWT payload has to adhere to.

NOTE: Please add your own /server/secrets.json containing your "PRIVATE_KEY" if you'd like to use this example

NOTE: When adding your /server/secrets.json PRIVATE_KEY please do not remove any '\n' from the string

Adding this component to your project

Script tag

TODO replace link

• Put a script tag similar to this <script src='https://unpkg.com/[email protected]/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install my-component --save
• Put a script tag similar to this <script src='node_modules/my-component/dist/mycomponent.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install my-component --save
• Add an import to the npm packages import my-component;
• Then you can use the element anywhere in your template, JSX, html etc

Development

yarn install

npm run start-server

(in a different terminal) npm start

See stencil-component-starter/readme.md for more documentation such as generating a new production build.