Custom CSS for CMS Calendar

Customize the styles on the public events page of your Modern Campus CMS calendar using CSS.

To create custom CSS for this page,

1. Create a copy of our starter stylesheet (CSS) in Modern Campus CMS.
   • For example, /_resources/css/calendar.css
2. Style the HTML elements of the calendar using the id attribute(s).
   • For example, #hero-title { color: lightblue; }
3. Save and Publish.

Then, link the calendar to the stylesheet using a source code asset.

1. Copy the embed code for the calendar.
2. Go to Content > Assets.
3. Click +New.
4. Click Source Code.
5. Name your asset.
6. In the mini-source code editor, paste the calendar embed code.
   • For example, 
     

     <omnicms-calendar data-calendar-id="6a774d2c-9735-40b7-9459-cb7d95fce228"></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>
     

7. Add data-css="/_resources/css/calendar.css", or similar file path, to the opening omnicms-calendar tag.
   • For example,
     

     <omnicms-calendar data-calendar-id="6a774d2c-9735-40b7-9459-cb7d95fce228" 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>
     

8. ClickCreate.
9. Publish the asset.