Informações de referência sobre o modelo de tela de calendário para aplicativos de tela

Para aplicativos de tela no Power Apps, entenda como cada controle significativo no modelo de tela de calendário contribui para a funcionalidade padrão geral da tela. Este mergulho profundo apresenta as fórmulas de comportamento e os valores de outras propriedades que determinam como os controles respondem à entrada do usuário. Para uma discussão de alto nível sobre a funcionalidade padrão desta tela, consulte a visão geral da tela de calendário.

Este tópico destaca alguns controles significativos e explica as expressões ou fórmulas para as quais várias propriedades (como Items e OnSelect) desses controles são definidas:

• Lista suspensa do calendário (dropdownCalendarSelection)
• Ícone do calendário (iconCalendar)
• Divisa do mês anterior (iconPrevMonth)
• Divisa do próximo mês (iconNextMonth)
• Galeria do calendário (MonthDayGallery) (+ controles filho)
• Galeria de eventos (CalendarEventsGallery)

Pré-requisito

Familiaridade com como adicionar e configurar telas e outros controles, conforme você cria um aplicativo no Power Apps.

Lista suspensa do calendário

• Propriedade: Items
  Valor: Office365.CalendarGetTables().value

  Este valor é uma operação de conector que recupera os calendários do Outlook do usuário do aplicativo. Você pode ver o valor que esta operação recupera.

• Propriedade: OnChange
  Valor: Select(dropdownCalendarSelection)

  Quando o usuário seleciona uma opção na lista, a função na propriedade OnSelect do controle é executada.

• Propriedade: OnSelect
  Valor: uma função If, que aparece no bloco de código a seguir, e várias funções adicionais, que aparecem no bloco de código depois dele.

  Essa parte da fórmula é executada apenas na primeira vez em que o usuário seleciona uma opção na lista suspensa após abrir o aplicativo:

  If( IsBlank( _userDomain ),
      UpdateContext( {_showLoading: true} );
      Set( _userDomain, Right( User().Email, Len( User().Email ) - Find( "@", User().Email ) ) );
      Set( _dateSelected, Today() );
      Set( _firstDayOfMonth, DateAdd( Today(), 1 - Day( Today() ), Days ) );  
      Set( _firstDayInView, DateAdd( _firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 1), Days ) );
      Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) )  
  );
  

  O código anterior define as seguintes variáveis:

  • _userDomain: o domínio corporativo do usuário do aplicativo, conforme refletido no endereço de email do usuário.
  • _dateSelected: a data de hoje (por padrão). A galeria do calendário destaca essa data e a galeria de eventos mostra os eventos agendados para ela.
  • _firstDayOfMonth: o primeiro dia do mês atual. Como (Today + (1 - Today)) = Today - Today + 1 = 1, esta função DateAdd sempre retorna o primeiro dia do mês.
  • _firstDayInView: o primeiro dia em que a galeria do calendário pode ser exibida. Esse valor não é igual ao primeiro dia do mês, a menos que o mês comece em um domingo. Para impedir a exibição de uma semana inteira do mês anterior, o valor de _firstDayInView é _firstDayOfMonth - Weekday(_firstDayOfMonth) + 1.
  • _lastDayOfMonth: o último dia do mês atual, que é igual ao primeiro dia do próximo mês, menos um dia.

  As funções após a função If são executadas sempre que o usuário seleciona uma opção na lista suspensa do calendário (não apenas na primeira vez em que o usuário abre o aplicativo):

  Set( _calendarVisible, false );
  UpdateContext( {_showLoading: true} );
  Set( _myCalendar, dropdownCalendarSelection2.Selected );
  Set( _minDate, 
      DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days )
  );
  Set(_maxDate, 
      DateAdd(
          DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days ), 
          40, 
          Days
      )
  );
  ClearCollect( MyCalendarEvents, 
      Office365Outlook.GetEventsCalendarViewV2( _myCalendar.Name, 
          Text( _minDate, UTC ), 
          Text( _maxDate, UTC )
      ).value
  );
  UpdateContext( {_showLoading: false} );
  Set( _calendarVisible, true )
  

  O código anterior define estas variáveis e uma coleção:

  • _calendarVisible: definida como false para que o calendário não apareça enquanto a nova seleção é carregada.
  • _showLoading: definida como true para que os indicadores de carregamento apareçam enquanto a nova seleção é carregada.
  • _myCalendar: definida como o valor atual do controle Lista suspensa do calendário para que os eventos do calendário correto sejam recuperados.
  • _minDate: definida como o mesmo valor de _firstDayInView. Essa variável determina quais eventos já foram recuperados do Outlook e armazenados em cache no aplicativo.
  • _maxDate: definida como o último dia visível no calendário. A fórmula é _firstDayInView + 40. O calendário exibe no máximo 41 dias, portanto, a variável _maxDate sempre reflete o último dia visível e determina quais eventos já foram recuperados do Outlook e armazenados em cache no aplicativo.
  • MyCalendarEvents: definida como uma coleção dos eventos do usuário no calendário selecionado, variando de _minDate a _maxDate.
  • _showLoading: definida como false; _calendarVisible é definida como true depois que todo o resto tiver sido carregado.

Propriedades de cor

Para ver propriedades de cor gerais, consulte Propriedades de cor e de borda no Power Apps.

Propriedades de cor exclusivas para o controle Lista suspensa do calendário:

• ChevronBackground - cor da tela de fundo da lista suspensa do calendário.
• ChevronDisabledBackground - cor da tela de fundo da lista suspensa do calendário desabilitada.
• ChevronFill - cor de preenchimento da lista suspensa do calendário.
• ChevronDisabledFill - cor de preenchimento da lista suspensa do calendário desabilitada.
• ChevronHoverBackground - cor da tela de fundo da lista suspensa do calendário quando o usuário mantém o ponteiro do mouse sobre ela.
• ChevronHoverFill - cor de preenchimento da lista suspensa do calendário quando o usuário mantém o ponteiro do mouse sobre ela.

Ícone do calendário

• Propriedade: OnSelect
  Valor: quatro funções Set que redefinem a galeria do calendário como a data de hoje:

  Set( _dateSelected, Today() );
  Set( _firstDayOfMonth, DateAdd( Today(), 1 - Day( Today() ), Days) );
  Set( _firstDayInView, DateAdd(_firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days));
  Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) )
  

  O código anterior redefine todas as variáveis de data necessárias para a exibição de calendário correta:

  • _dateSelected é redefinida como hoje.
  • _firstDayOfMonth é redefinida como o primeiro dia do mês de hoje.
  • _firstDayInView é redefinida como o primeiro dia visível quando o mês de hoje é selecionado.
  • _lastDayOfMonth é redefinida como o último dia do mês de hoje.

  A seção Lista suspensa do calendário deste tópico explica essas variáveis em mais detalhes.

Divisa do mês anterior

• Propriedade: OnSelect
  Valor: quatro funções Set e uma função If que mostram o mês anterior na galeria do calendário:

  Set( _firstDayOfMonth, DateAdd( _firstDayOfMonth, -1, Months ) );
  Set( _firstDayInView, 
      DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days )
  );
  Set( _lastDayOfMonth, DateAdd(DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) );
  If( _minDate > _firstDayOfMonth,
      Collect( MyCalendarEvents,
          Office365Outlook.GetEventsCalendarViewV2( _myCalendar.Name,
              Text( _firstDayInView, UTC ), 
              Text( DateAdd( _minDate, -1, Days ), UTC )
          ).value
      );
      Set( _minDate, _firstDayInView )
  )
  

  Observação

  As definições de _firstDayOfMonth, _firstDayInView e _lastDayOfMonth são quase idênticas àquelas na seção Lista suspensa do calendário deste tópico.

  As três primeiras linhas do código anterior são executadas sempre que o usuário seleciona a divisa do mês anterior. O código define as variáveis necessárias para a exibição de calendário correta. O código restante é executado apenas se o usuário não tiver selecionado anteriormente este mês para o calendário selecionado.

  Se esse for o caso, _minDate é o primeiro dia que aparece quando o mês anterior é exibido. Antes de o usuário selecionar o ícone, o valor mínimo possível de _minDate é o dia 23 do mês atual. (Quando 1º de março cai em um sábado, _firstDayInView de março é 23 de fevereiro.) Isso significa que, se um usuário ainda não tiver selecionado este mês, _minDate é maior que o novo _firstDayOfMonth e a função If retorna true. O código é executado e uma coleção e uma variável são atualizadas:

  • MyCalendarEvents recupera eventos do calendário selecionado com a operação Office365Outlook.GetEventsCalendarViewV2. O intervalo de datas é entre a data _firstDayInView e _minDate - 1. Como MyCalendarEvents já contém eventos na data _minDate, 1 é subtraído dessa data para o valor máximo nesse novo intervalo de datas.

  • _minDate está definida como o _firstDayInView atual porque essa é a primeira data para a qual os eventos foram recuperados. Se um usuário retornar a essa data selecionando a divisa do mês anterior, a função If retornará false; o código não será executado porque os eventos para essa exibição já estão armazenados em cache em MyCalendarEvents.

Divisa do próximo mês

• Propriedade: OnSelect
  Valor: quatro funções Set e uma função If que mostram o próximo mês na galeria do calendário:

  Set( _firstDayOfMonth, DateAdd( _firstDayOfMonth, 1, Months ) );
  Set( _firstDayInView, 
      DateAdd( _firstDayOfMonth, -(Weekday( _firstDayOfMonth ) - 2 + 1), Days ) );
  Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) );
  If(_maxDate < _lastDayOfMonth, 
  Collect(MyCalendarEvents,
          Office365Outlook.GetEventsCalendarViewV2(_myCalendar.Name,
              Text(DateAdd(_maxDate, 1, Days), UTC),
              Text(DateAdd(_firstDayInView, 40, Days))
          ).value
  );
  Set(_maxDate, DateAdd(_firstDayInView, 40, Days))
  )
  

  Observação

  As definições de _firstDayOfMonth, _firstDayInView e _lastDayOfMonth são quase idênticas àquelas na seção Lista suspensa do calendário deste tópico.

  As três primeiras linhas do código anterior, que são executadas quando o usuário seleciona a divisa do próximo mês, definem as variáveis necessárias para a exibição de calendário correta. O código restante é executado apenas se o usuário não tiver selecionado anteriormente este mês para o calendário selecionado.

  Nesse caso, _maxDate é o último dia que aparece quando o mês anterior é exibido. Antes de o usuário selecionar a divisa do próximo mês, o valor máximo possível de _maxDate é o dia 13 do próximo mês. (Quando 1º de fevereiro cai no domingo de um ano não bissexto, _maxDate é 13 de março, que é _firstDayInView + 40 dias.) Isso significa que, se um usuário ainda não tiver selecionado este mês, _maxDate é maior que o novo _lastDayOfMonth e a função If retorna true. O código é executado e uma coleção e uma variável são atualizadas:

  • MyCalendarEvents recupera eventos do calendário selecionado com a operação Office365Outlook.GetEventsCalendarViewV2. O intervalo de datas é entre _maxDate + 1 dia e _firstDayInView + 40 dias. Como MyCalendarEvents já contém eventos na data _minDate, 1 é adicionado a essa data para o valor mínimo nesse novo intervalo de datas. _firstDayInView + 40 é a fórmula de _maxDate, portanto, a segunda data no intervalo é apenas a nova _maxDate.

  • _maxDate está definida como _firstDayInView + 40 dias porque esse é o último dia para o qual os eventos foram recuperados. Se um usuário retornar a essa data selecionando a divisa do próximo mês, a função If retornará false; o código não será executado porque os eventos para essa exibição já estão armazenados em cache em MyCalendarEvents.

Galeria do calendário

• Propriedade: Items
  Valor: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19, 20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41]

  O conjunto de 0 a 41 é usado para os itens na galeria do calendário porque, na pior das hipóteses, a exibição de calendário precisará exibir 42 dias inteiros. Isso ocorre quando o primeiro dia do mês é um sábado e o último dia do mês é um domingo. Nesse caso, o calendário mostra seis dias do mês anterior na linha que contém o primeiro dia do mês e seis dias do próximo mês na linha que contém o último dia do mês. São 42 valores exclusivos, dos quais 30 são para o mês selecionado.

• Propriedade: WrapCount
  Valor: 7

  Este valor reflete uma semana de sete dias.

Controle de título na galeria do calendário

• Propriedade: Text
  Valor: Day( DateAdd( _firstDayInView, ThisItem.Value, Days ) )

  Lembre-se de que _firstDayInView é definido como (_firstDayOfMonth - seu valor de dia útil) + 1. Isso informa que _firstDayInView é sempre um domingo e _firstDayOfMonth está sempre na primeira linha de MonthDayGallery. Por causa desses dois fatos, _firstDayInView está sempre na primeira célula de MonthDayGallery. ThisItem.Value é o número dessa célula na propriedade do item MonthDayGallery. Então, tomando _firstDayInView como ponto de partida, cada célula exibe o incremento de _firstDayInView + seu respectivo valor de célula.

• Propriedade: Fill
  Valor: uma função If:

  If( DateAdd( _firstDayInView, ThisItem.Value ) = Today() && 
              DateAdd( _firstDayInView, ThisItem.Value ) = _dateSelected, 
          RGBA( 0, 0, 0, 0 ),
      DateAdd( _firstDayInView, ThisItem.Value) = Today(), 
          ColorFade( Subcircle.Fill, 0.67 ),
      Abs( Title.Text - ThisItem.Value) > 10,
          RGBA( 200, 200, 200, 0.3 ),
      RGBA( 0, 0, 0, 0 )
  )
  

  Conforme discutido na descrição da propriedade Text, DateAdd(_firstDayInView, ThisItem.Value) representa o dia na célula visível. Levando isso em conta, o código anterior realiza estas comparações:

  1. Se o valor da célula for a data de hoje E essa célula for equivalente a _dateSelected, não forneça um valor de preenchimento.

  2. Se o valor da célula for a data de hoje, mas ela não for equivalente a _dateSelected, forneça o preenchimento ColorFade.

  3. A última comparação não é tão clara. É uma comparação entre o valor de texto real na célula e o valor do item da célula (o número em exibição e o número do item).
     

     Para entender melhor isso, considere setembro de 2018, um mês que começa no sábado e termina no domingo. Nesse caso, o calendário exibe de 26 a 31 de agosto e 1º de setembro na primeira linha e Abs(Title.Text - ThisItem.Value) = 26 até 1º de setembro. Então Abs(Title.Text - ThisItem.Value) = 5. Ele permanecerá em 5 até a última linha do calendário, que exibe 30 de setembro e de 1º a 6 de outubro. Nesse caso, Abs(Title.Text - ThisItem.Value) ainda será 5 para 30 de setembro, mas 35 para as datas de outubro.
     

     Este é o padrão: para os dias exibidos do mês anterior, Abs(Title.Text - ThisItem.Value) sempre será igual ao valor Title.Text do primeiro dia em exibição. Para os dias exibidos no próximo mês, Abs(Title.Text - ThisItem.Value) sempre será igual ao valor do item MonthDayGallery da primeira célula desse mês (neste caso, 1º de outubro) menos 1. E, o mais importante, para os dias exibidos no mês selecionado atualmente, Abs(Title.Text - ThisItem.Value) também sempre será igual ao valor do primeiro item daquele mês menos 1 e nunca excederá 5, como mostra o exemplo anterior. Portanto, é perfeitamente válido escrever a fórmula como Abs(Title.Text - ThisItem.Value) > 5.

     Essa instrução verifica se o valor de data está fora do mês selecionado atualmente. Se estiver, Fill é um cinza parcialmente opaco.

  Observação

  Você pode verificar a validade dessa última comparação inserindo um controle Rótulo na galeria e definindo sua propriedade Text como este valor:
  Abs(Title.Text - ThisItem.Value).

• Propriedade: Visible
  Valor:

  !(
      DateAdd( _firstDayInView, ThisItem.Value, Days ) - 
          Weekday( DateAdd( _firstDayInView, ThisItem.Value,Days ) ) + 1 
      > _lastDayOfMonth
  )
  

  A instrução anterior verifica se a célula está em uma linha em que não ocorrem dias do mês selecionado atualmente. Lembre-se de que subtrair o valor de dia útil de qualquer dia do seu valor de data e adicionar 1 sempre retorna o primeiro item da linha em que esse dia reside. Portanto, essa instrução verifica se o primeiro dia na linha é posterior ao último dia do mês visível. Se for, ele não aparecerá porque a linha inteira contém dias do mês seguinte.

• Propriedade: OnSelect
  Valor: uma função Set que define a variável _dateSelected como a data da célula selecionada:

  Set( _dateSelected, DateAdd( _firstDayInView, ThisItem.Value, Days ) )
  

Controle de círculo na galeria do calendário

• Propriedade: Visible
  Valor: uma fórmula que determina se algum evento está agendado para a data selecionada e se os controles Subcírculo e Título são visíveis:

  CountRows(
      Filter( MyCalendarEvents, 
          DateValue( Text( Start ) ) = DateAdd( _firstDayInView, ThisItem.Value, Days )
      )
  ) > 0 && !Subcircle.Visible && Title.Visible
  

  O controle Círculo será visível se o campo Iniciar de qualquer evento for equivalente à data dessa célula, se o controle Título for visível e se o controle Subcírculo não for visível. Em outras palavras, esse controle será visível quando pelo menos um evento ocorrer nesse dia e esse dia não estiver selecionado. Se estiver selecionado, os eventos desse dia serão exibidos no controle CalendarEventsGallery.

Controle de subcírculo na galeria do calendário

• Propriedade: Visible
  Valor:

  DateAdd( _firstDayInView, ThisItem.Value ) = _dateSelected && Title.Visible
  

  O controle Subcírculo será visível quando _dateSelected for equivalente à data da célula e o controle Título for visível. Em outras palavras, esse controle aparecerá quando a célula for a data selecionada atualmente.

Galeria de eventos

• Propriedade: Items
  Valor: uma fórmula que classifica e filtra a galeria de eventos:

  SortByColumns(
      Filter( MyCalendarEvents,
          Text( Start, DateTimeFormat.ShortDate ) = Text( _dateSelected, DateTimeFormat.ShortDate )
      ),
      "Start"
  )
  

  A coleção MyCalendarEvents contém todos os eventos entre _minDate e _maxDate. Para exibir os eventos somente para a data selecionada, um filtro é aplicado em MyCalendarEvents a fim de exibir os eventos com uma data de início equivalente a \ _dateSelected. Os itens então são classificados pelas datas de início para colocá-los em ordem sequencial.

Próximas etapas

• Saiba mais sobre esta tela
• Saiba mais sobre o conector do Office 365 Outlook no Power Apps
• Saiba mais sobre o conector Usuários do Office 365 no Power Apps

Observação

Você pode nos falar mais sobre suas preferências de idioma para documentação? Faça uma pesquisa rápida. (Observe que esta pesquisa está em inglês)

A pesquisa levará cerca de sete minutos. Nenhum dado pessoal é coletado (política de privacidade).