Layouts — data-layout
Built
Five layouts are available. Default is table if omitted.
<script src="https://api.pcowidget.com/v1/calendar-widget.js?key=18dc5c27c3e7ee647b3ff31626a10d16"
data-layout="table"></script>
<script src="..." data-layout="week"></script>
<script src="..." data-layout="list"></script>
<script src="..." data-layout="cards"></script>
<script src="..." data-layout="simple"></script>
Featured filter — data-featured
Built
Set data-featured="true" (or "1") to show ONLY events marked Featured in Planning Center.
Featured events also get a gold star indicator and accent border on cards.
Use data-featured="false" (or "0") to show only non-featured events. Absent = all events.
<script src="..."
data-layout="cards"
data-featured="true"></script>
<script src="..."
data-layout="list"
data-featured="true"></script>
Also accepted: data-featured="1", data-featured="True", data-featured="TRUE" — all equivalent.
Tag filter — data-tag
Built
Filter to events that have a specific Planning Center tag. Comma-separate multiple tag names for OR logic — e.g. data-tag="Youth,Women's Ministry" shows events tagged either tag.
<script src="..."
data-layout="simple"
data-tag="Worship Services"></script>
<script src="..."
data-layout="list"
data-featured="true"
data-tag="Worship Services"></script>
Rolling 7-day window — data-this-week
Built
Shows only events in the next 7 days from today. Perfect for "This Week's Services" homepage sections.
Works with any layout.
<script src="..."
data-layout="simple"
data-this-week="true"
data-title="This Week's Services"></script>
<script src="..."
data-layout="cards"
data-this-week="true"></script>
Week navigation — data-allow-week-nav + data-nav-align
Built
Adds Prev / Next week navigation buttons to the simple layout. The label shows "This Week" / "Next Week" / "+N Weeks"
and clicking it returns to the current week. data-nav-align controls button alignment: left, center (default), or right.
<script src="..."
data-layout="simple"
data-allow-week-nav="true"
data-nav-align="center"
data-title="This Week's Services"></script>
<script src="..."
data-layout="simple"
data-allow-week-nav="true"
data-nav-align="left"></script>
<script src="..."
data-layout="simple"
data-allow-week-nav="true"
data-nav-align="right"></script>
Show past events — data-include-past
Built
By default, events that have already ended are hidden. Set data-include-past="true"
to include them — useful for archive or recap pages. Default: false.
<script src="..."
data-layout="list"
data-include-past="true"></script>
<script src="..."
data-layout="list"
data-include-past="false"></script>
Also accepted: "1" / "0", "True" / "False", "TRUE" / "FALSE".
Event count — data-limit
Built (max 50)
"ALL" not supported yet
Controls how many events to fetch. Default: 50. Currently capped at 50 — "ALL" is not yet a valid value.
<script src="..."
data-layout="cards"
data-limit="3"></script>
<script src="..."
data-layout="cards"
data-limit="6"></script>
Tile columns — data-columns
Built (simple layout)
Controls tiles per row on the simple layout. Range: 1–8. Default: 2.
Always collapses to 1 column on screens ≤480px regardless of this value.
<script src="..." data-layout="simple" data-columns="1"></script>
<script src="..." data-layout="simple" data-columns="2"></script>
<script src="..." data-layout="simple" data-columns="3"></script>
Shadow style — data-shadow
Built
Controls the container shadow color theme. Default: blue.
<script src="..." data-layout="simple" data-shadow="blue"></script>
<script src="..." data-layout="simple" data-shadow="burgundy"></script>
<script src="..." data-layout="simple" data-shadow="standard"></script>
Custom heading — data-title
Built
Overrides the heading displayed above the widget. Any string is valid. If omitted, the widget auto-generates
a heading from the filter context (e.g. "Featured Events", "Worship Services").
<script src="..."
data-layout="simple"
data-title="This Week's Services"></script>
<script src="..."
data-layout="list"
data-title="Upcoming Events"></script>
Mount target — data-target
Built
Mount the widget into an existing element by DOM ID instead of auto-creating a container
after the script tag. Useful when you need the widget inside a specific page region.
↑ This div has id="my-custom-container" — the widget will mount here
<div id="my-custom-container"></div>
<script src="..."
data-layout="simple"
data-target="my-custom-container"></script>
Useful Combinations
Built
Real-world patterns combining multiple options.
<script src="..."
data-layout="simple"
data-tag="Worship Services"
data-this-week="true"
data-allow-week-nav="true"
data-columns="3"
data-shadow="burgundy"
data-title="This Week's Services"></script>
<script src="..."
data-layout="table"
data-featured="true"
data-title="Featured Events"></script>
<script src="..."
data-layout="cards"
data-tag="Worship Services"
data-limit="6"
data-shadow="standard"
data-title="Worship Events"></script>
<script src="..."
data-layout="list"
data-include-past="true"
data-limit="20"
data-title="Past Events"></script>
Non-featured filter — data-featured="false"
Built
The data-featured attribute now has three states: absent = all events,
"true"/"1" = featured only, "false"/"0" = non-featured only.
<script src="..."
data-layout="list"
data-featured="false"
data-title="Community Events"></script>
<script src="..."
data-layout="cards"
data-featured="0"
data-limit="6"></script>
Multi-tag OR filter — data-tag="tag1,tag2"
Built
Comma-separate tag names to show events matching ANY of the listed tags (OR logic).
Case-insensitive. Single tag still works exactly as before.
<script src="..."
data-layout="list"
data-tag="Worship Services,Special Events"
data-title="Worship & Special Events"></script>
<script src="..."
data-layout="cards"
data-tag="Worship Services,Special Events"
data-featured="true"
data-limit="6"></script>
Hide end time — data-hide-end-time
Built
Show only the start time — hides the “– 10:30 AM” portion. Applies to simple, cards, and list layouts.
Useful for service tiles where end times add clutter.
<script src="..."
data-layout="simple"
data-hide-end-time="true"
data-title="Services (start times only)"></script>
<script src="..."
data-layout="list"
data-hide-end-time="true"></script>
Hide widget when empty — data-hide-if-empty
Built
When zero events match the current parameters, the widget normally renders a "No upcoming events found" box
that takes up space on the page. With data-hide-if-empty="true", the entire container collapses
to nothing — no border, no message, no space. Works with all layouts and all filter combinations.
Primary use case: tag-filtered or this-week widgets on pages where that ministry or service
may have no upcoming events. Without this flag you get an empty box; with it the section disappears entirely
until events exist.
<script src="..."
data-layout="simple"
data-tag="Men's Ministry"
data-this-week="true"
data-hide-if-empty="true"
data-title="Men's Ministry This Week"></script>
If no Men's Ministry events exist this week, nothing renders above — no box, no space.
<script src="..."
data-layout="cards"
data-featured="true"
data-hide-if-empty="true"
data-title="Featured Events"></script>
Roadmap — Features Not Yet Built
Not built
These were requested and are being evaluated for implementation:
| Feature |
Proposed Attribute |
Notes |
| Fetch ALL events (no limit) |
data-limit="all" |
Currently hard-capped at 50 in the API. Removing the cap requires a PCO API pagination loop and a decision on performance trade-offs. |