Skip to content

Color Coding For Event Categories

Both the list view and full calendar view of the events module now support highlighting events based upon event category. This is accommodated via CSS classes which are added to each event listing. These classes can be used to set the background color, change the link color, add an icon, etc… Because our system allows events to be tagged with multiple categories, it will be important to think through how you would like the various possible combinations highlighted. In many cases the easiest option will be to simply add a rule to highlight one category of events (e.g. chamber, community, tourism, etc…).

Example CSS rules to highlight an individual category:

#mn-content .mn-cal-day li.mn-cal-catg6 a,
#mn-content .mn-event-catg6 {
  background-color: #FFC423;
}

The code above applies a background color to both the full calendar view and the events list view for events that are assigned to category 6 (Note that category 6 is the default category for “Chamber events” and that 3 is the default category for “Community events” in the ChamberMaster/MemberZone software). If your organization has values that vary from the defaults the category ID’s the easiest way to obtain the event category ID’s is to navigate to the events calendar and use the “Narrow Search By” filters to select different categories and then check the URL query string parameter for the value of “c=”. Alternately you can use a web inspector tool to inspect the values in the drop down menu of categories if you are comfortable with that.

The CSS rules to highlight events can be added via the Integration Settings Control Panel > Appearance tab > Custom CSS section and are typically created by an organizations web administrator, but please contact Micronet Support if you need assistance adding the desired rules.

Scroll To Top