Yamhill County, OregonThe Carlton, Oregon District

For partners

Put the Carlton calendar on your own website

The widget is a plain iframe on a white background — no scripts to install, no styling conflicts. It shows a month grid with a list view toggle, updates itself as new events are verified, and links each event back to its full page.

1. Basic embed

Paste this wherever you want the calendar to appear.

<!-- Carlton events calendar -->
<iframe
  src="https://carlton.example/api/public/widget/calendar"
  title="What's on in Carlton, Oregon"
  style="width:100%;height:760px;border:0;background:#fff"
  loading="lazy"
></iframe>

2. Auto-height embed (recommended)

The widget posts its height to the parent page, so the iframe grows and shrinks with the month instead of scrolling.

<iframe
  id="carlton-calendar"
  src="https://carlton.example/api/public/widget/calendar"
  title="What's on in Carlton, Oregon"
  style="width:100%;height:760px;border:0;background:#fff"
  loading="lazy"
></iframe>
<script>
  window.addEventListener('message', function (event) {
    if (!event.data || event.data.type !== 'carlton-widget-height') return;
    var frame = document.getElementById('carlton-calendar');
    if (frame) frame.style.height = event.data.height + 'px';
  });
</script>

3. Options

  • ?view=list — open in list view instead of the month grid.
  • ?days=30 — only show events in the next N days.
  • ?category=music — filter by event tag (music, wine, food, art, gravel_riding, mtb_riding, …).
  • ?accent=%23123456 — match your brand color (hex, URL-encoded).

Example: list view, next 30 days

4. Build your own with the JSON feed

Prefer to style it yourself? The same data is available as open, CORS-enabled JSON.

fetch('https://carlton.example/api/public/widget/events?days=30')
  .then(function (r) { return r.json(); })
  .then(function (data) { console.log(data.events); });

Live preview