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