Joe, thank you for the video and CSS. I tested it in my SharePoint site. I can see the new colors in calendar overlay view, but when I switch to each view calendar, the color goes back to the default color. Are there any way to keep the custom color after switching to the individual view calendar?
Hey, I tried to follow the instructions. Oddly enough, when I go to modify the overlay and go to the color dropdown list, it shows my custom colors as mini thumbnails. However, when I select it, the colors remain the same as the old set of colors I was trying to replace on the calendar.
Hi Joe. I'm trying to follow your instructions, but I'm not able to access your CSS file. The link you provided is not working. I'm only getting an error that the site can't be reached.
Hey Joe! First of all thank you for the video. But, do you still have the CSS? The link that you shared a while ago doesn't work anymore - website is unreachable... I'd be very grateful if you could share it with me!
Hi Jean, in the description for this video I call that out and link to the file with the CSS I'm referencing. Here it is again: www.spsimply.com/home/2018/6/2/sharepoint-customize-the-colors-for-calendar-overlays
Joe, how do you carry that CSS overlay to when you click on the individual calendar and the color stays the CSS color. For Instance, my overlay is great BUT when i click on the calendar is it default blue. I want the Overlay color to stay with the WHOLE individual calendar. Thanks
Hi Phillip, I believe the answer is that it's not possible to have the underlying calendar retain the overlay color. I'll do some poking around and see if I can confirm that.
Hello Celeste, The only way to accomplish this would be to edit the specific view pages and add a content editor or script editor web part with a specific CSS file that overrides the default blue color on that view page.
Is it possible to also change the font color? I tried to use the developer window to find the class the same way as the other colors, but i can't get it to work...I just want to change the font from white to black for all calendar items (and the overlay list on the left hand side)
Hi Nathan, It should be possible by targeting ".ms-acal-sdiv a" (the anchor/link for that element). It doesn't look like that class is specific just to the title based on naming convention but that will allow you to adjust the font color. For the left-nav it's ."ms-acal-apanel-item span" - - I'd be sure to do some testing to see if that changes the font color in any other calendar interfaces.
Hello Joe, Can you help with navigation of this. when I click on "meetings" for example, the color changes to the general calendar color, and the key color for meetings and category description disappears on the left. (as it does in your video). Is there any way to have the category title remain (like a toggle button) and the color of the event stay the color chosen? Thank you for your help.
Hello Sharon, The simple answer is that you can't do much to control the color coding on the underlying calendar pages, or in that left navigation section. You *could* use the same CSS approach and a version of that file into a content editor on each of the individual calendar view pages to control the colors. A bit of busy work to make that happen as you'd have to have a CSS file for each calendar category, and you'd have to manually maintain them if you changed things.
Thank you this is very helpful. I was able to follow your excellent instructions and the new colors are showing up on the calendar, which is awesome. The only problem is that the Color dropdown still lists the old color namesm so Yellow shows up when you select Olive Green #76956 and turquoise shows up when you select Red #ed0033 etc. I am ok with this but the users get confused easily. Is there a way to change the color names so they correspond to the actual colors in the overlay?
Hello Joe, First of all, thank you. Then, I have few errors that make my .css unreadable by SharePoint and I can't figure out why. Here they are : ColorCoded.aspx:1 Refused to apply style from 'MySharePoint' ' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Do you have any clue? Thanks for all
Hello Julien, I think you just need to re-save your file with a .css extension. Sounds like it might just be HTML or a regular basic text file. Let's start there and you can let me know if that works.
Thanks for the video. I've followed the clear instructions and I'm seeing no changes. To confirm my troubleshooting steps: SharePoint Server Publishing Infrastructure = Active SharePoint Server Publishing = Active Valid CSS file uploaded and linked to from Master Page > Alternate CSS URL The CSS file loads without any issues if pasting the link into a browser, for example. I've refreshed and cleared the cache to eliminate that as a possible issue. Any suggestions?
Hello Steven, When you say you're seeing no changes, do you mean you aren't seeing your custom colors reflected in your default color-coded view? The first place to start is to ensure the default SharePoint calendar overlay colors are displaying as expected. Then ensure the formatting in your CSS file is correct.
@@JoePreiner Hi Joe. Thanks for the reply. Yes, I'm not seeing the custom colours in the default view, as if no customisation has been implemented. The CSS file is from your example and validates.
Having looked at the source code of the calendar, the link id is referencing the correct CSS file, however, when inspecting an element in developer mode, the original colours are still being referenced.
@@JoePreiner It does, I've copied and pasted your CSS example exactly as it is with the !important property. It sounds like this issue shall remain a mystery as all steps seem to be correct, but thanks for your time in any case, much appreciated.
Very helpful info, got it to work. Question though, with Modern sites do you know of a way to get a similar Calendar web part added to a site and alter the color coding in a similar fashion? I know for whatever reason Microsoft hasn't chosen to include it, even though they are transitioning everything away from Classic.
I haven't found a way to do much with the modern UI calendars yet. Modern pages ignore/block any custom CSS settings by design so unless it's already baked into the web part configuration you're mostly stuck with what Microsoft gives you.
Hello Brett, You can use JSON formatting to accomplish this in the modern UI. Here's the Microsoft reference guide you can copy/paste into your own calendar: docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-calendar-formatting
Hello everyone - there's a note in the description for this video that links to the CSS for this. Just have to click the "show more" link. Here it is again: www.spsimply.com/home/2018/6/2/sharepoint-customize-the-colors-for-calendar-overlays
Is there a way to change color of the text in the calendar? Both the title and the description of a calendar post. For example, I would need black text and a bright background mayby lightgray or white.
Yes, you can use that alternate CSS file to target the text for the title and description as well. The classes you need to target involve .ms-acal-sdiv a, .ms-acal-mdiv a, .ms-acal-ddiv a if you want to cover both the time and the title.
@@JoePreiner Thanks for the answer!! One more thing I thought about. Is it necessary to create "overlay calendars" to be able to change colours or can I change the "default calendar"s colours? Because that would be really awesome in my case.
@@Stufman You can change the default color, but that just means instead of being blue, it's going to be whatever new color your choose. If you want multiple colors, the easiest way to achieve that is to use the overlay functionality. By default a SharePoint calendar currently only has one color for events.
@@JoePreiner I have followed your instructions exactly from the video but I cant get the colors to change either for the default calender or for overlay calenders. I can't figure out what's wrong. I was just thinking that color0 might but for default calender? I wanted black text with white background so I used this but nothing happens at all: .ms-acal-color0 { background-color:#ffffff !important; } .ms-acal-color0 a { color:#000000 !important; } .ms-acal-ddiv-color0 a { color:#000000 !important; } .ms-acal-apanel-color0 { background-color:#ffffff !important; } .ms-acal-apanel-color0 a span { color:#000000 !important; } .ms-acal-ddiv-color0 a { color:#000000 !important; } .ms-acal-color1 { background-color:#ffffff !important; } .ms-acal-color1 a { color:#000000 !important; } .ms-acal-ddiv-color1 a { color:#000000 !important; } .ms-acal-apanel-color1 { background-color:#ffffff !important; } .ms-acal-apanel-color1 a span { color:#000000 !important; } .ms-acal-ddiv-color1 a { color:#000000 !important; }
@@Stufman The default calendar item is just ms-acal-item. It will inherit the site theme color if you don't set it manually in your custom CSS file. There isn't a specific class for the title and time for each color, but you can control each one for the entire calendar. For example, if you want the times on the events to be black, you'd use: .ms-acal-sdiv, .ms-acal-mdiv, .ms-acal-ddiv { color: black } If you wanted the event titles to all be black, you'd use: .ms-acal-sdiv a, .ms-acal-mdiv a, .ms-acal-ddiv a { color: black !important } Hopefully that helps.
@@rickmellish5815 Have you referenced it in the "Alternate CSS" field under site settings? The site has to know that it's there. If it's just sitting in a document library the site won't care.
Hey Joe, it’s me again. I’ve been watching a lot of your videos as you can see 😂. Can you by chance customize the calendar entries so that it does not show the times on the calendar?
Hi again! Same kind of CSS deal for this. The calendar items have a class for the time element: ms-acal-time. So if you want to hide the time, in your CSS override file just do: .ms-acal-time { display:none !important; } You could obviously also tack this on to the category specific classes if you didn't want to hide the time for every calendar event.
This video needs updating. You skip over how you set up your original CSS colors with your new colors. You mention Notepad ++ but you don't even show what you did with the program. You also don't show how Sharepoint lists out the new colors that you've added. I'm sorry but I don't understand how this video helped others when you glossed over a critical component into how one creates unique colors in Sharepoint calendaring.
