locked
Add different Colors to Calendar Overlay Settings color RRS feed

  • Question

  • Dear All,

             I'm trying to show events on a calendar with different colors. The events are categorized based on Status field of

           Calendar list and I have two statuses. 1. Confirmed 2. Planning.

            When I create calendar overlays for two statues I'm only getting following colors.

            Dark Teal, Dark Blue, Dark Green, Olive Green, Red, Dark Purple Brown.   

     Can you please tell me how can I add some more different colors like yellow, sky blue to this drop down list.

            I referred this article http://davidlozzi.com/2012/01/26/color-code-your-sharepoint-calendar/

    Thanks,

    Dilip

    Tuesday, January 13, 2015 2:32 AM

Answers

All replies

  • You can use alternate as jslink, where you are program to show which color on which type of event.

    http://msdn.microsoft.com/en-us/magazine/dn745867.aspx

    You can fine multiple sample on internet for this.


    Thanks, Ashish | Please mark a post helpful/answer if it is helpful or answer your query.

    Tuesday, January 13, 2015 2:54 AM
  • try these links:

    http://davidlozzi.com/2012/06/20/customize-the-sharepoint-calendar-colors/

    http://www.degdigital.com/blog/four-easy-steps-to-customized-color-code-calendars-in-sharepoint/

    http://sharepoint.stackexchange.com/questions/75674/how-can-i-change-the-default-color-for-calendar-events-without-overlaying

    http://blog.orbitone.com/post/Calendar-Colour-Coding-in-SharePoint

    also you can use jslink

    Tuesday, January 13, 2015 7:37 AM
  • Hi,

    You can achieve it by using jslink. To get an idea, visit the below link

    https://code.msdn.microsoft.com/office/Client-side-rendering-code-0a786cdd


    Thanks, Sures | MCTS SharePoint

    Tuesday, January 13, 2015 7:39 AM
  • Hi,

    The colors are controlled by the css classes ms-acal-color1 to ms-acal-color9.

    You can override to the style as below, then add the style into a content editor web part in the calendar view.

    <style type="text/css">
    .ms-acal-color1{
       background-color:lime !important;
    }
    </style>

    Here is a similar thread for your reference:

    https://social.msdn.microsoft.com/Forums/sharepoint/en-US/01159adf-7630-47ee-8938-b30bd0c37e83/any-way-to-customize-the-calendar-overlay-color-possibilities

    Best Regards


    Dennis Guo
    TechNet Community Support



    • Proposed as answer by Patrick_Liang Friday, January 23, 2015 12:08 PM
    • Edited by Dennis Guo Wednesday, January 28, 2015 1:58 AM updated: apply a custom CSS instead
    • Marked as answer by Patrick_Liang Wednesday, January 28, 2015 2:00 AM
    Wednesday, January 14, 2015 9:48 AM
  • @Dennis Guo : MS recommendation not to modify files installed under 15 Hive. Any patch/CU/Service Pack can overwrite those changes.

    Thanks, Ashish | Please mark a post helpful/answer if it is helpful or answer your query.

    Wednesday, January 14, 2015 12:52 PM
  • Three quick notes to add to this:

    1. If you're just using the web part view of a calendar overlay, the above style override is great. If you're using it on the standard calendar view page, you'll also want to update the style used by the key ('apanel') in the left nav so the colors match.
    <style type="text/css">
    .ms-acal-color1{
       background-color:#CC9933 !important;
    }
    
    </style><style type="text/css">
    .ms-acal-apanel-color1{
       background-color:#CC9933 !important;
    }

    2. Quick reference for HTML colors: http://www.w3schools.com/html/html_colors.asp

    3. The JSLink mentioned in some responses are for Visual Studio solutions, NOT browser-based solutions that power users can do via the browser. The calendar view does not have an available JSLink property. I'm not saying you shouldn't use that approach, just clarifying it.


    SharePoint Consultant | SharePoint MVP | <a href="http://www.idubbs.com/blog"> My Blog</a> | <a href="http://www.sharepointmn.com/">Minnesota SharePoint User Group (MNSPUG)</a>

    Saturday, December 5, 2015 7:20 PM