locked
Change Border color from Grey to red SharePoint Calenders using css RRS feed

  • Question

  • i have a SharePoint calendar webpart on my page that i would like to specifically change the border color for each cell to a suitable color that fits my site(its currently grey but i will like to change it to red). i would also like to change the background color of the an event on the calendar from blue to gray with the text white.

    Any pointer will help. But i am more concerned with the border color of the whole calendar


    • Edited by dongotti Wednesday, March 21, 2018 11:02 AM
    Wednesday, March 21, 2018 11:01 AM

Answers

  • Hi,

    Try with below sample CSS, insert script editor or content editor webpart to calendar display page and insert the CSS to it.

    <style type="text/css">
            .ms-acal-summary-dayrow th{
                border-top-color:red !important;
                 border-bottom-color:red !important;
            }
            .ms-acal-month td{
                border-color:red !important;
            }
            .ms-acal-month-top{
                border-bottom-color:red !important;
            }
            .ms-acal-item{
                background-color:grey !important;
            }
        </style>

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    • Marked as answer by dongotti Thursday, March 22, 2018 11:00 AM
    Thursday, March 22, 2018 2:06 AM

All replies

  • Hi,

    Try with below sample CSS, insert script editor or content editor webpart to calendar display page and insert the CSS to it.

    <style type="text/css">
            .ms-acal-summary-dayrow th{
                border-top-color:red !important;
                 border-bottom-color:red !important;
            }
            .ms-acal-month td{
                border-color:red !important;
            }
            .ms-acal-month-top{
                border-bottom-color:red !important;
            }
            .ms-acal-item{
                background-color:grey !important;
            }
        </style>

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    • Marked as answer by dongotti Thursday, March 22, 2018 11:00 AM
    Thursday, March 22, 2018 2:06 AM
  • thanks for this Lee. Much appreciated

    Thursday, March 22, 2018 11:01 AM