Custom CSS for CMS Calendar

Customize the look and feel of your embedded Modern Campus CMS calendar widgets with your institution's branding using custom CSS.

CSS CustomizationLink to this section

The calendar widget can be styled using standard CSS, applied either globally or locally within your CMS theme. The widget loads into your page using an iframe-like embed and includes scoped class names that make targeting specific elements possible.

You may define styles for:

.calendar-widget

.calendar-event

.calendar-date

.calendar-title

.calendar-filter

Pro Tip: Use dev tools in your browser to inspect calendar elements and test custom rules before publishing.

Recommended SetupLink to this section

If your institution is working with a design agency or internal web team to apply consistent styling across CMS components, we provide a starter CSS file that includes default layout and appearance rules.

Download the Calendar CSS Starter File

Your team can:

Use it as a baseline for branding fonts, colors, spacing, and layout

Modify and host the updated CSS within your CMS

Apply styles globally or specifically to calendar embed containers

These styles can be added through your CMS's main theme files or embedded within <style> tags on individual pages if needed.

Add Custom CSS with the Embed AttributeLink to this section

If your custom stylesheet is not loading, check that the calendar embed includes the data-css attribute.

Example, first line of the embed:

<omnicms-calendar data-calendar-id="calendar-module-uuid" data-css="/_resources/css/calendar.css"></omnicms-calendar>

data-css accepts:

• Root relative paths, for example /_resources/css/calendar.css
• Page relative paths, for example ../../assets/calendar.css
• Absolute URLs, for example https://cdn.example.edu/calendar.css

Full embed example in the Source editor:

<omnicms-calendar  data-calendar-id="dc6f31c8-f117-4b7a-aae0-571a4da5565f"  data-css="/_resources/css/calendar.css"></omnicms-calendar><script>(function (src) {  if (document.querySelector(`script[src="${src}"]`) !== null) return;  const s = document.createElement('script');  s.async = true;  s.src = src;  s.id = 'omnicms-calendar';  document.getElementsByTagName('head')[0].appendChild(s);})("https://widget.calendar.moderncampus.net/app.js");</script>

 

Use the actual path where you uploaded your file, for example /_resources/css/calendar.css. After adding data-css, republish the page.