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: Configuração da lista antes de criar uma vista de calendário e aplicar uma formatação JSON

• Antes de criar uma nova vista de calendário, uma lista deve incluir todas as colunas necessárias a serem utilizadas em qualquer formatação JSON.
• Depois de criar uma vista de calendário, se forem necessárias mais colunas, aceda à página Definições da Lista para criar e adicioná-las a uma vista 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:

! [NOTA] Antes de criar uma nova vista de calendário, certifique-se de que a coluna PROJECT já existe para aplicar o código JSON ilustrado abaixo. Em alternativa, aceda à página Definições da Lista para criar e adicionar a coluna PROJECT de opção única a uma vista 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: