Caso de uso de componente de calendário

  • Versão de lançamento: Washingtondc
  • Atualizado 7 de mar. de 2024
  • 5 min. de leitura

    • Adicione e configure o componente Calendário em uma nova página de experiência Construtor de IU.

    Antes de Iniciar

    Função necessária: ui_builder_admin

    Procedimento

    1. Navegar até Todos > Estrutura do Now Experience > Construtor de IU.
    2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
      Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
    3. Crie uma variante de página.
      Para obter mais informações sobre como criar uma página em Construtor de IU, consulte Criar uma página no Construtor de IU.
    4. Selecione o ícone + na fase para abrir a caixa de ferramentas.
    5. Em Componentes de pesquisa, digite calendário.
    6. Selecione Calendário.

      O componente Calendário, junto com os dados de demonstração, é adicionado à página. Os dados de demonstração ajudam a mostrar o que é possível com o componente Calendário e como o componente está estruturado.

    7. Selecione Salvar.
    8. Para ver a aparência do calendário na página, selecione Visualizar.
      Na parte superior esquerda, há um botão opcional +Novo e o seletor de data que permite navegar para o período anterior ou seguinte ou para uma data específica. No canto superior direito, há um seletor de fuso horário, um seletor de exibição (como Dia ou Semana de trabalho) e um ícone de menu de configurações que fornece acesso a atalhos do teclado. A grade do calendário principal no centro mostra a hora ao longo do eixo vertical à esquerda e a exibição especificada horizontalmente na parte superior. Os eventos de calendário são exibidos em células na grade que refletem a hora de início e término do evento. O painel lateral contextual aparece à direita da grade do calendário e, por padrão, exibe a exibição da agenda com cartões que representam os eventos no calendário.
    9. Selecione o X no canto superior direito para fechar a janela de visualização.
      Há muitas maneiras de configurar o componente Calendário com todos os recursos para atender às suas necessidades de negócios. As etapas a seguir mostram algumas opções.
    10. Altere a exibição padrão de dia para semana selecionando a guia Configurar no painel de configuração à direita e no campo Exibição selecionada atual (talvez seja necessário rolar para baixo), selecione Semana do calendário.
      O componente Calendário é atualizado na fase imediatamente para mostrar uma semana.
    11. Na guia Configurar, altere o fuso horário rolando até a seção Datas e localidade e fazendo uma nova seleção no campo Fuso horário.
      O novo fuso horário é exibido próximo ao canto superior direito do calendário na fase.
    12. Por padrão, o primeiro dia mostrado no calendário é segunda-feira, mas você pode mudar isso especificando um número diferente no campo Primeiro dia da semana na guia Configurar.
      Digite 0 para domingo, 1 para segunda-feira, 2 para terça-feira e assim por diante.
    13. Adicione um título ao calendário.
      1. Na árvore de conteúdo à esquerda, acesse Corpo > Calendário 1 > left-header-slot e selecione + Adicionar componente.
      2. Selecione o componente Texto estilizado.
      3. No painel de configuração à direita, selecione Nenhum - Configurar o componente manualmente.
      4. No painel de configuração, selecione a guia Configurar.
      5. Em Texto, digite o novo texto do título, por exemplo, Meu calendário.
      6. Selecione Salvar.
    14. Configure o painel contextual.
      1. Primeiro, veja a aparência do painel e como ele funciona selecionando Visualizar.
        O painel aparece à direita e, por padrão, mostra a exibição da agenda. Na exibição da agenda, os cartões com detalhes sobre cada evento individual são exibidos para todos os itens da agenda na exibição selecionada (por exemplo, dia ou semana). Abaixo do ícone de exibição da agenda, há outros ícones de filtro, centro de análise e seta. As etapas a seguir orientam você no processo de remoção desses três ícones e na configuração de um novo componente para o painel lateral contextual.
      2. Selecione o X no canto superior direito para fechar a sobreposição de visualização.
      3. Na árvore de conteúdo à esquerda, vá para Corpo e selecione Calendário 1.
      4. No painel de configuração, selecione a guia Configurar.
      5. Role para baixo até a seção Outras propriedades.
      6. Mova o mouse sobre o campo Itens do painel contextual e selecione Editar.
      7. Remova os ícones filter-outline, analytics-center-outlinee seta para baixo-left-fill selecionando o ícone Remover item (lixeira) para cada um.
      8. Selecione Aplicar.
        O componente Calendário é atualizado na fase imediatamente e não exibe mais os três ícones no painel contextual.
      9. Selecione Salvar.
      10. Agora, vamos adicionar um componente ao painel lateral contextual, acessando Corpo > Calendário 1 > contextual-panel-content na árvore de conteúdo e selecionando + Adicionar componente.
      11. Em Componentes de pesquisa, digite flex e selecione Flexbox.
      12. No painel de configuração, selecione o nome do componente Contêiner 2.
      13. Em Rótulo do componente, digite Contêiner de texto.
      14. Em ID do componente, digite text_container.
      15. Selecione Aplicar.
      16. No painel de configuração, selecione Nenhum - Configure o componente manualmente.
      17. Agora, vamos adicionar um componente ao painel lateral contextual, acessando Corpo > Calendário 1 > contextual-panel-content > Contêiner de texto na árvore de conteúdo e selecionando + Adicionar componente.
      18. Em Componentes de pesquisa, digite sty e selecione Texto estilizado.
      19. No painel de configuração, na guia Configurar, selecione Nenhum - Configurar o componente manualmente.
      20. No painel de configuração, na guia Configurar, remova o conteúdo do campo Texto e digite Olá, mundo.
      21. Selecione Salvar.
      22. Na árvore de conteúdo à esquerda, vá para Corpo e selecione Calendário 1.
      23. No painel de configuração, selecione a guia Configurar.
      24. Role para baixo até a seção Outras propriedades.
      25. Mova o mouse sobre o campo Itens do painel contextual e selecione Editar.
      26. Ao lado de Itens do painel contextual (1), selecione o ícone +.
      27. Em Ícone, digite calendar-outline.
      28. No tipo de IDtext_container.
      29. Em Rótulo, tipo Contêiner de texto.
      30. Em Abrir, selecione falso.
      31. Selecione Aplicar.
      32. Selecione Salvar.
        Observe que um novo ícone agora aparece no painel lateral contextual.
      33. Selecionar Exibição.
      34. Selecione o novo segundo ícone no painel lateral contextual.
        O painel mostra o contêiner de texto com o componente de texto estilizado e as palavras Olá, mundo.
      35. Feche a janela de visualização selecionando o X no canto superior direito.
    15. Configure o botão Novo.

    16. Configure um popover a ser exibido quando um evento for selecionado na grade do calendário.
      1. Na árvore de conteúdo à esquerda, acesse Corpo > Layout de coluna 1 > Coluna 1 > Calendário 1 > popover de evento e selecione + Adicionar componente.