Componente agenda en Microsoft Graph Toolkit

Artículo
03/15/2023
Tiempo de lectura: 5 minutos

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.

Abra este ejemplo en mgt.dev

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 estar en un formato que pueda analizar el constructor Date : el valor no tiene ningún efecto si `event-query` se establece el atributo .
Días	Días	Un número de días para capturar desde Microsoft Graph (el valor predeterminado es 3): el 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 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: si el desarrollador establece el valor, los `date`atributos , `days`o `event-query` no tienen ningún efecto.
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 preferida que se usará al recuperar eventos de Microsoft Graph; por ejemplo, `Pacific Standard Time`. De forma predeterminada, este atributo usa la zona horaria UTC. La zona horaria preferida para el usuario actual se puede recuperar llamando al `me/mailboxSettings` punto de conexión y leyendo el valor de la propiedad timeZone .

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>

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.

Propiedades personalizadas css

El mgt-agenda componente define estas propiedades personalizadas css

mgt-agenda {
  --event-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.092);
  --event-margin: 0px 10px 14px 10px;
  --event-padding: 8px 0px;
  --event-background-color: #ffffff;
  --event-border: solid 2px rgba(0, 0, 0, 0);

  --agenda-header-margin: 40px 10px 14px 10px;
  --agenda-header-font-size: 24px;
  --agenda-header-color: #333333;

  --event-time-font-size: 12px;
  --event-time-color: #000000;

  --event-subject-font-size: 19px;
  --event-subject-color: #333333;

  --event-location-font-size: 12px;
  --event-location-color: #000000;
}

Para obtener más información, consulte Componentes de estilo.

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 el data-type valor en uno de los 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 contenido adicional 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 hace clic o pulsa en un evento.	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 y permisos de Microsoft Graph:

Configuración	Permiso	API
Es el valor predeterminado.	Calendars.Read	/me/calendarview

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 |.

Cuando se usa la plantilla predeterminada y la plantilla predeterminada renderAttendees , se requieren API y permisos adicionales. La plantilla predeterminada para este componente usa un componente mgt-people para eventos que tienen asistentes y hereda todos los permisos.

Autenticación

El control de inicio de sesión 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 contenido de evento adicional.