Package Exports
- @bitovi/calendar-events
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@bitovi/calendar-events) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@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>