@bitovi/calendar-events

@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>