Prosas Agenda de Eventos

Renderiza a agenda de eventos.

Antes de começar

Veja aqui os pré-requisitos.

Como utilizar o componente

Deve ser informado o client-id.

<prosas-agenda-eventos client-id="SEU_CLIENT_ID"></prosas-agenda-eventos>

Customizando com css

É possível também modificar o estilo da agenda através do css.

...
<style type="text/css">
  prosas-agenda-eventos::part(agenda-container) {
    border-radius: 8px;
  }

  prosas-agenda-eventos::part(evento-card) {
    background-color: white;
  }

  prosas-agenda-eventos::part(detalhes-container) {
    background-color: gray;
    border-left: 5px solid orange;
  }

  prosas-agenda-eventos::part(detalhes-status) {
    background-color: aqua;
    color: white;
    border-left: 15px solid cadetblue;
  }
</style>

<prosas-agenda-eventos client-id="SEU_CLIENT_ID"></prosas-agenda-eventos>
...

Parts

Part	Descrição
agenda-container	Container principal. Ideal para definir font-family e estilos pra todo o componente
agenda-data-container	Container que apresenta o texto da data selecionada ex: hoje,23 de outubro
agenda-data-dia	Span com o texto do dia da semana. ex: Hoje. Segunda-feira, etc
agenda-separator	Borda que separa o calendário da lista de eventos
agenda-svg	Svg de quando não há evento
agenda-paginacao	Paginação dos eventos
calendario-container	Container com os dias para selecionar a data
calendario-titulo-container	Container com o título do calendário. ex: Outubro, 2024
calendario-seta-esquerda	Svg da seta de voltar o mês
calendario-seta-direita	Svg da seta de passar o mês
calendario-dias-mes	Dias do mês atual do calendário
calendario-dias-outro	Dias de outro mês. Ou anteior ou próximo, que aparecem no início e final do calendário
calendario-dias-semana	Dias da semana do header do calendário. ex: S T Q Q S S D
calendario-dia-semana	Dia da semana do header do calendário no dia de hoje. ex: Q
calendario-dia-evento	Dia do calendário que possui evento
calendario-dia-hoje	Dia de hoje do calendário
calendario-dia-selecionado	Dia selecionado do calendário
evento-card	Container do evento na listagem de eventos
evento-card-projeto	Label com o nome do projeto na listagem de eventos
detalhes-container	Container com os detalhes do evento clicado
detalhes-status	Container com o status do evento - cancelado ou realizado
detalhes-evento-nome	Label com o nome do evento no container de detalhes

Atributos

Atributo	Obrigatório	Valores	Descrição
client-id	sim	UID do client	UID do client
projeto-id	não	Id do projeto	Se informado: Lista os eventos do projeto Senão: Lista todos os eventos de todos os projetos

Exemplo completo

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Agenda de Eventos</title>

    <script type="text/javascript" src="https://cdn.prosas.com.br/front-sdk/prod/latest/webcomponents.bundle.js"></script>

    <style type="text/css">
      :root {
        --brand-color: #e21e2f;
        --base-text: #777;
        --base-text-accent: #333;
        --ui-hover: rgba(0, 0, 0, 0.1);
        --lines: rgba(0, 0, 0, 0.1);
        --selected-day-text: #fff;
        --current-month-text: #444;
        --other-month-text: #a2a2a2;
        --shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
        --status-bg: #f5f5f5;
      }

      prosas-agenda-eventos::part(agenda-container) {
        max-width: 500px;
        margin: 5vh auto;
        border-radius: 8px;
        box-shadow: var(--shadow);
        background-color: transparent;
        color: var(--base-text);
        border: 1px solid var(--lines);
      }

      prosas-agenda-eventos::part(agenda-separator) {
        border-color: var(--lines);
      }

      prosas-agenda-eventos::part(agenda-svg) {
        fill: var(--brand-color);
      }

      prosas-agenda-eventos::part(agenda-data-dia) {
        color: var(--base-text-accent);
      }

      prosas-agenda-eventos::part(calendario-titulo-container) {
        color: var(--base-text-accent);
      }

      prosas-agenda-eventos::part(calendario-dias-mes) {
        color: var(--current-month-text);
      }

      prosas-agenda-eventos::part(calendario-dias-outro) {
        color: var(--other-month-text);
      }

      prosas-agenda-eventos::part(calendario-dia-evento),
      prosas-agenda-eventos::part(calendario-dia-semana),
      prosas-agenda-eventos::part(calendario-dia-hoje) {
        color: var(--brand-color);
      }

      prosas-agenda-eventos::part(calendario-dias-mes):hover,
      prosas-agenda-eventos::part(calendario-dias-outro):hover,
      prosas-agenda-eventos::part(calendario-dia-evento):hover,
      prosas-agenda-eventos::part(calendario-dia-hoje):hover {
        background-color: var(--ui-hover);
      }

      prosas-agenda-eventos::part(calendario-dia-selecionado) {
        color: var(--selected-day-text);
        background-color: var(--brand-color);
      }

      prosas-agenda-eventos::part(evento-card) {
        border-color: var(--brand-color);
      }
      prosas-agenda-eventos::part(evento-card):hover {
        background-color: var(--ui-hover);
      }

      prosas-agenda-eventos::part(evento-card-projeto) {
        color: var(--brand-color);
        border-color: var(--brand-color);
      }

      prosas-agenda-eventos::part(detalhes-evento-nome) {
        color: var(--brand-color);
      }

      prosas-agenda-eventos::part(detalhes-status) {
        background-color: var(--status-bg);
      }
    </style>
  </head>

  <body>
    <prosas-agenda-eventos client-id="SEU_CLIENT_ID" projeto-id="4"></prosas-agenda-eventos>
  </body>
</html>

Veja o exemplo aqui!

Antes de começar​

Como utilizar o componente​

Customizando com css​

Parts​

Atributos​

Exemplo completo​

Antes de começar

Como utilizar o componente

Customizando com css

Parts

Atributos

Exemplo completo