Skip to content
Transom Transom C7 Calendar

Styling & Customization

All styling is configured from The Everything Calendar app inside your Commerce7 dashboard. Changes are reflected on your site within seconds — no code changes or redeployments needed. A live preview updates as you edit.

Colors

  • Header Background — background color of the calendar header bar
  • Header Text — color of the month/year label and navigation buttons in the header

Event types

Each event type has its own color, shown as dots on the calendar grid and as a color accent on event cards.

SettingEvent type
Event Ticket colorTicketed events (e.g. Harvest Dinner, Wine Release)
Experience colorRecurring experiences (e.g. Wine Tasting, Cave Tour)
Reservation colorCustomer reservations — only shown to logged-in customers
Club Shipment colorClub shipment dates — only shown to logged-in customers

Calendar

  • Background — background of the calendar grid area
  • Text — color for dates, labels, and body text

Buttons

  • Button Background / Text — default state
  • Button Hover Background / Text — on hover
  • Button Border — border color (only visible when Border Width > 0)
  • Button Border Hover — border color on hover

Typography

  • Heading Font — applied to event titles and section headings. Enter a font name that is already loaded on your site (e.g. Playfair Display, Cormorant Garamond). Leave blank to inherit your site’s default heading font.
  • Body Font — applied to descriptions, dates, and metadata. Same rules apply.

Calendar appearance

  • Border Radius — rounds the corners of the calendar container (0–20px)
  • Border Width — width of the calendar border (0–4px). Set to 0 for no border.
  • Border Color — color of the calendar border

Event cards

Layout

  • Image Left — event image on the left, details on the right (default)
  • Image Top — image above the details, card stacks vertically
  • Detail — larger card with full description visible

Columns

Display events in 1, 2, or 3 columns in the list view.

Card appearance

  • Border Radius — rounds the corners of each event card
  • Border Width — width of the card border. Set to 0 for no border.
  • Border Color — color of the card border
  • Horizontal Padding — left/right padding inside the card
  • Vertical Padding — top/bottom padding inside the card

Buttons

  • Style — choose from Filled, Outline, or Ghost
  • Border Radius — rounds the button corners (0–20px)
  • Border Width — width of the button border (used with Outline and Ghost styles)

Event categories

Toggle which types of events appear on the calendar. Disabling a category hides it from all views — the calendar grid, the list view, and the legend.

  • Event Tickets — ticketed one-time events
  • Experiences — recurring tastings and tours
  • Reservations — requires customer to be logged in to your C7 storefront
  • Club Shipments — requires customer to be logged in to your C7 storefront

Exclusions

Add event names (or keywords) to prevent specific events from showing on the calendar. Useful for hiding internal events, sold-out events you don’t want to promote, or anything that shouldn’t appear publicly.

Enter the full event title, or a keyword that appears in it. Matching is case-insensitive.