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

• 14/12/2020
• 4 minutos para o fim da leitura
• • n
  • o

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.

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

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:

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.

PermissõesPermissions

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

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.

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.