Emmanuel Lutheran Church
Developed by Comp Edge Solutions
A self-contained, embeddable calendar widget powered by the Planning Center Online API.
One <script> tag delivers an interactive calendar with month navigation, multiple view layouts,
event popovers, tag-based color coding, iCal downloads, and smooth transitions —
all configurable via data attributes and server-side feature flags.
Designed for seamless embedding on Squarespace, static sites, or any web platform.
All engagement features are toggled server-side in private/env.json.
The server embeds the flags into the first HTML response; the widget extracts them automatically.
Toggle any feature to false to disable it globally.
| env.json Key | Feature | Description | Status |
|---|---|---|---|
| WIDGET_POPOVER | Event Popover | Click any event in the month grid to see full details, image, and action buttons | ON |
| WIDGET_TRANSITIONS | Slide Transitions | Smooth slide animation when navigating between months | ON |
| WIDGET_ICAL | Add to Calendar | Download .ics files from popovers; "+ Calendar" links on cards and list rows | ON |
| WIDGET_TAG_COLORS | Tag Color Coding | Events are color-coded by their PCO tag (Worship = blue, Youth = purple, etc.) | ON |
| WIDGET_THIS_WEEK | Week View | Adds a "Week" view button showing this month's events in compact list format | ON |
One script tag — gets you month navigation, view switching (Month / Week / List / Cards), event popovers, slide transitions, tag color coding, and iCal downloads. This is what Squarespace would embed.
data-shadow)
Filtered to only show "Worship Services" events via data-tag.
Shows a heading above the toolbar with the tag name.
Tag color coding should apply — Worship Services = blue tones.
Filters to only show events marked as "featured" in Planning Center via data-featured="1".
Shows heading "Featured Events" and burgundy ★ stars on featured items.
Starting in Cards view for a showcase-style display.
Combines both filters: shows only events that are both featured AND tagged "Worship Services". Heading shows "Featured: Worship Services". Uses list layout for detail.
Opens in the "Week" view by default — a compact list showing this month's events.
The "Week" button in the toolbar should be active.
This feature requires WIDGET_THIS_WEEK=true in env.json.
Opens in List layout by default. Shows event thumbnails, details, and "+ Cal" iCal links on each row. User can still switch to Month, Week, or Cards.
Opens in Cards layout by default. Each event card shows image, date badge, title, time, description, location, tags, and "+ Calendar" link. Featured events display a burgundy star. Tag badges are color-coded.
Minimal clickable tiles designed for a homepage "This Week's Services" section.
Each tile shows event name, date, and time. Clicking a tile opens the full event popover.
Use data-layout="simple" + data-this-week="1".
The popover is appended to document.body so it always opens full-viewport
regardless of the host container.
data-allow-week-nav)
Adds prev/next week buttons. Prev is disabled on the current week (no backward browsing).
Center button label updates to "This Week" / "Next Week" / "+N Weeks" and resets to this week on click.
Toolbar alignment controlled by data-nav-align (left | center | right — default: center).
left | center | right (default: center)document.body — fully escapes container overflow/clip constraints
Choose a shadow color via data-shadow — blue (default, brand primary),
burgundy (brand accent), or standard (neutral gray).
The shadow is defined, diffused, and offset slightly to the bottom-right for depth.
These fetch format=html directly from the endpoint — returns self-contained HTML + CSS.
No interactivity, no navigation. Useful for static embeds or email newsletters.
Direct HTML embeds filtered to only featured events. Notice the burgundy ★ star indicators.
The format=json response — raw event data for custom integrations.
Includes event name, dates, description, location, image, tags, featured status, URLs, and feature flags in meta.
All parameters accepted by /api/v1/calendar-endpoint.php
| Param | Values | Default | Description |
|---|---|---|---|
| format | html | fragment | json | html | Response format — html includes wrapper + CSS, fragment is layout-only, json is raw data |
| layout | cards | list | table | week | cards | Visual layout for html/fragment formats |
| filter | future | past | (empty) | future | Time filter — omitted when month is specified |
| tag | (PCO tag name) | (none) | Filter events by Planning Center tag |
| featured | 1 | (none) | Show only featured events |
| limit | 1–50 | 10 | Max events returned |
| month | YYYY-MM | (none) | Explicit month — auto-sets after/before date range |
| after | YYYY-MM-DD | (none) | Date range start |
| before | YYYY-MM-DD | (none) | Date range end |
Configuration via data-* attributes on the <script> tag.
| Attribute | Example | Description |
|---|---|---|
| data-api | https://poc.../calendar-endpoint.php | API endpoint URL (auto-detected from script src) |
| data-layout | table | list | cards | week | simple | Initial view (default: table). Use simple for minimal service tiles. |
| data-tag | Worship Services | Filter by PCO tag name |
| data-featured | 1 | Show only featured events |
| data-limit | 50 | Max events per fetch (default: 50) |
| data-shadow | blue | burgundy | standard | Shadow color theme (default: blue) |
| data-include-past | false | true | Show finished events? (default: false — hides past events) |
| data-this-week | 1 | Rolling 7-day window from today. Use with data-layout="simple". |
| data-title | This Week's Services | Override heading shown above tiles (simple layout) |
| data-allow-week-nav | 1 | Enable prev/next week navigation toolbar on simple layout |
| data-nav-align | left | center | right | Week nav toolbar alignment (default: center). Simple layout only. |
| data-target | myDiv | Mount into existing element by ID instead of auto-creating |
How to embed the calendar widget on any page. One <script> tag is all you need.
Configure behavior with data-* attributes directly on the script tag.
src URL, injects its own CSS, and renders into the page.
No build tools, no dependencies, no configuration files required.
The simplest embed — shows a full-month calendar grid with all future events. Past events are hidden by default.
Include data-include-past="true" to display events that have already finished.
Useful for archive pages or reviewing a full month's schedule.
Opens in a compact 7-day view showing just the current week from the month grid. Perfect for sidebars or a "this week at church" section.
Rich event cards with images, date badges, descriptions, and action links. Great for a "What's Happening" section.
Compact rows with thumbnails and event details. Good for event listings with moderate detail.
Show only events tagged with a specific Planning Center tag name. The tag heading appears above the toolbar.
Show only events marked as "featured" in Planning Center. Featured events display a burgundy ★ star indicator.
Combine data-featured and data-tag to show only events that match both.
Minimal clickable tiles for a "This Week's Services" section. Designed for homepages.
Clicking a tile opens the full event popover (appended to body — always full-viewport).
Choose from three shadow color presets. The shadow is diffused and offset to the bottom-right.
By default the widget creates its own container. Use data-target to render inside an existing element.
All attributes at once — this is the maximum configuration.
data-layout = table (month grid) |
data-shadow = blue |
data-limit = 50 |
data-include-past = falsedata-tag = (none — show all tags) |
data-featured = (none — show all events) |
data-target = (auto-create) |
data-api = (auto-detected from script src)
https://api.pcowidget.com/v1/widget.js?key=DEMO_KEYsrc URL — no data-api neededenv.jsondocument.body (position: fixed, z-index: 9999) — fully escapes container clip constraints on Squarespace and other host sites