Componente agenda en Microsoft Graph Toolkit
El mgt-agenda componente web representa eventos en un calendario de usuario o grupo. De forma predeterminada, el calendario muestra los eventos de usuario con sesión iniciada actual para el día actual. El componente también puede usar cualquier punto de conexión que devuelva eventos de Microsoft Graph.
Ejemplo
En el ejemplo siguiente se muestran los eventos de calendario del usuario que ha iniciado sesión con el mgt-agenda componente . Puede usar el editor de código para ver cómo cambian las propiedades el comportamiento del componente.
Propiedades
De forma predeterminada, el mgt-agenda componente captura eventos del /me/calendarview punto de conexión y muestra los eventos del día actual. Hay varias propiedades que puede usar para cambiar este comportamiento.
| Atributo | Propiedad | Descripción |
|---|---|---|
| date | date | Cadena que representa la fecha de inicio de los eventos que se van a capturar de Microsoft Graph. El valor debe tener un formato adecuado para el constructor Date. Este valor no tiene ningún efecto si se establece el event-query atributo . |
| Días | Días | Número de días que se van a capturar de Microsoft Graph. El valor predeterminado es 3. Este valor no tiene ningún efecto si event-query se establece el atributo . |
| show-max | showMax | Número que indica el número máximo de eventos que se van a mostrar. No se establece el valor predeterminado (sin máximo). |
| group-id | groupId | Identificador de cadena para usar un calendario de grupo en lugar del calendario del usuario que ha iniciado sesión actual. |
| event-query | eventQuery | Cadena que representa una consulta alternativa que se va a usar al capturar eventos de Microsoft Graph. Opcionalmente, agregue el ámbito delegado al final de la cadena delimitando con | (/groups/GROUP-ID-GUID/calendar/calendarView | group.read.all). |
| eventos | eventos | Matriz de eventos para obtener o establecer la lista de eventos representados por el componente. Use esta propiedad para acceder a los eventos cargados por el componente. Establezca este valor para cargar sus propios eventos. Los dateatributos , dayso event-query no tienen ningún efecto si lo establece el desarrollador. |
| grupo a día | groupByDay | Valor booleano para agrupar eventos por día. De forma predeterminada, los eventos no se agrupan. |
| zona horaria preferida | preferredTimezone | Nombre de la zona horaria de IANA que se usará al mostrar eventos recuperados de Microsoft Graph; por ejemplo, America/Los_Angeles. Para obtener una lista de zonas horarias de IANA, consulte Lista de zonas horarias de base de datos tz. De forma predeterminada, los eventos se representan con la configuración de zona horaria actual del dispositivo. |
En el ejemplo siguiente se cambia el comportamiento del componente para capturar datos para una fecha específica y hasta tres días.
<mgt-agenda group-by-day date="May 7, 2019" days="3"></mgt-agenda>
En el ejemplo siguiente se cambia el comportamiento del componente para capturar datos de una consulta específica.
<mgt-agenda event-query="/me/events?orderby=start/dateTime"></mgt-agenda>
Propiedades personalizadas css
El mgt-agenda componente define estas propiedades personalizadas css
<mgt-agenda class="agenda" group-by-day></mgt-agenda>
.agenda {
--agenda-event-box-shadow: 0px 2px 30px pink;
--agenda-event-margin: 0px 10px 40px 10px;
--agenda-event-padding: 8px 0px;
--agenda-event-background-color: #8d696f;
--agenda-event-border: dotted 2px white;
--agenda-header-margin: 3px;
--agenda-header-font-size: 20px;
--agenda-header-color: #8d696f;
--agenda-event-time-font-size: 20px;
--agenda-event-time-color: white;
--agenda-event-subject-font-size: 12px;
--agenda-event-subject-color: white;
--agenda-event-location-font-size: 20px;
--agenda-event-location-color: white;
--agenda-event-attendees-color: gold;
}
Para obtener más información, consulte Componentes de estilo.
Métodos
| Método | Descripción |
|---|---|
| reload() | Llame al método para volver a cargar el componente con posibles datos nuevos en función de sus propiedades. |
Plantillas
El mgt-agenda componente admite varias plantillas que permiten reemplazar ciertas partes del componente. Para especificar una plantilla, incluya un <template> elemento dentro de un componente y establezca en data-type uno de los valores siguientes:
| Tipo de datos | Contexto de datos | Descripción |
|---|---|---|
default |
events: lista de objetos de evento |
La plantilla predeterminada reemplaza todo el componente por el suyo propio. |
event |
event: objeto de evento |
Plantilla que se usa para representar cada evento. |
event-other |
event: objeto de evento |
Plantilla usada para representar otro contenido para cada evento. |
header |
header:Cadena |
Plantilla usada para representar el encabezado de cada día. |
loading |
No se pasa ningún contexto de datos | Plantilla que se usa cuando se cargan los datos. |
no-data |
No se pasa ningún contexto de datos | Plantilla que se usa cuando no hay eventos disponibles. |
En los ejemplos siguientes se muestra cómo usar la event plantilla:
<mgt-agenda>
<template data-type="event">
<button class="eventButton">
<div class="event-subject">{{ event.subject }}</div>
<div data-for="attendee in event.attendees">
<mgt-person
person-query="{{ attendee.emailAddress.name }}"
view="twolines"
>
</mgt-person>
</div>
</button>
</template>
<template data-type="no-data"> There are no events found! </template>
</mgt-agenda>
Para obtener más información, consulte plantillas.
Eventos
Los siguientes eventos se desencadenan desde el control .
| Evento | Cuándo se emite | Datos personalizados | Cancelable | Burbujas | Funciona con una plantilla personalizada |
|---|---|---|---|---|---|
eventClick |
El usuario selecciona o pulsa un evento. | El evento seleccionado | No | No | Sí, con una plantilla de eventos personalizada |
Para obtener más información sobre el control de eventos, vea eventos.
Permisos de Microsoft Graph
Este componente usa las siguientes API de Microsoft Graph. Para cada llamada API, se requiere uno de los permisos enumerados.
| Configuración | Permiso | API |
|---|---|---|
| Es el valor predeterminado. | Calendars.ReadBasic, Calendars.Read, Calendars.ReadWrite | /me/calendarview |
group-id Especificado |
Group.Read.All, Group.ReadWrite.All | /groups/{groupId}/calendar/calendarview |
event-query Especificado |
Como se proporciona opcionalmente en el event-query |
La API que se proporcionó en el event-query |
El componente permite especificar una consulta de Microsoft Graph diferente para llamar a (por ejemplo /groups/{id}/calendar/calendarView, ). En este caso, anexe el permiso al final de la cadena, delimitada por |.
Subcomponentes
El mgt-agenda componente consta de uno o varios subcomponentes que pueden requerir permisos distintos de los enumerados anteriormente. Para obtener más información, consulte la documentación de cada subcomponente: mgt-people.
Autenticación
El control usa el proveedor de autenticación global descrito en la documentación de autenticación.
Caché
El mgt-agenda componente no almacena en caché ningún dato.
Ampliar para obtener más control
Para escenarios más complejos o una experiencia de usuario realmente personalizada, este componente expone varios protected métodos render* para invalidar en extensiones de componente.
| Método | Descripción |
|---|---|
| renderLoading | Representa un estado de carga mientras se carga el componente. |
| renderNoData | Representa un estado de datos vacío. |
| renderGroups | Ordena los datos de eventos en grupos y los representa con encabezados de grupo. |
| renderHeader | Representa un encabezado de grupo. |
| renderEvents | Representa una lista de objetos de evento. |
| renderEvent | Representa un evento singular y todas sus partes. |
| renderTitle | Representa la parte del título del evento. |
| renderLocation | Representa la parte de ubicación del evento. |
| renderAttendees | Representa la parte de asistentes al evento. |
| renderOther | Representa otro contenido de evento. |
Localización
El control no expone ninguna variable de localización.