Colored Calendar weekend (de)


Colored Calendar weekend de title

Und wieder mal ein AfraIT Shorty.

Hier zeige ich wie du das Wochenende des Kalenders einfärben kannst. Eine schöne und einfache Idee, die auch den Usern gefällt.

Wie so oft beginnen wir ganz am Anfang. Gehe zur Seite auf der du einen Kalender haben möchtest, klicke auf die Websiteinhalte und dann auf “App hinzufügen”.

Colored-Calendar-weekend-de_1

Unter der Überschrift “Apps, die Sie hinzufügen können” wähle den Kalender aus.

Colored-Calendar-weekend-de_2

Vergib einen Namen (Ich habe hier einfach “Testkalender” gewählt) und klicke auf “Erstellen”.

Colored-Calendar-weekend-de_3

Du wirst nun wieder zu der App-Übersicht geleitet. Klicke nun auf den Titel oder die Kachel des soeben erstellten Kalenders.

Colored-Calendar-weekend-de_4

Nun kannst du rechts neben deinen Namen auf das Zahnrad klicken und die Seite bearbeiten.

Colored-Calendar-weekend-de_5

Klicke nun auf “Webpart hinzufügen” (1), dann unter den Kategorien auf “Medien und Inhalt” (2), wähle dann den “Inhalts-Editor” (3) aus und klicke abschließend auf “Hinzufügen” (4).

Colored-Calendar-weekend-de_6-1

Nun klicke innerhalb des Inhalts-Editors auf “Klicken Sie hier, um neuen Inhalt hinzuzufügen”.

Colored-Calendar-weekend-de_7

Es wird nun die Ribbonleiste aufgeklappt. Klicke in dieser auf “Quelle bearbeiten”.

Colored-Calendar-weekend-de_8

Des Rätsels Lösung ist ein kleines Stückchen CSS, welches die Spalten des Samstag und Sonntag sucht und dort die Hintergrundfarbe ändert.
Du kannst die Farbe nach deinen Wünschen ändern. Ändere dafür einfach den Wert #ebebeb in einen anderen.

Colored-Calendar-weekend-de_9

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

Klicke dann im Inhalts-Editor auf “OK”. Du solltest nun auch schon sehen, dass es geklappt hat.

Gehe abschließend noch über das Ribbon auf “Seite” und dann auf “Bearbeitung beenden”.

Colored-Calendar-weekend-de_10

Und schon bist du fertig.

Colored-Calendar-weekend-de_11

Ich hoffe dir hat dieser AfraIT Shorty gefallen.
Es würde mich freuen, wenn du diesen Beitrag in deinen sozialen Netzwerken teilst oder du einfach unterhalb kommentierst, falls du Anmerkungen / Lob hast.

One response to “Colored Calendar weekend (de)”

Leave a Reply

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