Embed TheGayCalendar API

Build a custom event UI on your site using our Embed API. Use the reference template as-is or fork and customize.

Who is this API for?

This is meant for venues, hosts, and promoters who want to create a custom view of the events they want to promote. Save time and keep things in sync by posting updates in one place and having them show up on other pages as well.

It also can be used by individuals to create a custom view that you can share with friends.

Pricing

The API is free to use. In the future we may charge a small amount to businesses depending on traffic and functionality.

Alpha: this embed API is in development and may have breaking changes. If you want to use it, come chat with us on WhatsApp.

1) Create an API key

Create an API key and specify the domains where you’ll embed the calendar.

Sign in to create an API key

2) Drop in the JS and CSS

Include the single JS file plus the default CSS. You can swap layouts later via options.

<link rel="stylesheet" href="https://thegaycalendar.com/embed-template/v1/template.css">
<script src="https://thegaycalendar.com/embed-template/v1/gaycal.js"></script>

3) Demo + embed code

This demo loads real events when an API key is available. If you haven’t created one yet, you’ll see sample data. The renderer supports multiple layouts. Choose layout: "list", layout: "cards", or layout: "compact".

Layout

Theme

Light

Link

Background

Text

Dark

Link

Background

Text

Copy this code

<div id="gaycal-embed"></div>
<script>
  Gaycal.init({
    target: "#gaycal-embed",
    apiKey: "pk_live_your_key",
    apiBase: "https://thegaycalendar.com",
    limit: 4,
    title: "Featured Events",
        region: "sf",
        theme: {
      light: {
        "--gc-accent": "#0a7ea4",
        "--gc-bg": "#f8fafc",
        "--gc-text": "#0f172a"
      },
      dark: {
        "--gc-accent": "#bae6fd",
        "--gc-bg": "#0f172a",
        "--gc-text": "#e2e8f0"
      }
    },
    layout: "cards"
  });
</script>

Generate an API key above to enable the live demo.

Optional settings

These are useful for tighter control over copy, styling, and error handling.

Gaycal.init({
  target: "#gaycal-embed",
  apiKey: "pk_live_your_key",
  apiBase: "https://thegaycalendar.com",
  className: "my-embed",
  loadingMessage: "Loading events...",
  emptyMessage: "No upcoming events yet.",
  onError: function (err) { console.log(err); }
});

Theme variables (set globally or via the theme option):

--gc-font
--gc-bg
--gc-text
--gc-accent
--gc-link-hover
--gc-border
--gc-muted
--gc-card-bg
--gc-card-border
--gc-card-shadow
--gc-padding
--gc-gap
--gc-event-padding
--gc-event-gap
--gc-event-radius
--gc-header-size
--gc-title-size
--gc-meta-size
--gc-date-size
--gc-empty-bg
--gc-empty-border
--gc-error-text
--gc-error-border
--gc-error-bg

API endpoints

GET /api/embed/events?limit=200

Use the X-Api-Key header or ?api_key= query param. Requests are CORS-enabled for allowed domains.

Responses always include upcoming events only. Use limit to control how many events are returned.

Filters: region (region slug), tag (single tag), venue, host.

Examples:

GET /api/embed/events?region=san-francisco&limit=20
GET /api/embed/events?region=seattle&tag=drag&limit=10
GET /api/embed/events?host=the-cafe&region=san-francisco&limit=6

Response payload

Each response includes the region slug, a count, and an array of upcoming events.

{
  "region": "san-francisco",
  "count": 2,
  "events": [
    {
      "id": "evt_123",
      "title": "Drag Brunch",
      "description": "A weekly brunch with performances.",
      "location": "123 Main St, San Francisco, CA",
      "url": "https://thegaycalendar.com/e/drag-brunch",
      "image": "https://images.example.com/banner.jpg",
      "start": "2026-02-08T18:00:00+00:00",
      "end": "2026-02-08T20:00:00+00:00",
      "tags": ["drag"],
      "venue": { "value": "ven_1", "name": "Cafe Royale", "url": "https://thegaycalendar.com/v/cafe-royale" },
      "hosts": [{ "value": "host_1", "name": "The Cafe", "url": "https://thegaycalendar.com/h/the-cafe" }]
    }
  ]
}