Skip to main content

Calendar Widget CSS Overrides Guide

This guide covers how to use CSS overrides to customize Display.Church widgets on your website. Each widget has its own reference guide linked below, and the Calendar widget details are documented in full beneath them.

Written by Ellie M.

Widget CSS Override Reference Guides

  • Alerts Widget — alerts_widget_css_overrides.pdf

  • Calendar Widget — calendar_widget_css_overrides.pdf

  • Groups Widget — groups_widget_css_overrides.pdf

  • Signups Widget — signups_widget_css_overrides.pdf

You can often adjust the appearance of the calendar widget by adding CSS to your own website and targeting the classes rendered by the widget.

Note: This is something that may be possible on your site, but is not an officially supported customization option. We recommend testing thoroughly before publishing any changes.

Getting Started

To make changes safely and cleanly:

  1. Start with the calendar root class so your CSS only affects the widget.

  2. Target the main wrapper or section classes shown in this guide.

  3. Test your changes on desktop and mobile after publishing them on your site.

Root Class Naming

The calendar widget renders with three important root classes:

Class

Description

.dce-calendar

Global widget root

.dce_calendar__<widget-uuid>

Targets one specific widget instance

.dce-<template>

Targets a specific template (e.g. monthly, weekly)

Examples:

.dce-calendar { } .dce_calendar__12345678-abcd-1234-abcd-123456789abc { } .dce-monthly { }

Naming Schema

  • .dce-calendar — global widget root

  • .dce_calendar__<uuid> — one specific widget instance

  • .dce--... — internal component blocks

  • .dce__... — shared typography/helper classes

Common Targets

Useful classes that appear in the calendar output include:

  • .dce__h1

  • .dce--monthly_view

  • .dce--weekly_view

  • .event-modal--wrapper

  • .events-list-modal--wrapper

Best Practice

Always scope your selectors under the widget root class to avoid unintended side effects on the rest of your page:

.dce-calendar .dce__h1 {   letter-spacing: 0.03em; }  .dce-calendar .dce--monthly_view {   border-radius: 16px; }

If your page contains more than one calendar widget, use the UUID-scoped class to target a specific instance:

.dce_calendar__12345678-abcd-1234-abcd-123456789abc .dce__h1 {   color: #1d4f91; }

Notes

  • Modal overrides — Calendar detail modals may need separate overrides via .event-modal--wrapper or .events-list-modal--wrapper.

  • Avoid brittle selectors — Don't use selectors like div > div > span, as these can break when the widget updates.

Related Articles
Alert Widget CSS Overrides Guide
Groups Widget CSS Overrides Guide
Signups Widget CSS Overrides
Did this answer your question?