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.