> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-calendar.md). # AX - Calendario ## Resumen **AX - Calendario** es un componente de Experience Cloud que muestra los registros de Salesforce como eventos en una vista de calendario interactiva en las páginas de Experience Sites. Úsalo para mostrar a los usuarios del portal sus citas, tareas programadas, inscripciones a eventos, fechas límite de proyectos o cualquier registro basado en fechas. Los usuarios pueden ver los eventos por mes, semana, día o en formato de agenda, y hacer clic en los eventos para ver detalles o navegar a los registros. Perfecto para la programación de citas con clientes, calendarios de eventos, vistas de reservas de servicios, cronogramas de proyectos o cualquier lugar donde los usuarios del portal necesiten ver sus गतिविधades basadas en fechas en un formato de calendario visual. ## **Conectar con datos de Salesforce** Este paso esencial al configurar tu componente de Avonni Calendar establece la conexión entre los elementos de tu calendario y los datos relevantes dentro de tu entorno de Salesforce. La fuente de datos determina qué información mostrará tu calendario.
Tienes dos opciones para usar la fuente de datos
OpciónDescripciónMejor caso de uso
ManualIntroduce manualmente eventos y recursos directamente en la interfaz del calendario.Eventos únicos, o situaciones en las que no necesitas que el calendario esté vinculado a tus datos de Salesforce.
ConsultaExtrae automáticamente la información de eventos y recursos de tus datos de Salesforce. Puedes crear una consulta personalizada para mostrar datos de cualquier objeto de Salesforce.Cuando quieres que tu calendario muestre siempre la información más actualizada de tus registros de Salesforce.
* **Manual:** * Agrega eventos y recursos directamente dentro de la interfaz del calendario. * Útil para eventos únicos o cuando no necesitas vincular datos a Salesforce. * **Consulta:** * Extrae información directamente de tus datos de Salesforce. * Crea una consulta personalizada para mostrar en el calendario datos de cualquier objeto de Salesforce. * Es ideal cuando tu calendario necesita reflejar información actualizada de Salesforce. ### Configuración de la fuente de datos de consulta Para asegurarte de que tu Avonni Calendar muestre la información más relevante, tendrás que configurar de dónde provienen sus datos. Este proceso implica seleccionar el objeto de Salesforce correcto y, opcionalmente, aplicar filtros, agrupación y ordenación para refinar los resultados. Desglosemos los pasos: * **Selección de objeto:** Comienza eligiendo el objeto específico de Salesforce (por ejemplo, Cuentas, Oportunidades, objetos personalizados, etc.) que contiene los datos que quieres que muestre tu tablero Kanban. * **Filtrado opcional:** Si deseas mostrar solo un subconjunto de los datos del objeto seleccionado, usa la función de filtrado para establecer condiciones específicas. Por ejemplo, podrías filtrar para mostrar solo oportunidades "Abiertas" o cuentas dentro de una región determinada. * **Agrupación (opcional):** Agrupa tus datos para organizar eficazmente tu tablero Kanban. Por ejemplo, agrupar oportunidades por "Etapa" puede crear columnas para "Prospección", "Negociación", etc. * **Ordenación:** Selecciona un campo y una dirección de "Ordenar por" (ascendente o descendente) para determinar el orden en que deben aparecer las tarjetas Kanban. * **Campos adicionales:** Si necesitas incluir campos en tu Kanban que no se usan directamente para la visualización o las interacciones, agrégalos en la sección "Campos adicionales". Esto es especialmente útil para los campos que quieras que sean buscables dentro de la barra de búsqueda de Kanban. ### Mapeos de datos Los mapeos de datos son la clave para garantizar que los eventos de tus registros de Salesforce se muestren correctamente en tu Avonni Calendar. Piensa en ello como traducir la información de Salesforce a un lenguaje que tu calendario entiende. **Mapeos esenciales** Aquí tienes un desglose de los mapeos más comunes que tendrás que configurar: * **Título:** El campo de Salesforce que contiene el nombre o título del evento (por ejemplo, "Subject" en el objeto estándar Event). * **Nombre del recurso:** El campo que indica a qué recurso está asignado el evento (por ejemplo, un campo "Room" para reservas de salas o un campo "Owner" para citas de ventas). Si se deja en blanco, todos los eventos aparecerán juntos. * **Desde:** El campo de Salesforce que contiene la fecha y hora de inicio del evento (por ejemplo, "StartDateTime"). * **Hasta:** El campo de Salesforce que contiene la fecha y hora de fin del evento (por ejemplo, "EndDateTime"). **Ejemplo:** Si estás creando un calendario de reservas de salas de reuniones, podrías mapear los siguientes campos: * **Título:** Asunto de la reunión * **Nombre del recurso:** Nombre de la sala * **Desde:** Inicio programado * **Hasta:** Fin programado ## Configuración ### **Visualización seleccionada** El Avonni Calendar ofrece tres formatos de visualización distintos para adaptarse a diferentes preferencias de programación y organización. Cada formato proporciona una forma única de ver e interactuar con tus eventos y recursos.
Visualización seleccionadaDescripciónImagen
CalendarioEsta es la vista tradicional basada en cuadrícula que la mayoría de las personas asocia con los calendarios.
AgendaCada entrada de la lista incluye detalles sobre el evento y se organiza en orden cronológico.
CronologíaOfrece a los usuarios una representación visual lineal de su agenda durante un período seleccionable.
### Variante de la línea de tiempo El Avonni Calendar ofrece dos formas de mostrar la vista de línea de tiempo: * **Línea de tiempo horizontal:** * Los eventos se organizan horizontalmente a lo largo de la pantalla, con la línea de tiempo de izquierda a derecha. * Ideal para visualizar agendas durante un período más largo (por ejemplo, semanas o meses). * **Línea de tiempo vertical:** * Los eventos se apilan verticalmente, con la línea de tiempo de arriba hacia abajo. * Esta vista funciona bien para ver agendas detalladas dentro de un día o de unos pocos días. *** ### Vistas ocultas La opción "Vistas ocultas" evita que los usuarios seleccionen determinadas vistas al interactuar con Avonni Calendar. *** ### Ajustar al tamaño La configuración "Ajustar al tamaño" ajusta automáticamente la vista del calendario para garantizar que todos los eventos programados quepan en la pantalla sin desplazamiento. Así es como funciona y cuándo resulta más útil: **Cómo funciona** * El calendario reducirá o ampliará su escala temporal para acomodar todos los eventos dentro de la vista seleccionada (día, semana, etc.). **Beneficios** * **Resumen rápido:** Ve todos tus eventos programados de un vistazo. * **Sin desplazamiento:** Evita desplazarte hacia arriba y hacia abajo para encontrar eventos. **Aspectos a tener en cuenta** * Con muchos eventos o en pantallas muy pequeñas, la vista comprimida podría dificultar la lectura de los detalles de cada evento. *** ### Opciones de la barra de herramientas * **Título de la barra de herramientas:** Establece un título personalizado para el encabezado de tu calendario. Esto ayuda a los usuarios a comprender el propósito del calendario (por ejemplo, "Horario del equipo de ventas", "Próximos eventos", etc.). * **Ocultar barra de herramientas:** Puedes ocultar toda la barra de herramientas para lograr un aspecto más limpio o maximizar el espacio de visualización del calendario. *** ### **Funciones de acciones** El componente Avonni Calendar va más allá de simplemente mostrar eventos; ofrece una variedad de formas para que tus usuarios interactúen directamente con él y desencadenen acciones adicionales. #### **Tipos de acciones** * **Acciones de nuevo evento:** Personaliza lo que sucede cuando los usuarios arrastran el cursor por el calendario para programar un nuevo evento. Por ejemplo, podrías abrir automáticamente un formulario de creación de eventos. * **Acciones del encabezado:** Agrega botones personalizados a la barra de herramientas del calendario. Estos botones pueden programarse para activar cualquiera de las interacciones disponibles que se enumeran a continuación. * **Acciones del menú contextual:** Estos botones aparecen cuando un usuario hace clic con el botón derecho en un evento o abre los detalles del evento. Configura estos botones para permitir acciones como editar, eliminar o activar procesos adicionales relacionados con el evento. #### **Interacciones disponibles** El componente Avonni Calendar ofrece varias interacciones que pueden activarse mediante las acciones descritas anteriormente: * [**Mostrar notificación emergente**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/show-toast.md)**:** Muestra un breve mensaje de notificación al usuario, confirmando una acción o proporcionando información. * [**Navegar**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/navigate.md)**:** Redirige al usuario a una página diferente dentro de tu Experience Cloud o a un sitio web externo. * [**Abrir modal de alerta**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/open-alert-modal.md)**:** Presenta una ventana emergente con información importante o una solicitud de confirmación. * [**Abrir confirmación**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/open-confirm.md)**:** Muestra un cuadro de diálogo de confirmación pidiendo al usuario que verifique una acción (por ejemplo, eliminar un evento). * [**Abrir diálogo de flujo**](/experience-cloud/experience-cloud-es/panel-de-propiedades/interactions/open-flow-dialog.md)**:** Inicia un flujo de Salesforce, lo que te permite automatizar procesos complejos o guiar a los usuarios a través de varios pasos. * **Actualizar consulta:** Actualiza la visualización del calendario con los datos más recientes de Salesforce. #### **Cómo implementarlo** Para configurar estas acciones e interacciones, trabajarás dentro de los ajustes del componente Avonni Calendar en Experience Cloud Builder. Cada tipo de acción (Nuevo evento, Encabezado, Menú contextual) tendrá una sección donde podrás definir la interacción que se activará. *** ### Avatar La sección Avatar te permite agregar una foto o imagen al encabezado de tu Avonni Calendar. Esto puede ayudar a personalizar el calendario y proporcionar un identificador visual. *** ### **Control del intervalo de tiempo** Los ajustes de intervalo de tiempo de Avonni Calendar ofrecen flexibilidad para ver eventos y gestionar tu agenda. Elige entre estas opciones: * **Vista de día:** Puedes centrarte en un solo día o personalizarla para ver varios días consecutivos (por ejemplo, ver una semana laboral de 4 días). * **Vista de semana:** Ve la agenda de toda una semana de un vistazo. * **Vista de mes:** Obtén una visión más amplia del mes, con la posibilidad de mostrar de 2 a 4 semanas a la vez o un número personalizado de semanas. #### **Cómo configurar los intervalos de tiempo** Cada intervalo de tiempo (Día, Semana, Mes) tiene sus ajustes: * **Etiqueta:** Asigna a tu intervalo de tiempo un nombre descriptivo (por ejemplo, "Semana laboral"). * **Nombre del icono:** Selecciona un icono visual para ayudar a identificar rápidamente el intervalo de tiempo. * **Unidad:** Elige si este intervalo de tiempo representa días, semanas o meses. * **Intervalo:** Establece el número de unidades que se mostrarán (por ejemplo, 5 días, 2 semanas). #### **Encabezados de la línea de tiempo (solo vista de línea de tiempo)** Ajusta los encabezados de tu vista de línea de tiempo para mostrar la información más importante para ti, como números de semana, fechas o meses. *** ### **Tiempo disponible** La sección de tiempos disponibles proporciona múltiples opciones para personalizar los rangos de tiempo que aparecen en tu calendario. Esta función es útil para centrarse en períodos específicos de interés. Estas son las opciones disponibles:
AtributoDescripción
DíasEsta opción te permite especificar qué días de la semana deben ser visibles en el calendario. Si se selecciona, el calendario solo mostrará los días elegidos, ocultando efectivamente el resto.
MesAl igual que la opción Días, puedes elegir qué meses deben ser visibles en tu calendario.
Intervalo de tiempoUsando el intervalo de tiempo, puedes controlar con precisión las horas visibles en tu calendario, centrándote eficazmente en los espacios horarios más.
*** ### **Visualización de eventos** La sección de visualización de eventos ofrece una gama de opciones para personalizar la estética visual de los eventos de tu calendario. Estas son las opciones disponibles: * **Tema**: Esta opción te permite elegir un tema visual para tus eventos. Puedes seleccionar entre varios temas preestablecidos, como predeterminado, transparente, línea, hueco o redondeado, cada uno con un estilo visual único para adaptarse a tu preferencia personal o identidad de marca. * **Paleta**: Esta función te permite asignar diferentes colores de una paleta elegida a cada recurso. Una paleta de colores es una colección de colores que proporciona un uso coherente del color entre distintos recursos. Esto ayuda a diferenciar visualmente e identificar rápidamente distintos tipos de recursos en tu calendario. * **Campos emergentes**: Cuando un usuario pasa el cursor sobre un evento, estos campos se mostrarán en un pequeño cuadro emergente (o "popover"). Esto permite a los usuarios ver detalles esenciales del evento sin hacer clic en ellos. ### **Filtro** Personaliza cómo los usuarios refinan los eventos mostrados en tu Avonni Calendar. * **Ocultar filtro de recursos:** Elige esta opción para eliminar el filtro que permite a los usuarios ver eventos basados en recursos específicos (por ejemplo, personas, salas, equipos). * **Ocultar selector de fecha:** Selecciónalo para eliminar el icono del calendario en el encabezado que permite a los usuarios navegar hasta una fecha específica. * **Tipo (horizontal, popover, panel izquierdo, panel derecho, vertical):** Determina el estilo visual y la ubicación de la sección de filtros: * **Horizontal:** Una barra en la parte superior del calendario. * **Popover:** Un filtro compacto que se abre al hacer clic. * **Panel izquierdo/derecho:** Un panel lateral para las opciones de filtro. * **Vertical:** Una lista vertical de opciones de filtro ### **Buscar** * **Mostrar búsqueda:** Activa esta opción para agregar un cuadro de búsqueda en la parte superior de tu Avonni Calendar, permitiendo a los usuarios encontrar eventos específicos rápidamente. * **Texto de marcador:** Agrega una frase breve (por ejemplo, "Buscar eventos...") para guiar a los usuarios sobre lo que pueden buscar dentro del calendario. * **Posición (izquierda, derecha, centro, relleno):** Elige dónde colocar el cuadro de búsqueda dentro del encabezado del calendario para lograr la mejor disposición visual. ## Apariencia de estilo ### **Tamaño** * **Anchura:** Establece el ancho horizontal del calendario. Puedes usar valores fijos (píxeles, porcentajes) o permitir que el calendario se adapte según su contenedor. * **Altura:** Este ajuste establece la altura vertical del calendario. Al igual que con el ancho, puedes usar ajustes de altura fijos o flexibles. * **Desbordamiento:** Determina cómo maneja el calendario el contenido que excede sus dimensiones. Las opciones pueden incluir: * **Visible:** El contenido fluye fuera del calendario. * **Oculto:** El contenido se recorta en los bordes del calendario. * **Desplazamiento:** El calendario obtiene barras de desplazamiento si el contenido se desborda. ### **Barra de herramientas** * **Color de fondo:** Este ajuste establece el color de fondo de la barra de herramientas del calendario (el área que normalmente contiene los botones de navegación, la selección de vista, etc.). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-calendar.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.