Com apenas alguns cliques, escolha como exibir o horário no seu website: mostrar todas as aulas ou apenas os tipos selecionados (com data de início opcional), exibir professores selecionados e exibir unidades selecionadas.
Exibir apenas os tipos de aulas selecionados no horário.
-
Vá para o YOGO Admin → 'Tipos de Aulas'
-
Clique no tipo de aula que deseja exibir no horário.
-
Copie o ID do tipo de aula da barra de URL
Vá até o seu website e encontre a página onde o horário deve ser exibido.
Wordpress
Para exibir o horário completo, utilize o seguinte código:
[yogo-calendar]
Exibir apenas as aulas selecionadas:
[yogo-calendar class-types="xxxx"]
O ID que acabou de copiar substitui 'xxxx'. Se quiser exibir mais de um tipo de aula, basta separar os IDs por uma vírgula.
Outros tipos de websites, como Squarespace, Wix, etc.
Para exibir o horário completo, utilize o seguinte código:
<div class="yogo-calendar"></div>
Exibir apenas as aulas selecionadas:
<div class="yogo-calendar" data-class-types="xxxx"></div>
Exibir o horário a partir de uma data de início opcional.
Se quiser que o horário seja exibido a partir de uma data específica, pode inserir o seguinte código. Quando a data de início tiver passado, ele continuará a exibir a partir da data atual.
Wordpress:
[yogo-calendar start-date="29/8-2022"]
Outros tipos de websites, como Squarespace, Wix, etc.
<div class="yogo-calendar" data-start-date="29/9-2022"></div>
O acima também pode ser combinado para exibir tipos de aulas selecionados e uma data de início opcional. Nesse caso, ficará assim:
Wordpress:
[yogo-calendar class-types="xxxx" start-date="29/8-2022"]
Outros tipos de websites, como Squarespace, Wix, etc.
<div class="yogo-calendar" data-class-types="xxxx" data-start-date="29/9-2022"></div>
Exibir apenas os professores selecionados no horário.
Se quiser que o horário exiba um professor ou professores específicos, pode inserir o seguinte código:
Outros tipos de websites, como Squarespace, Wix, etc.
<div class="yogo-calendar" data-teacher="1234"></div>
Se quiser que o horário exiba mais de um professor
<div class="yogo-calendar" data-teachers="1234, 1234, 1234"></div>
1234 é o ID do professor.
Exibir apenas as unidades selecionadas no horário.
Se tiver mais de uma unidade ativada na YOGO e quiser que o horário exiba uma unidade específica, pode utilizar o seguinte código:
Wordpress
[yogo-calendar branch="XXXXX"]
XXXXX é o nome da unidade, que pode ser encontrado no YOGO Admin -> Definições -> Unidades.
Outros tipos de websites, como Squarespace, Wix, etc.
Exibir apenas o horário do dia atual
O código abaixo garante que o widget do YOGO mostre apenas o horário correspondente ao dia atual. Assim, para alunos que acedem via desktop, o calendário é apresentado na horizontal, enquanto no mobile surge na vertical, ajustando-se automaticamente ao tamanho do ecrã. É uma forma prática e elegante de mostrar exclusivamente o dia em curso.
Wordpress
<div class="one-day-calendar">
[yogo-calendar]
</div>
Outros tipos de websites, como Squarespace, Wix, etc.
<div class="one-day-calendar">
<div class="yogo-calendar"></div>
</div>
Abaixo encontras alguns exemplos de código CSS — estilos que permitem alterar a aparência dos elementos do YOGO (layout, cores, disposição, etc.) para tornar o widget mais apelativo. Basta copiar e colar estes códigos na área de CSS personalizado do teu construtor de website 😊
@media screen and (min-width: 1025px) {
.yogo-calendar-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
ul[data-v-5633cc58] {
display: flex;
padding-top: 10px !important;
}
}
.yogo-widget .theme--frame-box {
background-color: unset;
}
.one-day-calendar .events-group.yogo-tac-md,
.header__logo--client {
display: none;
}
.one-day-calendar .events-group.yogo-tac-md.current-day {
display: block !important;
width: 100% !important;
}
.one-day-calendar .space--between.fc-sm.mb-2,
.one-day-calendar .flex--row-reverse.space--between.flex--start {
display: none !important;
}
.class-item.yogo-tac-md {
flex: 1 1 calc(20% - 10px);
margin-bottom: 0 !important;
background-color: white;
}
Caso queiras saber o que cada código faz, deixamos abaixo uma explicação.
1. Ajustes para ecrãs maiores (≥1025px)
@media screen and (min-width: 1025px) {
.yogo-calendar-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
ul[data-v-5633cc58] {
display: flex;
padding-top: 10px !important;
}
}
Em ecrãs grandes, este bloco faz:
-
Mostra a lista do calendário “.yogo-calendar-list” em formato grelha flexível
-
itens lado a lado
-
várias linhas (wrap)
-
espaçamento de 10px entre eles
-
Resultado: O layout fica mais organizado e espaçado quando visto no desktop.
2. Retira o fundo de um elemento do widget
.yogo-widget .theme--frame-box {
background-color: unset;
}
-
Remove a cor de fundo da caixa principal do widget YOGO.
Resultado: Fica transparente ou com o fundo natural da página.
3. Esconde alguns elementos do calendário de um dia
.one-day-calendar .events-group.yogo-tac-md,
.header__logo--client {
display: none;
}
Esconde:
-
Grupos de eventos “normais” do modo one-day-calendar
-
O logotipo do cliente dentro do widget
Resultado: O calendário fica mais limpo, sem estes elementos.
4. Mostra apenas o evento do dia atual (e ocupa toda a largura)
.one-day-calendar .events-group.yogo-tac-md.current-day {
display: block !important;
width: 100% !important;
}
- O grupo de eventos do dia atual volta a ser mostrado
-
E ocupa 100% da largura
Resultado: o calendário só mostra o dia atual, e ocupa toda a largura disponível.
5. Remove barras, filtros ou cabeçalhos desnecessários
.one-day-calendar .space--between.fc-sm.mb-2,
.one-day-calendar .flex--row-reverse.space--between.flex--start {
display: none !important;
}
-
Isto costuma esconder:
-
barras superiores
-
filtros
-
elementos de navegação
(diferem consoante o widget)
6. Define cada aula como uma “caixa” flexível em grelha
.class-item.yogo-tac-md {
flex: 1 1 calc(20% - 10px);
margin-bottom: 0 !important;
background-color: white;
}
Cada “class-item”:
-
ocupa 20% da largura menos 10px
⇒ resultado: 5 itens por linha -
tem fundo branco
-
sem margem inferior
Resultado: O calendário parece uma grelha de cartões (cards).