CSS Styling Guide for the Responsive Calendar

Overview

This document is intended for use by web designers who want to make customizations to the look and feel of the calendar.  Each of the sections below contains some examples of different styling options.  Styles are not fully explained but are provided as samples so that you can discern how you wish to make styling changes.

Calendar Styling for Category or Location

The following styles are generally used and customized for category and/or location highlighting:

/* CATEGORY COLORS */
.g104CalendarDialogOverlay.evCatAdultSupport, .gnosisCalendar .event.evCatAdultSupport, .gnosis_MultiSelectInnerElement.gnosis_MultiSelectInnerElement.evCatAdultSupport {
 background-color: #001489d1 /* d1 is the level of transparency */
 }
 .g104CalendarDialogOverlay.evCatAdultEd, .gnosisCalendar .event.evCatAdultEd, .gnosis_MultiSelectInnerElement.gnosis_MultiSelectInnerElement.evCatAdultEd {
 background-color: #702082d1
 }
 .g104CalendarDialogOverlay.evCatAdultHealthyLifestyle, .gnosisCalendar .event.evCatAdultHealthyLifestyle, .gnosis_MultiSelectInnerElement.gnosis_MultiSelectInnerElement.evCatAdultHealthyLifestyle {
 background-color: #4A7729d1
 }
 .g104CalendarDialogOverlay.evCatMindBody, .gnosisCalendar .event.evCatMindBody, .gnosis_MultiSelectInnerElement.gnosis_MultiSelectInnerElement.evCatMindBody {
 background-color: #CE1126d1
 }
 .g104CalendarDialogOverlay.evCatAdultSocial, .gnosisCalendar .event.evCatAdultSocial, .gnosis_MultiSelectInnerElement.gnosis_MultiSelectInnerElement.evCatAdultSocial {
 background-color: #702082d1
 }
 .g104CalendarDialogOverlay.evCatChildTeenFamEd, .gnosisCalendar .event.evCatChildTeenFamEd, .gnosis_MultiSelectInnerElement.gnosis_MultiSelectInnerElement.evCatChildTeenFamEd {
 background-color: #FF9E1Bd1
 }
 .g104CalendarDialogOverlay.evCatChildTeenFamilyLifestyle, .gnosisCalendar .event.evCatChildTeenFamilyLifestyle, .gnosis_MultiSelectInnerElement.gnosis_MultiSelectInnerElement.evCatChildTeenFamilyLifestyle {
 background-color: #FF9E1Bd1
 }
.g104CalendarDialogOverlay.evCatChildTeenFamSupport, .gnosisCalendar .event.evCatChildTeenFamSupport, .gnosis_MultiSelectInnerElement.gnosis_MultiSelectInnerElement.evCatChildTeenFamSupport {
 background-color: #FF9E1Bd1
 }
.g104CalendarDialogOverlay.evCatChlildTeenFamSocial, .gnosisCalendar .event.evCatChlildTeenFamSocial, .gnosis_MultiSelectInnerElement.gnosis_MultiSelectInnerElement.evCatChlildTeenFamSocial {
 background-color: #FF9E1Bd1
 }
.g104CalendarDialogOverlay.evCatFundraising, .gnosisCalendar .event.evCatFundraising, .gnosis_MultiSelectInnerElement.gnosis_MultiSelectInnerElement.evCatFundraising {
 background-color: #000000
 }


/* CATEGORY SELECT LIST TEXT COLOR (USE IF NEEDED WITH DARK COLORS) */
span.gnosis_MultiSelectInnerElement {
 color: white;
}

Styling Categories

For styling categories with background colors - .evCatXXX above represents the alias name of the event categories where XXX is the alias name

Styling Locations

For styling locations with background colors instead of categories, replace the .evCatXXX in the code above with .gnosis_evCityXXX where XXX is the REID number of the required city/location in Reference Data. - eg:

.g104CalendarDialogOverlay.gnosis_evCity2868, 
.gnosisCalendar .event.gnosis_evCity2868, 
.gnosis_MultiSelectInnerElement.gnosis_evCity2868 {
background-color: #d0d6b8 /* LOCATION 1 */
}

Secondary Category Icon (Location or Other Options)

/* SECONDARY CATEGORY ICON SPECIFICATION */
.evSecCatWiFiCast .eventStatusIcons .secondaryEventCat:after {
 content: '\f143';
 font-weight: bold;
 color: black;
 background-color: white;
 padding: 0;
 }

The "Secondary Category Alias Name" (indicated above in red) is used to select the category to which the icon or styling is applied.

Icon codes (ie: '\f143' above) can be obtained at the Font Awesome Icon Gallery

Common Calendar Text Styling

The following text styles are often used when the calendar has colored backgrounds specified for categories or locations:

/* CALENDAR TEXT/DESCRIPTION FORMTTING */
.gnosisCalendar .event-desc, .g104EventTitle, #lbl_EVShortDesc {
 color: #f5f5f5;
 font-weight: normal;
}
.gnosisCalendar .event, span.g104EventDetailsText-Time {
 color: #e8e8e8;
 font-weight: bold;
}
.g104EventDetails .g104EventDetails-summary .g104EventDescription {
 font-size: 12pt;
}
.gnosisCalendar .g104EventDetails .event-desc, .g104EventTitle, #lbl_EVShortDesc {
 color: black;
 font-weight: normal;
}
.g104EventTitle {
 color: black;
 font-weight: normal;
}
.gnosisCalendar.listmode #lbl_EVShortDesc {
 color: white;
 font-weight: normal;
}
.event .g104EventTitle {
 color: #FFFFFF;
 font-weight: normal;
}
.gnosisCalendar .event:hover {
 box-shadow: inset 0 0 10000px 10000px rgba(255, 255, 255, 0.15);
}

Hide Images in Mobile List View

/* Hide Images in Mobile View */
@media screen and (max-width: 767px) {
   .g104EventDetails .g104EventDetails-photo {
   display:none;
   }
   .g104EventDetails .g104EventDetails-summary {
   text-align: start;
   float: none;
   width: 100%;
   }
}
@media screen and (min-width: 768px) {
   .g104EventDetails .g104EventDetails-summary {
   text-align: start;
   float: right;
   width: 65%;
   }
}

Miscellaneous Settings

/*hide certain days in grid mode */
.gnosisCalendar.gridmode .daySunday {
 display: none
}

/*hide all images in list mode*/
.gnosisCalendar:not(.gridmode) .g104EventDetails-photo {
 display: none;
} 

Hide the R Icons

Hide the red icon for Registration Required

.eventStatusIcons-Registerable-Required {
display: none !important;
}

Hide the teal/blue R for Registerable

.eventStatusIcons-Registerable {
display: none !important;
}

 

 

Custom Calendar Links

Apply Category and Location Filter

https://ACRONYM.gnosishosting.net/Events/Calendar?CityFilter=2337,3039,3040,3046,3049,3047,3048&CatFilter=2739

To Open in List View

https://ACRONYM.gnosishosting.net/Events/Calendar?view=list&CatFilter=2415