EmbedACal - Embed Google Calendar on your website

CSS custom properties

The widget uses Shadow DOM, but exposes --embedacal-* CSS custom properties that cascade into the shadow root:

CSS

embedacal-widget {
  /* Colors */
  --embedacal-bg: #ffffff;
  --embedacal-text: #1a1a1a;
  --embedacal-text-secondary: #6b7280;
  --embedacal-text-muted: #9ca3af;
  --embedacal-border: #e5e7eb;
  --embedacal-accent: #f43f5e;
  --embedacal-accent-text: #ffffff;

  /* Layout */
  --embedacal-radius: 12px;
  --embedacal-font-family: system-ui, -apple-system, sans-serif;
  --embedacal-font-size: 14px;
  --embedacal-max-height: 600px;
}

Themes

Set the theme attribute to light or dark for built-in presets:

HTML

<!-- Light theme (default) -->
<embedacal-widget feed="my-feed" theme="light"></embedacal-widget>

<!-- Dark theme -->
<embedacal-widget feed="my-feed" theme="dark"></embedacal-widget>

Brand colors

Override the accent color to match your brand:

CSS

/* Purple brand example */
embedacal-widget {
  --embedacal-accent: #7c3aed;
  --embedacal-accent-text: #ffffff;
}

/* Green brand with rounded corners */
embedacal-widget {
  --embedacal-accent: #059669;
  --embedacal-radius: 16px;
}

Full custom styling

Add the disable-styles attribute to strip all default CSS. Then target the widget's internal elements via ::part() selectors:

HTML

<embedacal-widget feed="my-feed" disable-styles></embedacal-widget>

CSS

embedacal-widget::part(event-card) {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

embedacal-widget::part(event-title) {
  font-weight: 600;
  font-size: 1rem;
}

embedacal-widget::part(event-date) {
  color: #6b7280;
  font-size: 0.875rem;
}

embedacal-widget::part(event-location) {
  color: #9ca3af;
  font-size: 0.75rem;
}

Available CSS parts

Part name	Description
container	Outermost wrapper
header	View tabs and search bar area
event-list	Scrollable event list container
event-card	Individual event card
event-title	Event title text
event-date	Event date/time text
event-location	Event location text
calendar-grid	Monthly calendar grid
map-container	Google Maps embed container

Responsive sizing

The widget automatically adjusts to its container's width. You can constrain it:

CSS