@bitovi/calendar-events

0.0.10 • Public • Published

@bitovi/calendar-events

The @bitovi/calendar-events package exports a <calendar-events> custom element that lists events loaded from a google calendar.

Use it like:

<calendar-events
	api-key="AIzaSyBsNpdGbkTsqn1BCSPQrjO9OaMySjK5Sns"
	calendar-id="jupiterjs.com_g27vck36nifbnqrgkctkoanqb4@group.calendar.google.com"
	event-count="3"
	show-recurring
></calendar-events>

Attributes

api-key

required

Set this to a google api key.

calendar-id

required

The calendar whose events will be displayed.

event-count

The total number of events to display. This defaults to 10.

show-recurring

If present, this will include recurring events.

HTML

The default html output looks like the following:

<calendar-events>
	<div class='event-header'>
		<div class='event-summary'><a class='event-url event-title'></a></div>
		<div class='event-group'></div>
		<div class='event-date'></div>
		<div class='event-location'></div>
		<div class='event-body'></div>
	</div>
	<div class='event-footer'><a class='event-url'>View Event</a></div>
	...
</calendar-events>

You can customize it by adding it to a <template> within your page:

<calendar-events>
	<template>
		<a class='event-url'>
			<h1 class='event-title'></h1>
			<p class='event-body'></p>
		</a>
	</template>
</calendar-events>

Package Sidebar

Install

npm i @bitovi/calendar-events

Homepage

bitovi.com

Weekly Downloads

2

Version

0.0.10

License

MIT

Unpacked Size

17.6 kB

Total Files

14

Last publish

Collaborators

  • bmomberger-bitovi
  • janebitovi
  • kyle-n
  • bitovi-os
  • bitovi-core-os
  • mickmcgrath13
  • phillipskevin
  • tehfedaykin
  • rlmcneary2
  • mhaynie_bitovi
  • fabioemoutinho
  • christopherjbaker
  • justinbmeyer
  • cherif_b
  • alishouman