Calendar Widget

An interactive monthly events calendar rendered directly on your site.

What it does

Displays a monthly grid calendar with your published events shown as colour-coded pills on their start dates. Visitors can click any event to see its title, time, location, and description. Includes previous/next month navigation and a list view toggle.

Admin setup

  1. Go to Dashboard → Events.
  2. Click New Event and fill in the title, start time, and optional end time, location, and description.
  3. Save. The event appears immediately on the calendar widget.

Embed

Widget snippet 
<div data-statiq="calendar"></div>

Attributes

AttributeTypeDefaultDescription
data-statiqstring—Required. Set to "calendar"
ℹ The calendar renders empty if no events exist. Create at least one event in Dashboard → Events before embedding.

Live Preview

Uses your real site data. Enter your site key to render this widget live.

Enter your site key above to preview this widget with your real data.