Colored Calendar weekend (en)

Colored Calendar weekend en title
, , ,


In this blog post I want to show you how you can modify you weekend in the calender view to make it more user friendly. Therefore we will make the weekend background grey.

As most of the time we will start at the very first steps. Go to the site where you want to add your calender, click on Site Contents and then click on “add an app”.


Under the heading “Apps you can add” select the Calendar.


Give your calendar a name (I choose “Test Calendar”) and click on “Create”.


Now you get redirected to your App overview. Click the Title or the Tile of your new created calendar.


You can edit your page after clicking on the cogwheel next to your name and click then on “Edit page”.


Click on “Add a Web Part” (1). Under Categories select “Media and Content” (2), then select “Content Editor” (3) and then click on “Add” (4)


Now click inside the Content Editor onto “Click here to add new content”.


The ribbon should now be visible. Click in there “Edit Source”.


All we need is a frieeend *sing*…. ups wrong text, all we need is a little CSS here.
This will look for the columns Saturday and Sunday and changes the background color.
You can change the color by yourself. Just change the value #ebebeb to a value of your choice.


<style type="text/css">  > tbody > tr > td:nth-of-type(6) {  
        background-color: #ebebeb !important; 
  > tbody > tr > td:nth-of-type(7) {  
        background-color: #ebebeb !important;  

Click after that in the Content Editor onto “OK”. Now you should already see, that it worked.

Last but not least click in the ribbon onto “Page” and then “Stop Editing”.


Now you are done!


I hope you liked this AfraIT Shorty.
Also I would love to see, if you share this blog post in your social networks or if you comment this post below

Leave a Reply

Your email address will not be published. Required fields are marked *