How to Style an Event Calendar

MSL has written some CSS to customise your event calendar's appearance if you prefer not to use the default style. The comments in the code explain how to adjust colours and dimensions. To apply them, create an Event Calendar widget on your webpage following the step-by-step instructions below, and copy the provided CSS code.

Find an example here

TABLE OF CONTENTS

• Download Example CSS

You can access this feature from your MSL website. Only Content Editors with access to Website Admin can access the Website Pages window.

Be careful not to modify the functional styles, as they are essential for the widget's operation. The functional styles are commented to indicate which CSS properties should not be modified.

For further information, see Events Widgets.

1. Log in to your MSL website.
2. From the Admin dropdown, select Website Admin. The Website Admin window is displayed.
3. Click Edit Pages. The Website Pages window with a list of website pages you have permission to edit is displayed.
4. Next to the relevant page, select the checkbox.
5. Click Edit. The Edit Page window is displayed.
6. Select the Widgets tab. The Widgets section is displayed.
7. In the Add New Widget section, within the General section, select Event Calendar. The Widget Editor window is displayed.
8. In the Organisation field, either:
   1. Start typing the Name of your Organisation or the Organisation ID, then select the relevant one from the dropdown that is displayed.
   2. Click the Grouping Tree icon (). The grouping tree is displayed. Click Expand () to display the contents of a node, and click one item to select. The selected item is entered into the Organisation field.
9. If applicable, select the Include Child Organisations checkbox.
10. Deselect the Use Default Calendar Styling checkbox.
11. Complete the remaining fields as required and click Save.
12. Click Content, and from the Widgets dropdown, select the widget. The Event Calendar widget is entered into the editor.
13. Select the CSS tab and after downloading the Example CSS EventCalendar.zip, copy and paste the content into the CSS field. To download the file, see Download Example CSS.
14. Select the Save/Exit tab. The Save Options section is displayed.
15. In the Update Notes field, enter any relevant notes, then click Publish. You are returned to the Edit Page window.

Download Example CSS

To download the attached Example CSS, click the filename.