Anpassungen der Kalenderansicht

Detaillierte Syntaxreferenz

commandBarProps

Gruppiert die Anpassungsoptionen der Befehlsleiste. Ausführliche Informationen zu commandBarProps finden Sie unter Syntaxreferenz zur Anpassung der Befehlsleiste

Siehe auch

• Syntaxreferenz zur Anpassung der Befehlsleiste

! [WICHTIG] Voraussetzung: Auflisten des Setups vor dem Erstellen einer Kalenderansicht und Anwenden einer JSON-Formatierung

• Vor dem Erstellen einer neuen Kalenderansicht sollte eine Liste alle erforderlichen Spalten enthalten, die in jeder JSON-Formatierung verwendet werden sollen.
• Wenn nach dem Erstellen einer Kalenderansicht weitere Spalten erforderlich sind, wechseln Sie zur Seite Listeneinstellungen , um sie zu erstellen und einer Kalenderansicht hinzuzufügen.

Bedingte Ansichtsformatierung basierend auf einer bestimmten Spalte

Die folgende Abbildung zeigt ein Beispiel für eine bedingte Formatierung, die auf eine Kalenderansicht angewendet wird, basierend auf einer Einfachauswahlspalte mit dem Namen PROJECT:

! [HINWEIS] Stellen Sie vor dem Erstellen einer neuen Kalenderansicht sicher, dass die SPALTE PROJECT bereits vorhanden ist, um den unten dargestellten JSON-Code anzuwenden. Alternativ können Sie die Seite Listeneinstellungen aufrufen, um die PROJECT-Spalte mit einzeler Auswahl einer Kalenderansicht zu erstellen und hinzuzufügen.

In diesem Beispiel hat die Spalte PROJECT die folgenden Optionen:

• Projekt A
• Projekt B
• Projekt C
• Projekt D
• Projekt E

Der folgende JSON-Code nutzt die SharePoint Online Modern UI-Klassen, um Farben, Rahmen und einen Hover-Effekt über die Excel-ähnliche Ausdruckssyntax anzuwenden:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/calendar-formatting.schema.json",
  "additionalEventClass": "=if([$PROJECT] =='Project A' && @isSelected == false, 'sp-css-backgroundColor-successBackground50 sp-css-color-BlackText sp-css-borderColor-GreenText ms-bgColor-sharedGreenCyan10--hover ms-fontColor-white--hover', if([$PROJECT] =='Project A' && @isSelected == true, 'ms-bgColor-green sp-css-color-WhiteText', if([$PROJECT] =='Project B' && @isSelected == false, 'sp-css-backgroundColor-BgPeach sp-css-color-BlackText sp-css-borderColor-RedText ms-bgColor-sharedRed10--hover ms-fontColor-white--hover', if([$PROJECT] =='Project B' && @isSelected == true, 'sp-css-backgroundColor-redDark sp-css-color-WhiteText', if([$PROJECT] =='Project C' && @isSelected == false, 'sp-css-backgroundColor-BgGold sp-css-color-BlackText sp-css-borderColor-BrownText ms-bgColor-yellow--hover ms-fontColor-white--hover', if([$PROJECT] =='Project C' && @isSelected == true, 'ms-bgColor-sharedOrange10 sp-css-color-BlackText', if([$PROJECT] =='Project D' && @isSelected == false, 'ms-bgColor-communicationTint20 sp-css-color-BlackText sp-css-borderColor-BlueText ms-bgColor-sharedCyanBlue10--hover ms-fontColor-white--hover', if([$PROJECT] =='Project D' && @isSelected == true, 'sp-css-backgroundColor-BlueText sp-css-color-WhiteText', if([$PROJECT] =='Project E' && @isSelected == false, 'sp-css-backgroundColor-BgLilac sp-css-color-BlackText sp-css-borderColor-DarkPurpleText ms-bgColor-sharedBlueMagenta20--hover ms-fontColor-white--hover', if([$PROJECT] =='Project E' && @isSelected == true, 'sp-css-backgroundColor-BgPurple sp-css-color-WhiteText', if(@isSelected == false, 'sp-css-backgroundColor-neutralBackground20 sp-css-color-BlackText ms-bgColor-neutralTertiaryAlt--hover ms-fontColor-black--hover', 'sp-css-backgroundColor-neutralTertiary sp-css-color-WhiteText')))))))))))"
}

Das folgende GIF-Bild zeigt das Endergebnis: