Color Coding the Event Calendar
Color coding the ‘Event Calendar’ using Taxonomy and Views.
CREATE THE TAXONOMY
Navigate to: Structure > Taxonomy > Add Vocabulary
- Enter a name for your vocabulary - Example: ‘Event Categories’
- Description (optional) - for this example we’re using ‘Taxonomy terms for our event calendar’
- Select ‘Add Terms’ for the vocabulary you just created
- Enter a term info in the ‘Name’ field - example: ‘Author Appearances’, ‘Mystery Book Club’ etc. (if you want to color code based on different locations use terms such as ‘Brooklyn’, ‘South Shore’, etc.
Repeat steps 5 & 6 until all terms have been added.
ADD THE TAXONOMY TO YOUR EVENT CONTENT TYPE
Navigate to: Structure > Content Types > Event > Manage Fields
Add new field
- Label: Enter the name of your label, for this example we’re using ‘Event Category’
- Field Type: Term reference
- Widget: Checkboxes/Radio Buttons
- Select your ‘Vocabulary’ - for this example it would be ‘Event Categories’
- Save field settings
- Select ‘Required Field’ - this is optional but recommended as it’s a good way to make sure other staff members creating an event choose an option here. If no option is select the event will not be color coded.
- Save Settings
ADD COLOR CODING TO THE EVENT CALENDAR VIEW
- Before beginning to modify your view decide which display of the view you want modified. If you only want to modify the “Month” display - make sure that tab is selected and that all ‘Apply’ buttons say “Apply (this display)” only. If the ‘Apply’ button says “Apply (all displays)” the changes you make will alter every display (Month, Week, Year, etc) of the view.
- We highly recommend you save your 'view' after every step, as you create it. Especially when you see this message come up: “* All changes are stored temporarily. Click Save to make your changes permanent. Click Cancel to discard the view.”
Navigate to: Structure > Views > Event Calendar
- Under ‘Fields’ select ‘Add’
- Select ‘Content: Event Category’ (or the name of field you created in step 1a)
- Apply (this display)
- On the next page leave the settings as they are and click Apply (this display)
- Under ‘Format’ select the ‘Settings’ link next to ‘Calendar Entities’
- Select ‘Provide default field wrapper elements’
- Select the appropriate ‘Inline fields’ - This is the name of the field created in step 1a, so for this example ‘Event Category’
- Under ‘Legend Colors’ set the ‘Stripes’ to be ‘Based on Taxonomy’
- Confirm the correct ‘Term field’ is pre-selected - Example: ‘Event Category’ - if it isn’t select the correct one
Assign each term a color hex code
- Clicking into the field will bring up a color wheel for you to choose from
- Apply (this display)
Navigate to: Content > Add Content > Event
(if you have existing events created you can navigate to ‘Content’ and edit the appropriate selection to include a ‘Taxonomy’ term - step 6).
There are several available fields for you to utilize to create the content of your page:
Title: This text will be used in 4 places:
- The title on your browser window
- The header on your published page
- It will also be used to construct the actual URL of the page
- The Event name displayed on the ‘Event Calendar’
- Body: Use the built in WYSIWYG editor to add text, images, links, and any type of content that tells visitors about the event. Not familiar with the WYSIWYG icons? Placing your mouse to hover over an icon and it tells you what it is for.
- Event Date: The start date/time and end/date time appear on the event page itself as well as controlling where the event is placed on the ‘Event Calendar’
- Event Address: Will appear on the event page
- Books: Are there specific books associated with this event? Add them here.
- Select an ‘Event Category’ (these are the Taxonomy terms you previously created and will control the stripe color displayed for the event)
You can customize the settings of any of these tabs to your preference:
- Menu Settings
- Book Outline
- Revision Information
- URL Path settings
- Meta tags
- Authoring Information
- Publishing Options
You should now see a colored stripe for each event on the calendar.