Personalizações do modo de exibição Calendário

Referência de sintaxe detalhada

commandBarProps

Agrupa as opções de personalização da barra de comandos. Para obter detalhes sobre commandBarProps, confira Referência de sintaxe de personalização da barra de comandos

Confira também

• Referência de sintaxe de personalização da barra de comandos

! [IMPORTANTE] Pré-requisito: configurar a lista antes de criar uma exibição de calendário e aplicar uma formatação JSON

• Antes de criar uma nova exibição de calendário, uma lista deve incluir todas as colunas necessárias para serem usadas em qualquer formatação JSON.
• Depois de criar uma exibição de calendário, se mais colunas forem necessárias, acesse a página Configurações de Lista para criar e adicioná-las a uma exibição de calendário.

Formatação de exibição condicional com base em uma coluna específica

A imagem a seguir mostra um exemplo de formatação condicional aplicada a um modo de exibição Calendário, com base em uma coluna de escolha única chamada PROJETO:

! [OBSERVAÇÃO] Antes de criar uma nova exibição de calendário, verifique se a coluna PROJECT já está existente para aplicar o código JSON ilustrado abaixo. Como alternativa, acesse a página Configurações de Lista para criar e adicionar a coluna PROJECT de escolha única a uma exibição de calendário.

Neste exemplo, a coluna PROJETO tem as seguintes opções:

• Projeto A
• Projeto B
• Projeto C
• Projeto D
• Projeto E

O código JSON abaixo usa classes de interface do usuário modernas do SharePoint Online para aplicar cores, bordas e um efeito de foco por meio da sintaxe de expressão no estilo do 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')))))))))))"
}

A imagem GIF abaixo mostra o resultado final: