Componente de agenda no kit de ferramentas do Microsoft GraphAgenda component in the Microsoft Graph Toolkit

O mgt-agenda componente da Web representa eventos em um calendário de usuário ou grupo.The mgt-agenda web component represents events in a user or group calendar. Por padrão, o calendário exibe o atual eventos de usuário conectado para o dia atual.By default, the calendar displays the current signed in user events for the current day. O componente também pode usar qualquer ponto de extremidade que retorne eventos do Microsoft Graph.The component can also use any endpoint that returns events from Microsoft Graph.

ExemploExample

O exemplo a seguir mostra os eventos de calendário do usuário conectado exibidos usando o mgt-agenda componente.The following example shows the signed-in user's calendar events displayed using the mgt-agenda component. Você pode usar o editor de código para ver como as propriedades alteram o comportamento do componente.You can use the code editor to see how properties change the behavior of the component.

Abra este exemplo em gerenciamento de. devOpen this example in mgt.dev

PropriedadesProperties

Por padrão, o mgt-agenda componente busca eventos do ponto de /me/calendarview extremidade e exibe eventos para o dia atual.By default, the mgt-agenda component fetches events from the /me/calendarview endpoint and displays events for the current day. Há várias propriedades que você pode usar para alterar esse comportamento.There are several properties you can use to change this behavior.

AtributoAttribute PropriedadeProperty DescriçãoDescription
datadate datadate Uma cadeia de caracteres que representa a data de início dos eventos a serem buscados do Microsoft Graph.A string that represents the start date of the events to fetch from Microsoft Graph. O valor deve estar em um formato que pode ser analisado pelo Construtor de data -o valor não tem efeito se o event-query atributo for definido.Value should be in a format that can be parsed by the Date constructor - value has no effect if event-query attribute is set.
durantedays durantedays Um número de dias para buscar do Microsoft Graph-padrão é de 3 valores não tem efeito se o event-query atributo for definido.A number of days to fetch from Microsoft Graph - default is 3 - value has no effect if event-query attribute is set.
show-Maxshow-max showMaxshowMax Um número para indicar o número máximo de eventos a serem exibidos.A number to indicate the maximum number of events to show. O valor padrão não é definido (sem máximo).The default value is not set (no maximum).
ID de grupogroup-id groupIdgroupId Uma ID de cadeia de caracteres para um calendário de grupo a ser usado em vez do calendário do usuário conectado no momento.A string ID for a group calendar to use instead of the current signed in user's calendar.
evento-consultaevent-query eventQueryeventQuery Uma cadeia de caracteres que representa uma consulta alternativa a ser usada ao buscar eventos do Microsoft Graph.A string that represents an alternative query to be used when fetching events from Microsoft Graph. Opcionalmente, adicione o escopo delegado no final da cadeia de caracteres, delimitadondo-o com | ( /groups/GROUP-ID-GUID/calendar/calendarView | group.read.all ).Optionally, add the delegated scope at the end of the string by delimiting it with | (/groups/GROUP-ID-GUID/calendar/calendarView | group.read.all).
eventsevents eventsevents Uma matriz de eventos para obter ou definir a lista de eventos renderizados pelo componente-Use essa propriedade para acessar os eventos carregados pelo componente.An array of events to get or set the list of events rendered by the component - use this property to access the events loaded by the component. Defina esse valor para carregar seus próprios eventos, se o valor for definido por desenvolvedor, date os days atributos, ou event-query não terão efeito.Set this value to load your own events - if value is set by developer, the date, days, or event-query attributes have no effect.
grupo por diagroup-by-day groupByDaygroupByDay Um valor Boolean para agrupar eventos por dia-por eventos padrão não são agrupados.A Boolean value to group events by day - by default events are not grouped.
fuso horário preferidopreferred-timezone preferredTimezonepreferredTimezone Nome do fuso horário preferencial a ser usado ao recuperar eventos do Microsoft Graph; por exemplo, Pacific Standard Time .Name of the preferred time zone to use when retrieving events from Microsoft Graph; for example, Pacific Standard Time. Por padrão, esse atributo usa o fuso horário UTC.By default, this attribute uses the UTC time zone. O fuso horário preferencial para o usuário atual pode ser recuperado chamando-se o me/mailboxSettings ponto de extremidade e lendo o valor da propriedade timeZone .The preferred time zone for the current user can be retrieved by calling the me/mailboxSettings endpoint and reading the value of the timeZone property.

O exemplo a seguir altera o comportamento do componente para buscar dados de uma data específica e até três dias.The following example changes the behavior of the component to fetch data for a specific date and up to three days.

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

O exemplo a seguir altera o comportamento do componente para buscar dados de uma consulta específica.The following example changes the behavior of the component to fetch data from a specific query.

<mgt-agenda
  event-query="/me/events?orderby=start/dateTime"
  ></mgt-agenda>

MétodosMethods

MétodoMethod DescriçãoDescription
reload ()reload() Chame o método para recarregar o componente com possíveis novos dados com base em suas propriedades.Call the method to reload the component with potential new data based on its properties.

Propriedades personalizadas de CSSCSS custom properties

O mgt-agenda componente define essas propriedades personalizadas de CSSThe mgt-agenda component defines these CSS custom properties

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 saber mais, confira estilos de componentes.To learn more, see styling components.

ModelosTemplates

O mgt-agenda componente oferece suporte a vários modelos que permitem substituir determinadas partes do componente.The mgt-agenda component supports several templates that allow you to replace certain parts of the component. Para especificar um modelo, inclua um <template> elemento dentro de um componente e defina o data-type valor como um dos seguintes:To specify a template, include a <template> element inside of a component and set the data-type value to one of the following:

Tipo de dadosData type Contexto de dadosData context DescriçãoDescription
default events: lista de objetos Eventevents: list of event objects O modelo padrão substitui todo o componente pelo seu.The default template replaces the entire component with your own.
event event: objeto Eventevent: event object O modelo usado para renderizar cada evento.The template used to render each event.
event-other event: objeto Eventevent: event object O modelo usado para renderizar o conteúdo adicional de cada evento.The template used to render additional content for each event.
header header: Stringheader: string O modelo usado para renderizar o cabeçalho de cada dia.The template used to render the header for each day.
loading Nenhum contexto de dados é passadoNo data context is passed O modelo usado quando os dados estão sendo carregados.The template used when data is loading.
no-data Nenhum contexto de dados é passadoNo data context is passed O modelo usado quando não há eventos disponíveis.The template used when no events are available.

Os exemplos a seguir ilustram como usar o event modelo:The following examples illustrates how to use the event template:

<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 saber mais, confira modelos.To learn more, see templates.

EventosEvents

Os eventos a seguir são acionados do controle.The following events are fired from the control.

EventoEvent DescriçãoDescription
eventClickeventClick O usuário clica ou toca em um evento.The user clicks or taps an event.

PermissõesPermissions

Este componente usa as seguintes APIs e permissões do Microsoft Graph:This component uses the following Microsoft Graph APIs and permissions:

RecursoResource PermissãoPermission
/me/calendarview/me/calendarview Calendars.ReadCalendars.Read

O componente permite que você especifique uma consulta diferente do Microsoft Graph para chamar (como /groups/{id}/calendar/calendarView ).The component allows you to specify a different Microsoft Graph query to call (such as /groups/{id}/calendar/calendarView). Nesse caso, acrescente a permissão ao final da cadeia de caracteres, delimitado por | .In this case, append the permission to the end of the string, delimited by |.

Ao usar o modelo padrão e o renderAttendees modelo padrão, são necessárias APIs e permissões adicionais.When using the default template and default renderAttendees template, additional APIs and permissions are required. O modelo padrão para esse componente usa um componente de Gerenciamento de pessoas para eventos que têm participantes, o que requer o seguinte.The default template for this component uses a mgt-people component for events that have attendees, which requires the following.

RecursoResource PermissãoPermission
/Users/users Users. ReadBasic. AllUsers.ReadBasic.All
/me/calendarview/me/calendarview People.ReadPeople.Read
/me/calendarview/me/calendarview Contacts.ReadContacts.Read

AutenticaçãoAuthentication

O controle de logon usa o provedor de autenticação global descrito na documentação de autenticação.The login control uses the global authentication provider described in the authentication documentation.

Estender para mais controleExtend for more control

Para cenários mais complexos ou uma UX verdadeiramente personalizada, esse componente expõe vários protected métodos render * para substituição em extensões de componente.For more complex scenarios or a truly custom UX, this component exposes several protected render* methods for override in component extensions.

MétodoMethod DescriçãoDescription
renderLoadingrenderLoading Renderiza um estado de carregamento enquanto o componente é carregado.Renders a loading state while the component loads.
renderNoDatarenderNoData Renderiza um estado de dados vazio.Renders an empty data state.
renderGroupsrenderGroups Classifica dados de eventos em grupos e os renderiza com cabeçalhos de grupo.Sorts event data into groups and renders them with group headers.
renderHeaderrenderHeader Renderiza um cabeçalho de grupo.Renders a group header.
renderEventsrenderEvents Renderiza uma lista de objetos Event.Renders a list of event objects.
renderEventrenderEvent Renderiza um evento singular e todas as suas partes.Renders a singular event and all of its parts.
renderTitlerenderTitle Renderiza a parte do título do evento.Renders the event title part.
renderLocationrenderLocation Renderiza a parte do local do evento.Renders the event location part.
renderAttendeesrenderAttendees Renderiza a parte dos participantes do evento.Renders the event attendees part.
renderOtherrenderOther Renderiza o conteúdo do evento adicional.Renders additional event content.