Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Explore upcoming Santa Barbara Women's Political Committee events, meetings, workshops and community programs.">
<title>Events Calendar | SBWPC</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<style>
html,
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  background: #faf8f3 !important;
}

body:has(#sbwpc-events),
body > *:has(#sbwpc-events),
body > *:has(#sbwpc-events) > *:has(#sbwpc-events),
body > *:has(#sbwpc-events) > *:has(#sbwpc-events) > *:has(#sbwpc-events) {
  background: #faf8f3 !important;
}

#sbwpc-events,
#sbwpc-events *,
#sbwpc-events *::before,
#sbwpc-events *::after {
  box-sizing: border-box;
}

#sbwpc-events {
  --navy: #08244f;
  --deep: #051a3a;
  --mist: #e8f0f5;
  --sage: #e7f0ea;
  --sand: #f1ede4;
  --page: #faf8f3;
  --white: #ffffff;
  --ink: #172235;
  --muted: #5f6977;
  --teal: #245f68;
  --line: #dfe5e7;

  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: clamp(38px,5vw,64px) 0 clamp(54px,7vw,86px);
  background: var(--page);
  color: var(--ink);
  font-family: Inter, Arial, Helvetica, sans-serif;
  line-height: 1.62;
}

#sbwpc-events::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -100vh;
  bottom: -100vh;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--page);
  pointer-events: none;
}

#sbwpc-events * {
  min-width: 0;
}

#sbwpc-events a {
  color: inherit;
  text-decoration: none;
}

#sbwpc-events button {
  font: inherit;
}

#sbwpc-events .events-shell {
  width: calc(100% - 28px);
  max-width: 1160px;
  margin: 0 auto;
}

#sbwpc-events .events-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,.58fr);
  gap: clamp(24px,5vw,56px);
  align-items: end;
  margin-bottom: 24px;
}

#sbwpc-events .events-kicker {
  margin: 0 0 9px;
  color: var(--teal);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

#sbwpc-events h1,
#sbwpc-events h2,
#sbwpc-events h3,
#sbwpc-events p {
  margin-top: 0;
}

#sbwpc-events h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(40px,5vw,62px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 800;
}

#sbwpc-events .events-heading-copy {
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px,1.4vw,17px);
  line-height: 1.68;
}

#sbwpc-events .calendar-panel {
  width: 100%;
  background: var(--white);
}

#sbwpc-events .calendar-top {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 20px 22px;
  background: var(--mist);
}

#sbwpc-events .calendar-top h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(24px,3vw,33px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 800;
}

#sbwpc-events .calendar-top p {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.58;
}

#sbwpc-events .live-label {
  color: var(--teal);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

#sbwpc-events .calendar-frame-wrap {
  position: relative;
  width: 100%;
  height: 720px;
  min-height: 620px;
  background: var(--white);
}

#sbwpc-events .calendar-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--white);
}

#sbwpc-events .calendar-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--white);
  text-align: center;
}

#sbwpc-events .calendar-loader.hidden {
  display: none;
}

#sbwpc-events .calendar-loader strong {
  display: block;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
}

#sbwpc-events .calendar-loader span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

#sbwpc-events .calendar-controls {
  padding: 18px 20px 20px;
  background: var(--sage);
}

#sbwpc-events .calendar-controls-title {
  display: block;
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}

#sbwpc-events .view-controls,
#sbwpc-events .link-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#sbwpc-events .link-controls {
  margin-top: 8px;
}

#sbwpc-events .event-button,
#sbwpc-events .view-button {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid rgba(8,36,79,.15);
  border-radius: 0;
  background: var(--white);
  color: var(--navy);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

#sbwpc-events .view-button[aria-pressed="true"],
#sbwpc-events .event-button.primary {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

#sbwpc-events .event-button:hover,
#sbwpc-events .view-button:hover {
  opacity: .92;
}

#sbwpc-events .featured-section {
  margin-top: clamp(52px,7vw,82px);
}

#sbwpc-events .section-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(270px,.7fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 20px;
}

#sbwpc-events .section-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(30px,3.8vw,44px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 800;
}

#sbwpc-events .section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.62;
}

#sbwpc-events .events-list {
  display: grid;
  gap: 8px;
}

#sbwpc-events .event-row {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr) auto;
  gap: clamp(18px,3vw,34px);
  align-items: center;
  padding: clamp(22px,3vw,30px);
  background: var(--white);
}

#sbwpc-events .event-row:nth-child(2) {
  background: var(--mist);
}

#sbwpc-events .event-row:nth-child(3) {
  background: var(--sage);
}

#sbwpc-events .event-row:nth-child(4) {
  background: var(--sand);
}

#sbwpc-events .event-date {
  color: var(--navy);
}

#sbwpc-events .event-date-month {
  display: block;
  color: var(--teal);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#sbwpc-events .event-date-day {
  display: block;
  margin-top: 4px;
  font-size: 35px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
}

#sbwpc-events .event-copy h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(19px,2vw,24px);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 800;
}

#sbwpc-events .event-meta {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

#sbwpc-events .event-description {
  max-width: 700px;
  margin: 8px 0 0;
  color: #465165;
  font-size: 14px;
  line-height: 1.58;
}

#sbwpc-events .event-action {
  min-width: 128px;
}

#sbwpc-events .all-events {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

#sbwpc-events :focus-visible {
  outline: 3px solid #d78c52;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  #sbwpc-events .events-heading,
  #sbwpc-events .section-heading {
    grid-template-columns: 1fr;
  }

  #sbwpc-events .event-row {
    grid-template-columns: 94px minmax(0,1fr);
  }

  #sbwpc-events .event-action {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 700px) {
  #sbwpc-events .events-shell {
    width: calc(100% - 16px);
  }

  #sbwpc-events .calendar-top {
    grid-template-columns: 1fr;
  }

  #sbwpc-events .calendar-frame-wrap {
    height: 620px;
    min-height: 560px;
  }
}

@media (max-width: 540px) {
  #sbwpc-events {
    padding-top: 32px;
  }

  #sbwpc-events .view-controls,
  #sbwpc-events .link-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  #sbwpc-events .event-button,
  #sbwpc-events .view-button {
    width: 100%;
  }

  #sbwpc-events .calendar-frame-wrap {
    height: 540px;
    min-height: 500px;
  }

  #sbwpc-events .event-row {
    grid-template-columns: 72px minmax(0,1fr);
    gap: 16px;
    padding: 20px 16px;
  }

  #sbwpc-events .event-date-day {
    font-size: 29px;
  }

  #sbwpc-events .event-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  #sbwpc-events .all-events {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sbwpc-events,
  #sbwpc-events *,
  #sbwpc-events *::before,
  #sbwpc-events *::after {
    transition: none !important;
  }
}
</style>
</head>

<body>

<main id="sbwpc-events">

<div class="events-shell">

  <header class="events-heading">
    <div>
      <p class="events-kicker">SBWPC Events</p>
      <h1>Events Calendar</h1>
    </div>

    <p class="events-heading-copy">
      Find upcoming SBWPC programs, meetings, workshops and community events.
    </p>
  </header>

  <section class="calendar-panel" aria-label="SBWPC live events calendar">

    <div class="calendar-top">
      <div>
        <h2 id="calendar-view-title">Upcoming SBWPC Events</h2>
        <p>Select an event to view its time, location, description and registration information.</p>
      </div>

      <span class="live-label">Live Calendar</span>
    </div>

    <div class="calendar-frame-wrap">

      <div class="calendar-loader" id="calendar-loader">
        <div>
          <strong>Loading events</strong>
          <span>Connecting to the SBWPC public calendar.</span>
        </div>
      </div>

      <iframe
        class="calendar-frame"
        id="calendar-frame"
        title="Santa Barbara Women's Political Committee live events calendar"
        loading="lazy"
        referrerpolicy="strict-origin-when-cross-origin"
        allowfullscreen>
      </iframe>

    </div>

    <div class="calendar-controls">

      <span class="calendar-controls-title">Choose a calendar view</span>

      <div class="view-controls" role="group" aria-label="Choose calendar view">

        <button
          class="view-button"
          data-mode="AGENDA"
          aria-pressed="true"
          type="button">
          Upcoming Events
        </button>

        <button
          class="view-button"
          data-mode="MONTH"
          aria-pressed="false"
          type="button">
          Month View
        </button>

        <button
          class="view-button"
          data-mode="WEEK"
          aria-pressed="false"
          type="button">
          Week View
        </button>

      </div>

      <div class="link-controls">

        <a
          class="event-button"
          href="https://calendar.google.com/calendar/render?cid=0a52bee4082c5a405deb3b1fc1eb40e963279099c859356d0585961f748cb32e%40group.calendar.google.com"
          target="_blank"
          rel="noopener noreferrer">
          Subscribe to Calendar
        </a>

        <a
          class="event-button primary"
          href="https://calendar.google.com/calendar/embed?src=0a52bee4082c5a405deb3b1fc1eb40e963279099c859356d0585961f748cb32e%40group.calendar.google.com&ctz=America%2FLos_Angeles"
          target="_blank"
          rel="noopener noreferrer">
          Open Full Calendar
        </a>

      </div>

    </div>

  </section>

  <section class="featured-section" aria-labelledby="featured-events-title">

    <div class="section-heading">
      <h2 id="featured-events-title">Upcoming Events</h2>
      <p>
        Featured programs, workshops and community events from SBWPC.
      </p>
    </div>

    <div class="events-list">

      <article class="event-row">
        <div class="event-date">
          <span class="event-date-month">August</span>
          <span class="event-date-day">22</span>
        </div>

        <div class="event-copy">
          <h3>Run Like a Woman</h3>
          <p class="event-meta">Saturday, August 22, 2026 &middot; 9:00 AM - 1:00 PM</p>
          <p class="event-description">
            A practical workshop for women considering public office, campaign leadership and civic service.
          </p>
        </div>

        <div class="event-action">
          <a class="event-button primary" href="https://sbwpc.org/events/attend-an-event-2" target="_top">
            Event Details
          </a>
        </div>
      </article>

      <article class="event-row">
        <div class="event-date">
          <span class="event-date-month">September</span>
          <span class="event-date-day">14</span>
        </div>

        <div class="event-copy">
          <h3>Voter Education</h3>
          <p class="event-meta">Monday, September 14, 2026 &middot; Faulkner Gallery</p>
          <p class="event-description">
            Community voter education focused on voting rights, election information and civic participation.
          </p>
        </div>

        <div class="event-action">
          <a class="event-button primary" href="https://sbwpc.org/events/attend-an-event-2" target="_top">
            Event Details
          </a>
        </div>
      </article>

      <article class="event-row">
        <div class="event-date">
          <span class="event-date-month">September</span>
          <span class="event-date-day">19</span>
        </div>

        <div class="event-copy">
          <h3>Cosmopolitics 2026</h3>
          <p class="event-meta">Saturday, September 19, 2026 &middot; 11:30 AM - 1:30 PM &middot; Mar Monte Hotel</p>
          <p class="event-description">
            SBWPC's signature brunch featuring California Treasurer Fiona Ma in conversation about California's economy, leadership and the future.
          </p>
        </div>

        <div class="event-action">
          <a class="event-button primary" href="https://sbwpc.org/events/attend-an-event-2" target="_top">
            Event Details
          </a>
        </div>
      </article>

      <article class="event-row">
        <div class="event-date">
          <span class="event-date-month">October</span>
          <span class="event-date-day">03</span>
        </div>

        <div class="event-copy">
          <h3>Voter Education - Eastside</h3>
          <p class="event-meta">Saturday, October 3, 2026 &middot; Santa Barbara Eastside</p>
          <p class="event-description">
            A bilingual voter education program presented in Spanish with English translation.
          </p>
        </div>

        <div class="event-action">
          <a class="event-button primary" href="https://sbwpc.org/events/attend-an-event-2" target="_top">
            Event Details
          </a>
        </div>
      </article>

    </div>

    <div class="all-events">
      <a class="event-button primary" href="https://sbwpc.org/events/attend-an-event-2" target="_top">
        View All Featured Events
      </a>
    </div>

  </section>

</div>

<script>
(function () {
  "use strict";

  const root = document.getElementById("sbwpc-events");
  if (!root) return;

  const calendarId =
    "0a52bee4082c5a405deb3b1fc1eb40e963279099c859356d0585961f748cb32e@group.calendar.google.com";

  const frame = root.querySelector("#calendar-frame");
  const loader = root.querySelector("#calendar-loader");
  const buttons = Array.from(root.querySelectorAll(".view-button"));
  const title = root.querySelector("#calendar-view-title");

  const titles = {
    AGENDA: "Upcoming SBWPC Events",
    MONTH: "SBWPC Month View",
    WEEK: "SBWPC Week View"
  };

  function buildCalendarURL(mode) {
    const parameters = new URLSearchParams({
      src: calendarId,
      ctz: "America/Los_Angeles",
      wkst: "1",
      mode: mode,
      showTitle: "0",
      showPrint: "0",
      showTabs: "0",
      showCalendars: "0",
      showTz: "0",
      showDate: mode === "AGENDA" ? "0" : "1",
      showNav: mode === "AGENDA" ? "0" : "1",
      bgcolor: "#ffffff",
      height: "800"
    });

    return "https://calendar.google.com/calendar/embed?" + parameters.toString();
  }

  function loadCalendar(mode) {
    if (!frame || !loader || !title) return;

    loader.classList.remove("hidden");
    frame.src = buildCalendarURL(mode);
    title.textContent = titles[mode] || "SBWPC Events";

    buttons.forEach(function (button) {
      const active = button.getAttribute("data-mode") === mode;
      button.setAttribute("aria-pressed", String(active));
    });
  }

  buttons.forEach(function (button) {
    button.addEventListener("click", function () {
      loadCalendar(button.getAttribute("data-mode"));
    });
  });

  frame.addEventListener("load", function () {
    window.setTimeout(function () {
      loader.classList.add("hidden");
    }, 180);
  });

  loadCalendar("AGENDA");
})();
</script>

</main>

</body>
</html>

Santa Barbara Women's Political Committee

The Santa Barbara Women’s Political Committee (SBWPC) is a non‑partisan political action committee based in Santa Barbara County, United States, that advances inclusive, intersectional and progressive feminist values. Guided by these principles, SBWPC endorses candidates who support its feminist agenda and work to combat discrimination based on gender, race, ethnicity, sexual orientation, gender identity, religion, age or ability. The organization focuses on social action and advocacy to promote equity and representation. 