How can we help?

Home / Seeker Help Center / Seeker Events Network / Embedding and Integration / Styling Your Calendar Widget with Custom CSS

Styling Your Calendar Widget with Custom CSS

Seeker Events Network | All Plans
This article explains how to add custom CSS to your calendar widget so it matches the look of your website.

Your calendar should look like it belongs on your website. Because the calendar widget runs in its own protected space on the page, your site’s existing styles don’t carry over to it. The Custom CSS section of the embed builder lets you add your own styling directly to the widget, so you can match your destination’s fonts, colors, and card design without touching your website’s code. The Custom CSS documentation lists every class you can style.

How to Style Your Calendar Widget with Custom CSS

  1. Log in to your Seeker dashboard
  2. Click ‘Events’ in the left sidebar
  3. Click ‘Embed’ from the submenu
  4. Click ‘Custom CSS’ to expand the section
  5. Click the ‘Custom CSS documentation‘ link to see the classes you can style
  6. Enter your CSS in the text area
  7. Click ‘Copy code’ to copy the embed code with your styles applied
  8. Paste the updated code on your website where your calendar is embedded, replacing the previous embed code

Why Your Website's Styles Don't Affect the Widget

The calendar widget renders inside a shadow DOM, which keeps it separate from the rest of your page. That protects the calendar from breaking when your site’s theme changes, but it also means your website’s stylesheet can’t reach it.

CSS you add in the ‘Custom CSS’ section is injected directly into the widget, so it’s the one place where styling changes take effect. Use the class names listed in the Custom CSS documentation to target specific parts of the calendar.

Example CSS

This example rounds the corners of each event card and adjusts the weight of event titles:

.cw-event-card {
  border-radius: 12px;
}

.cw-event-card__title {
  font-weight: 400 !important;
}
  • Start small. Change one or two properties at a time so it’s easy to see what each rule does.
  • Use !important when a style doesn’t apply. Some properties need it to override the widget’s default styling, as in the title example above.
  • Match your brand. Use the same fonts and hex colors as your website so the calendar feels like a native part of the page.

FAQs

The calendar widget renders inside a shadow DOM, so styles from your website can’t reach it. Add your styling in the ‘Custom CSS’ section of the embed builder instead.

Click the ‘Custom CSS documentation’ link inside the ‘Custom CSS’ section, or go to the Custom CSS documentation directly.

Yes. Your styles are included in the embed code, so click ‘Copy code’ after making changes and replace the embed code on your website.

Related Articles