Personalizaciones de la vista Calendario

Referencia de sintaxis detallada

commandBarProps

Agrupa las opciones de personalización de la barra de comandos. Para obtener más información sobre commandBarProps, consulte la referencia de sintaxis de personalización de la barra de comandos

Consulte también

• Referencia de sintaxis de personalización de la barra de comandos

! [IMPORTANTE] Requisito previo: configuración de lista antes de crear una vista de calendario y aplicar un formato JSON

• Antes de crear una nueva vista de calendario, una lista debe incluir todas las columnas necesarias que se usarán en cualquier formato JSON.
• Después de crear una vista de calendario, si se requieren más columnas, vaya a la página Configuración de lista para crearlas y agregarlas a una vista de calendario.

Formato de vista condicional basado en una columna específica

En la imagen siguiente se muestra un ejemplo de formato condicional aplicado a una vista de calendario, basándose en una columna de opción única denominada PROYECTO:

! [NOTA] Antes de crear una nueva vista de calendario, asegúrese de que la columna PROJECT ya existe para aplicar el código JSON que se muestra a continuación. Como alternativa, vaya a la página Configuración de lista para crear y agregar la columna PROJECT de opción única a una vista de calendario.

En este ejemplo, la columna PROYECTO tiene las siguientes opciones:

• Proyecto A
• Proyecto B
• Proyecto C
• Proyecto D
• Proyecto E

El código JSON siguiente usa las clases de interfaz de usuario modernas de SharePoint Online para aplicar colores, bordes y un efecto de desplazamiento mediante la sintaxis de expresiones de estilo 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')))))))))))"
}

En la imagen GIF siguiente se muestra el resultado final: