詳しい構文のリファレンス
commandBarProps
コマンド バーのカスタマイズ オプションをグループ化します。 詳細については、「commandBarPropsコマンド バー のカスタマイズ構文リファレンス」を参照してください
関連項目
![重要] 前提条件: 予定表ビューを作成し、JSON 形式を適用する前に設定を一覧表示する
- 新しい予定表ビューを作成する前に、すべての JSON 形式で使用するために必要なすべての列をリストに含める必要があります。
- 予定表ビューを作成した後、さらに列が必要な場合は 、[リスト設定] ページ に移動して作成し、予定表ビューに追加します。
特定の列に基づく条件付きビューの書式設定
次の図は、 選択された PROJECT という名前の 1 つ列に基づいて、カレンダー ビューに適用される条件付き書式の例を示しています。
![注]新しい予定表ビューを作成する前に、次に示す JSON コードを適用するために PROJECT 列が既に存在していることを確認します。 または、[ リスト設定] ページ に移動して、単一選択の PROJECT 列を作成し、予定表ビューに追加します。
この例では、 PROJECT 列には次のオプションがあります:
- プロジェクト A
- プロジェクト B
- プロジェクト C
- プロジェクト D
- プロジェクト E
次の JSON コードでは、SharePoint Online モダン UI クラスを使用して、 Excel スタイルの式構文を使用して色、罫線、ホバー効果を適用します。
{
"$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')))))))))))"
}
次の gif 画像は、最終的な結果を示しています:
