SOLVED

Calendar Overlay Color Menu

%3CLINGO-SUB%20id%3D%22lingo-sub-1433309%22%20slang%3D%22en-US%22%3ECalendar%20Overlay%20Color%20Menu%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1433309%22%20slang%3D%22en-US%22%3E%3CP%3EGood%20Morning%20All%2C%3C%2FP%3E%3CP%3EI%20have%20a%20SPO%20calendar%20with%20multiple%20calendar%20overlays%20and%20used%20a%20separate%20CSS%20for%20the%20overlay%20colors.%20However%2C%20the%20default%20overlay%20colors%2C%20in%20the%20Color%20field%20drop-down%20menu%2C%20do%20not%20match%20the%20colors%20in%20the%20CSS%20file.%20Is%20there%20a%20way%20to%20change%20the%20menu%20options%20in%20the%20Calendar%20Overlay%20settings%20%3CSTRONG%3EColor%3C%2FSTRONG%3E%20field%3F%20A%20screenshot%20is%20below.%20Many%20thanks!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1433309%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ECalendars%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1433673%22%20slang%3D%22en-US%22%3ERe%3A%20Calendar%20Overlay%20Color%20Menu%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1433673%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F565483%22%20target%3D%22_blank%22%3E%40PLove59%3C%2FA%3E%26nbsp%3BYou%20can't%20change%20the%20options%20in%20the%20dropdown%2C%20but%20you%20can%20overwrite%20the%20colors%20when%20calendars%20are%20rendered%20in%20the%20page%20using%20CSS.%20How%20did%20you%20add%20the%20custom%20CSS%20to%20your%20page%3F%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1435951%22%20slang%3D%22en-US%22%3ERe%3A%20Calendar%20Overlay%20Color%20Menu%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1435951%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F532869%22%20target%3D%22_blank%22%3E%40derhallim%3C%2FA%3EGood%20Morning%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20used%20a%20custom%20CSS%20and%20applied%20it%20to%20the%20Master%20page%20via%20the%20'Alternate%20CSS%20URL.'%26nbsp%3B%20I%20assumed%20the%20new%20stylesheet%20would%20override%20the%20available%20colors%20in%20the%20Calendar%20Overlay%20settings%20'Color'%20field%20menu%2C%20but%20it%20doesn't.%26nbsp%3B%20Fortunately%2C%20I'm%20the%20single%20admin%20for%20our%20SharePoint%20site%20and%20know%20there%20is%20a%20custom%20CSS%20for%20the%20color%20fields.%26nbsp%3B%20However%2C%20if%20anyone%20comes%20in%20behind%20me%20and%20adds%20a%20new%20overlay%20the%20menu%20options%20are%20going%20to%20be%20confusing.%26nbsp%3B%20There%20is%20no%20way%20to%20replace%20the%20menu%20color%20names%20programmatically%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1435999%22%20slang%3D%22en-US%22%3ERe%3A%20Calendar%20Overlay%20Color%20Menu%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1435999%22%20slang%3D%22en-US%22%3EHonestly%2C%20I%20would%20not%20recommend%20any%20kind%20of%20these%20customizations.%20If%20you're%20worried%20about%20the%20person%20who's%20going%20to%20be%20managing%20the%20site%20after%20you%2C%20then%20what%20you're%20doing%20here%20isn't%20going%20good%20for%20them.%20These%20kinds%20of%20customizations%20aren't%20really%20supported%2C%20to%20change%20the%20stuff%20out%20of%20the%20box%20with%20CSS%20like%20that%20specially%20with%20SharePoint%20online.%20Once%20Microsoft%20decides%20to%20update%20the%20HTML%20or%20anything%20for%20its%20controls%2C%20or%20once%20your%20company%20decides%20to%20go%20to%20modern%20sites%2C%20your%20company%20will%20be%20mad%20at%20you.%3CBR%20%2F%3E%3CBR%20%2F%3EMy%20suggestion%20is%20to%20discuss%20the%20business%20need%20itself%20and%20check%20how%20changing%20these%20colors%20would%20increase%20the%20productivity%20of%20the%20business%2C%20rather%20than%20trying%20to%20tweak%20the%20product%20itself%20in%20an%20unsupported%20way.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1438544%22%20slang%3D%22en-US%22%3ERe%3A%20Calendar%20Overlay%20Color%20Menu%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1438544%22%20slang%3D%22en-US%22%3EThank%20you%20for%20your%20response.%20However%2C%20we%20are%20using%20modern%20sites%20and%20all%20I%20can%20do%20moving%20forward%20is%20maintain%20documentation%20for%20any%2Fall%20site%20customization%20and%20hopefully%2C%20keep%20everyone%20relatively%20happy.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1440075%22%20slang%3D%22en-US%22%3ERe%3A%20Calendar%20Overlay%20Color%20Menu%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1440075%22%20slang%3D%22en-US%22%3EI%20understand%2C%20but..%20what%20if%20Microsoft%20makes%20a%20change%20that%20even%20you%20can't%20manage%20because%20customizations%20were%20not%20supported%20in%20the%20first%20place%3F%20In%20that%20case%20you'll%20have%20very%20unhappy%20users.%20Better%20to%20tell%20them%20about%20the%20limitations%20up%20front%20than%20to%20do%20unsupported%20workarounds%20then%20having%20to%20explain%20why%20they're%20not%20working%20later.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1440102%22%20slang%3D%22en-US%22%3ERe%3A%20Calendar%20Overlay%20Color%20Menu%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1440102%22%20slang%3D%22en-US%22%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F532869%22%20target%3D%22_blank%22%3E%40derhallim%3C%2FA%3E%2C%20you%20are%20correct.%20I%20will%20speak%20with%20my%20managers%20and%20determine%20how%20they%20want%20to%20proceed.%20Thank%20you%20for%20all%20of%20your%20feedback.%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Good Morning All,

I have a SPO calendar with multiple calendar overlays and used a separate CSS for the overlay colors. However, the default overlay colors, in the Color field drop-down menu, do not match the colors in the CSS file. Is there a way to change the menu options in the Calendar Overlay settings Color field? A screenshot is below. Many thanks!

 

6 Replies
Highlighted

@PLove59 You can't change the options in the dropdown, but you can overwrite the colors when calendars are rendered in the page using CSS. How did you add the custom CSS to your page? 

Highlighted

@derhallimGood Morning,

 

I used a custom CSS and applied it to the Master page via the 'Alternate CSS URL.'  I assumed the new stylesheet would override the available colors in the Calendar Overlay settings 'Color' field menu, but it doesn't.  Fortunately, I'm the single admin for our SharePoint site and know there is a custom CSS for the color fields.  However, if anyone comes in behind me and adds a new overlay the menu options are going to be confusing.  There is no way to replace the menu color names programmatically?

Highlighted
Solution
Honestly, I would not recommend any kind of these customizations. If you're worried about the person who's going to be managing the site after you, then what you're doing here isn't going good for them. These kinds of customizations aren't really supported, to change the stuff out of the box with CSS like that specially with SharePoint online. Once Microsoft decides to update the HTML or anything for its controls, or once your company decides to go to modern sites, your company will be mad at you.

My suggestion is to discuss the business need itself and check how changing these colors would increase the productivity of the business, rather than trying to tweak the product itself in an unsupported way.
Highlighted
Thank you for your response. However, we are using modern sites and all I can do moving forward is maintain documentation for any/all site customization and hopefully, keep everyone relatively happy.
Highlighted
I understand, but.. what if Microsoft makes a change that even you can't manage because customizations were not supported in the first place? In that case you'll have very unhappy users. Better to tell them about the limitations up front than to do unsupported workarounds then having to explain why they're not working later.
Highlighted
@derhallim, you are correct. I will speak with my managers and determine how they want to proceed. Thank you for all of your feedback.