Navigation

Jump To Section

Widget — Default (Month) Widget — Tag Filter Widget — Featured Only Widget — Featured + Tag Widget — Week View Widget — List View Widget — Cards View Shadow Variants Direct HTML Embeds Featured HTML Embeds JSON API Output Feature Flags (env.json) Usage Guide & Examples

Config

Feature Flags (env.json)

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

{ "WIDGET_POPOVER": true, "WIDGET_TRANSITIONS": true, "WIDGET_ICAL": true, "WIDGET_TAG_COLORS": true, "WIDGET_THIS_WEEK": true }

Widget

Default Widget (Month Grid)

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

Features to validate

• Month nav: Click left/right arrows to change months — watch for slide transitions
• Today button: Click the month name to return to current month
• View switching: Month | Week | List | Cards buttons in toolbar
• Popover: Click any event in the month grid to see detail card with image, description, and actions
• Tag colors: Events should be color-coded (blue = Worship, purple = Youth, etc.)
• Featured stars: Featured events show a burgundy ★ star
• Outside days: Previous/next month days shown in light gray
• iCal: Popover has "Add to Calendar" button; Cards/List views show "+ Calendar" links
• Drop shadow: Blue-tinted shadow, diffused toward bottom-right (also available in burgundy and standard gray via data-shadow)

Widget + Tag

Widget Filtered by Tag

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.

Featured

Widget — Featured Events Only

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.

Featured + Tag

Widget — Featured + Tag Combined

Combines both filters: shows only events that are both featured AND tagged "Worship Services". Heading shows "Featured: Worship Services". Uses list layout for detail.

Week View

Widget Starting in Week View

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.

List View

Widget Starting in List View

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.

Cards View

Widget Starting in Cards View

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.

Shadows

Shadow Color Variants

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.

Direct Embed

Raw HTML Layouts (no widget)

These fetch format=html directly from the endpoint — returns self-contained HTML + CSS. No interactivity, no navigation. Useful for static embeds or email newsletters.

Table Layout (Month Grid)

?format=html&layout=table&limit=50

Loading calendar grid...

Featured Embed

Featured Events — Direct HTML Embeds

Direct HTML embeds filtered to only featured events. Notice the burgundy ★ star indicators.

Featured Table (Month Grid)

?format=html&layout=table&featured=1&limit=50

Loading featured calendar grid...

JSON API

Raw JSON Response

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.

Loading JSON...

JSON (5 events) JSON (50 events) JSON (Worship only) JSON (Featured only) JSON (Featured + Worship) JSON (Feb 2026) JSON (Mar 2026) JSON (Apr 2026)

Fragment — Feb Grid Fragment — Cards Fragment — List HTML — Cards HTML — List HTML — Table

Reference

API Endpoint Parameters

All parameters accepted by https://elc-poc.compedgesolutions.us/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

Reference

Widget Data Attributes

Configuration via data-* attributes on the <script> tag.

Attribute	Example	Description
data-api	https://elc-poc.compedgesolutions.us/.../calendar-endpoint.php	API endpoint URL (auto-detected from script src)
data-layout	table \| list \| cards \| week	Initial view (default: table)
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-target	myDiv	Mount into existing element by ID instead of auto-creating

<script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js" data-layout="cards" data-tag="Youth" data-featured="1" data-limit="20" data-shadow="blue" data-include-past="false" data-target="my-calendar-container"> </script>

Documentation

Usage Guide & Examples

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.

Quick Start

Copy and paste a single script tag into your page. The widget auto-detects the API endpoint from its own src URL, injects its own CSS, and renders into the page. No build tools, no dependencies, no configuration files required.

Basic Embed (Minimal)

The simplest embed — shows a full-month calendar grid with all future events. Past events are hidden by default.

<script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js"></script>

Show Past Events

Include data-include-past="true" to display events that have already finished. Useful for archive pages or reviewing a full month's schedule.

<script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js" data-include-past="true"></script>

Week View (7-Day Calendar Strip)

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.

<script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js" data-layout="week"></script>

Cards Layout

Rich event cards with images, date badges, descriptions, and action links. Great for a "What's Happening" section.

<script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js" data-layout="cards"></script>

List Layout

Compact rows with thumbnails and event details. Good for event listings with moderate detail.

<script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js" data-layout="list"></script>

Filtered by Tag

Show only events tagged with a specific Planning Center tag name. The tag heading appears above the toolbar.

<script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js" data-tag="Worship Services"></script>  <script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js" data-tag="Youth" data-layout="cards"></script>

Featured Events Only

Show only events marked as "featured" in Planning Center. Featured events display a burgundy ★ star indicator.

<script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js" data-featured="1" data-layout="cards"></script>

Combined Filters (Featured + Tag)

Combine data-featured and data-tag to show only events that match both.

<script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js" data-featured="1" data-tag="Worship Services" data-layout="list"></script>

Shadow Styling

Choose from three shadow color presets. The shadow is diffused and offset to the bottom-right.

<script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js"></script>  <script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js" data-shadow="burgundy"></script>  <script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js" data-shadow="standard"></script>

Mount into Existing Element

By default the widget creates its own container. Use data-target to render inside an existing element.

<div id="my-calendar"></div> <script src="https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js" data-target="my-calendar"></script>

Full Kitchen Sink Example

All attributes at once — this is the maximum configuration.

Parameter Defaults (when omitted)

Deployment Notes

• The widget script is hosted at https://elc-poc.compedgesolutions.us/api/v1/calendar-widget.js
• It auto-detects the API endpoint from its own src URL — no data-api needed
• For cross-origin embedding (e.g., Squarespace), the host domain must be in the CORS whitelist
• Feature flags (popover, transitions, iCal, tag colors, week view) are controlled server-side in env.json
• Multiple widget instances can coexist on the same page, each with different configurations

Custom Planning Center
Calendar Widget

Jump To Section

Feature Flags (env.json)

Default Widget (Month Grid)

Widget Filtered by Tag

Widget — Featured Events Only

Widget — Featured + Tag Combined

Widget Starting in Week View

Widget Starting in List View

Widget Starting in Cards View

Shadow Color Variants

Standard (Gray)

Burgundy

Raw HTML Layouts (no widget)

Cards Layout

List Layout

Table Layout (Month Grid)

Featured Events — Direct HTML Embeds

Featured Cards

Featured List

Featured Table (Month Grid)

Raw JSON Response

API Endpoint Parameters

Widget Data Attributes

Usage Guide & Examples

Basic Embed (Minimal)

Show Past Events

Week View (7-Day Calendar Strip)

Cards Layout

List Layout

Filtered by Tag

Featured Events Only

Combined Filters (Featured + Tag)

Shadow Styling

Mount into Existing Element

Full Kitchen Sink Example

Custom Planning CenterCalendar Widget

Jump To Section

Feature Flags (env.json)

Default Widget (Month Grid)

Widget Filtered by Tag

Widget — Featured Events Only

Widget — Featured + Tag Combined

Widget Starting in Week View

Widget Starting in List View

Widget Starting in Cards View

Shadow Color Variants

Standard (Gray)

Burgundy

Raw HTML Layouts (no widget)

Cards Layout

List Layout

Table Layout (Month Grid)

Featured Events — Direct HTML Embeds

Featured Cards

Featured List

Featured Table (Month Grid)

Raw JSON Response

API Endpoint Parameters

Widget Data Attributes

Usage Guide & Examples

Basic Embed (Minimal)

Show Past Events

Week View (7-Day Calendar Strip)

Cards Layout

List Layout

Filtered by Tag

Featured Events Only

Combined Filters (Featured + Tag)

Shadow Styling

Mount into Existing Element

Full Kitchen Sink Example

Custom Planning Center
Calendar Widget