PCOWidget — All Configuration Options

Six layouts are available. Default is table if omitted. Every layout opens the full event card when an event is clicked or tapped.

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.

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.

Give each campus its own page from one Planning Center calendar. Name a campus and the widget shows only that campus's events; comma-separate for OR, exactly like data-tag. Leave the attribute off and every campus shows, so a single-campus church never sets it.

Where the campus comes from. Planning Center's Calendar API has no campus field on an event, so this matches against the Campus tag group you already keep in Planning Center: the tags in that group are your campus names. Type them exactly as they read there. If your group is named something else, "Locations" or "Sites" or a name of your own, naming any one campus in it is enough for the widget to find the rest.

Untagged events are a decision, not an oversight. Most churches leave the churchwide items untagged: Christmas Eve, the all-church workday, the annual meeting. Those belong on every campus page rather than none, and data-campus-untagged="1" is what puts them there. Left off, a campus page is strict and lists only what is tagged for it. Decide by what untagged means on your own calendar: if it usually means a staff meeting or a room hold, leave it off.

Campus and tags are separate controls. data-campus decides which events appear. data-show-tags decides which chips are visible on them. They combine happily: data-campus="Downtown" data-show-tags="Ministry" gives a Downtown page whose cards carry ministry chips and no campus chip, since every event on the page is the same campus anyway.

No live example on this page: the demo calendar belongs to a single-campus church with no Campus tag group, so a working embed here would render an empty box rather than show you anything. Build one against your own key in the Widget Display Builder instead.

Shows only events in the next 7 days from today. Perfect for "This Week's Services" homepage sections. Works with any layout.

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.

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.

Controls how many events to fetch. Default: 50. Currently capped at 50 — "ALL" is not yet a valid value.

How many go across, 1 to 8. Defaults: 2 on simple, 4 on tiles. On cards it only applies when set; leave it off and cards fit themselves to the space. Every layout steps down to fewer columns as the screen narrows. The examples below use simple.

Controls the container shadow color theme. Default: blue.

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").

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.

Real-world patterns combining multiple options.

The data-featured attribute now has three states: absent = all events, "true"/"1" = featured only, "false"/"0" = non-featured only.

Comma-separate tag names to show events matching ANY of the listed tags (OR logic). Case-insensitive. Single tag still works exactly as before.

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.

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.

When nothing matches, the widget shows "No upcoming events at this time." Use data-empty-message to say something more useful instead: point visitors at your weekly service times, another page, or a phone number. Up to 200 characters.

Some events carry six or eight Planning Center tags. On a card layout every one of them renders as a chip, which pushes the title and details downward and makes the card look cluttered. data-show-tags is a whitelist: only the tags you name stay visible.

It is the 28th of the month, the next event is nine days away, and the widget shows an empty box. data-auto-advance="2" tells the widget: if the month the visitor lands on has nothing, look ahead up to two months and show the first one that does. The month heading follows the jump, so the widget reads "September 2026" instead of claiming to show an empty August.

The rest of the widget answers "which month am I looking at". This one answers a different question: what is coming up. data-months-ahead="4" pulls every matching event from today out to four months into a single set and drops the month arrows entirely. Point it at a tag and you have a thumbnail strip of everything in that series that is still ahead, which is what a church home page usually wants above the fold.

A weekly meeting is one event in Planning Center with a date every week, and the widget normally shows every one of those dates. Over a four-month window that is sixteen tiles of the same Tuesday night, crowding out the Christmas concert the widget was put there to promote. data-first-only shows each repeating event once, at its next date, with a +3 more dates note. The popover lists the other dates.

Every church can make the widget look like its own website, on every plan, without writing CSS. Pick one brand colour with data-accent and the whole widget follows it: buttons, date badges, times, today's date, chips and the event card. The hover shade, the pale tint behind chips, and black or white text on buttons are all worked out from that one colour. The Widget Builder has a colour picker and a live preview.

Planning Center tracks two separate things about an event: where it sits in your approval workflow (approved, pending, rejected) and whether you have published it to Church Center. data-visibility walks down both at once. Each level shows everything the level above it showed, plus one more class of event.

data-include-unpublished="true" still works as shorthand for data-visibility="approved". If both are set, data-visibility wins.