@planningcenter/connected-events

@planningcenter/connected-events

A package that allows a product to add a dropdown to a records #show page. This dropdown will take care of finding any connected events for the record and display links to those connected records in other products.

"Add to Calendar" button

The dropdown will show an Add to Calendar in the following situation:

• On load, we check to see if you're in a product that supports request forms (currently just Groups)
• ... and that you're viewing an event that starts in the future
• If so, we ask Calendar if there are any forms associated with the group type you're currently on
• If so, we show the button.

Clicking "Add to Calendar" will log in to CCW and redirect to the event request form, passing through props to prefill the form. See the RequestFormParams type for details on prop shape.

Usage

yarn add @planningcenter/connected-events

Adding the dropdown

import { ConnectedEventsDropdown } from "@planningcenter/connected-events"
...

  <ConnectedEventsDropdown
    dates={["2022-11-25T13:04:00.000-08:00"]}
    productName="calendar"
    localRecordId={id}
    localRecordType="event"
    extra: {}
  />

Props

• dates (optional): An array of date strings in iso8601 associated with your record
• productName: The name of the product utilizing the component
• localRecordId: The id of the record that is connected to the Calendar event
• localRecordType: A string that describes the record that was connected to the Calendar event
• extra: An object with optional/product-specific props (currently Groups events only; see type definition here)

All additional props are passed to the Dropdown TapestryReact component, so if you need to override any of the default dropdown props you can pass them in as well.

Contributing

If you'd like to contribute to this you can find all of the details for getting started in the contribution guide.