Calendar Overlay

Summary: Calendar overlay allows you to combine calendars and color code events based on metadata.

Instructions:

1. Create a view for each category, and then create a new view that will aggregate all the calendars into one view
2. Set filter on the view so that no content from this calendar will display like Created by is equal to None
3. In the new view, select Calendar Overlay from the calendar ribbon
4. Select New calendar
5. Enter the name of the calendar you are linking – this will display on the left panel of the calendar view
   Note: this can be a calendar in a different site collection or a view in the current calendar of events filtered based by metadata
6. Enter the Color for the events for this calendar
7. Enter the site URL then select resolve, select the correct calendar and the calendar view
8. Then select ok
9. Repeat for all additional calendars and/or views

Add Script to Change Colors

You can add the below script in  a content editor webpart to change the default color to match your sites color scheme.

<style type=”text/css”>
.ms-acal-item {  BORDER: #BFBFBF; BACKGROUND-COLOR: #ffffff }
.ms-acal-default-hover {  BORDER: #BFBFBF; BACKGROUND-COLOR: #ffffff }
.ms-acal-apanel-item {  BORDER: #BFBFBF; BACKGROUND-COLOR: #ffffff }
.ms-acal-color1{  BACKGROUND-COLOR: #f8af8e}
.ms-acal-selcolor1{  BACKGROUND-COLOR: #f8af8e}
.ms-acal-apanel-color1{  BORDER-COLOR: #BFBFBF; BACKGROUND-COLOR: #f8af8e; }
.ms-acal-color2{  BACKGROUND-COLOR: #ffe380}
.ms-acal-selcolor2{  BACKGROUND-COLOR: #ffe380}
.ms-acal-apanel-color2{  BORDER-COLOR: #BFBFBF; BACKGROUND-COLOR: #ffe380; }
.ms-acal-color3{  BACKGROUND-COLOR: #c1d72d}
.ms-acal-selcolor3{  BACKGROUND-COLOR: #c1d72d}
.ms-acal-apanel-color3{  BORDER-COLOR: #BFBFBF; BACKGROUND-COLOR: #c1d72d; }
.ms-acal-color4{  BACKGROUND-COLOR: #7ed1e1}
.ms-acal-selcolor4{  BACKGROUND-COLOR: #7ed1e1}
.ms-acal-apanel-color4{  BORDER-COLOR: #BFBFBF; BACKGROUND-COLOR: #7ed1e1; }
.ms-acal-color5{  BACKGROUND-COLOR: #c6aad2}
.ms-acal-selcolor5{  BACKGROUND-COLOR: #c6aad2}
.ms-acal-apanel-color5{  BORDER-COLOR: #BFBFBF; BACKGROUND-COLOR: #c6aad2; }
</style>