Componente de la 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 que han iniciado sesión actuales para el día actual. El componente también puede usar cualquier extremo que devuelva eventos de Microsoft Graph.

Ejemplo

En el siguiente ejemplo se muestran los eventos del 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, mgt-agenda el componente captura eventos del extremo y muestra eventos para el día /me/calendarview actual. Hay varias propiedades que puede usar para cambiar este comportamiento.

Atributo Propiedad Descripción
fecha date Cadena que representa la fecha de inicio de los eventos que se va a capturar desde Microsoft Graph. El valor debe tener 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 recuperar de Microsoft Graph - el valor predeterminado es 3 - el valor no tiene efecto si event-query se establece el atributo.
show-max showMax Un número para indicar el número máximo de eventos que se mostrarán. El valor predeterminado no se establece (ningún máximo).
group-id groupId Un identificador de cadena para un calendario de grupo que se va a usar en lugar del calendario del usuario que ha iniciado sesión.
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 delimitándose con | ( /groups/GROUP-ID-GUID/calendar/calendarView | group.read.all ).
eventos eventos Una matriz de eventos para obtener o establecer la lista de eventos representados por el componente: use esta propiedad para obtener acceso a los eventos cargados por el componente. Establezca este valor para cargar sus propios eventos: si el programador establece el valor, date los atributos , o no tienen ningún days event-query efecto.
grupo a día groupByDay Valor booleano para agrupar eventos por día: de forma predeterminada, los eventos no se agrupan.
preferred-timezone preferredTimezone Nombre de la zona horaria preferida para 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 extremo y leyendo me/mailboxSettings el valor de la propiedad timeZone.

En el ejemplo siguiente se cambia el comportamiento del componente para capturar datos de una fecha específica y hasta tres días.

<mgt-agenda
  group-by-day
  date="May 7, 2019"
  days="3"
  ></mgt-agenda>

En el siguiente ejemplo 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 nuevos datos 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 styling components.

Plantillas

El mgt-agenda componente admite varias plantillas que permiten reemplazar determinadas partes del componente. Para especificar una plantilla, incluya un elemento dentro de un componente y <template> establezca el valor en uno de los siguientes data-type elementos:

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 event Plantilla usada para representar cada evento.
event-other event: objeto event Plantilla usada para representar contenido adicional para cada evento.
header header: string 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 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, vea plantillas.

Events

Los siguientes eventos se desencadenan desde el control.

Evento Cuándo se emite Datos personalizados Cancelable Burbujas Funciona con plantilla personalizada
eventClick El usuario hace clic o pulsa en un evento. Evento seleccionado No No Sí, con plantilla de evento personalizada

Para obtener más información acerca del control de eventos, vea eventos.

Permisos de Microsoft Graph

Este componente usa los siguientes permisos y API de Microsoft Graph:

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

El componente permite especificar una consulta de Microsoft Graph para llamar (por /groups/{id}/calendar/calendarView ejemplo, ). En este caso, anexa el permiso al final de la cadena, delimitado por | .

Al usar la plantilla predeterminada y la plantilla predeterminada, se requieren permisos y renderAttendees API 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 métodos render* para invalidar protected en extensiones de componentes.

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 el elemento de 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.