Como criar um calendário dinâmico em Gutenberg

Criação dinâmica de calendário

Habilitar módulo de calendário

Abra o painel WP do seu site e vá para JetEngine > JetEngine Dashboard > Modules . Encontre o módulo Calendário e ative o botão de alternância correspondente.

habilitando módulo de calendário

Crie um tipo de postagem personalizado para eventos

Vá para a guia JetEngine> Tipos de postagem , clique no botão “ Adicionar novo ” e crie um CPT. O guia detalhado sobre a criação de tipos de postagem personalizados pode ser encontrado aqui . Você pode nomear o CPT como quiser, adicionar vários rótulos e colunas administrativas.

tipo de postagem de eventos

Você também pode adicionar quantos metacampos precisar, no entanto, certifique-se de adicionar um campo Data . A célula do calendário onde será colocado o evento depende do valor deste campo. 

Aviso

Você deve ativar a opção Salvar como carimbo de data/hora na janela de configurações do campo Data . Caso contrário, a data não será salva corretamente e será impossível utilizá-la no calendário.

metacampo de data

Quando terminar, clique no botão “ Publicar ” para salvar as alterações.

Crie um modelo de listagem para eventos

O calendário possui células para cada dia onde os eventos podem ser colocados – assim como na Grade de Listagem. Portanto, para definir como ficará o evento na célula, é necessário criar um template de Listagem especial para ele. Vá para JetEngine> Listagens e clique no botão “ Adicionar novo ”. Escolha o tipo de postagem, nomeie a listagem e selecione a opção “Blocos” no menu suspenso da visualização da listagem .

modelo de listagem para calendário

Você pode adicionar quantos blocos desejar. Se você instalou o plug-in JetStyleManager , também poderá personalizar a aparência da listagem. Caso precise de ajuda, confira nosso tutorial de criação de modelo de listagem .

Adicionar calendário à página

Agora, vá para a página onde deseja colocar um calendário. Abra a janela de edição, clique no botão “ Adicionar Bloco ” e procure pelo bloco Calendário de Listagem .

bloco de calendário de listagem

Clique no bloco para adicioná-lo à página. No menu suspenso Listagem da seção do menu Configurações gerais , escolha o modelo que você criou para eventos. Na lista suspensa Agrupar postagens por , selecione a opção “Data do campo personalizado” e digite o nome do metacampo Data na barra de nome do metacampo .

configurações gerais do calendário

Isso é tudo, os itens do tipo de postagem personalizada serão mostrados nas células do calendário.

E agora, vamos examinar mais detalhadamente as configurações de bloqueio  do Calendário de listagem .

Listagem de configurações de bloqueio de calendário

Configurações Gerais

listando as configurações gerais do calendário

  • Listagem . Todos os modelos de listagem que você criou com a ajuda do plugin JetEngine serão reunidos aqui, incluindo aqueles criados no Elementor Page Builder. Escolha a listagem que você criou para o calendário;
  • Agrupar postagens por . O item CPT é colocado na célula que corresponde a uma determinada data. Aqui você pode decidir de onde tirar essa data. Data de publicação da postagem significa que será usada a data em que a postagem foi publicada. Se você escolher a opção Data da postagem de modificação , o item será colocado na célula que corresponde ao dia em que a postagem foi modificada. E quando você escolhe a opção Data do campo personalizado , será solicitado que você especifique o campo Data na barra de nome do campo Meta ;
  • Permitir eventos de vários dias . Com a ajuda deste botão de alternância, você pode permitir a exibição dos eventos que duram mais de um dia. Se estiver habilitado, o item do evento de vários dias será colocado em diversas células de acordo com o período em que for realizado;
  • Formato de dias da semana . No topo da tabela do calendário você pode ver os nomes dos dias. Neste menu suspenso, você pode escolher como eles serão exibidos:
    • Completo – nomes completos (segunda, terça, etc.);
    • Curto – três primeiras letras (Seg, Ter, etc.);
    • Letra inicial – apenas a primeira letra (M, T, etc.);
  • Comece no mês personalizado . Por padrão, o calendário abre no mês atual. No entanto, se você ativar esse botão, poderá definir qual mês será exibido primeiro, escolhendo-o nos menus suspensos Início do mês e Início do ano ;
  • Mostrar postagens do mês próximo . Se você ativar esse botão, serão mostrados os eventos que acontecerão no mês mais próximo;
  • Ocultar eventos passados . Por padrão, os eventos já ocorridos permanecem no calendário. No entanto, você pode ocultá-los ativando esta alternância;
  • Layout da legenda . Acima da tabela do calendário estão os botões “Voltar” e “Avançar”, além do nome do mês e do ano. Neste menu suspenso, você pode escolher um dos quatro layouts para eles.

Configurações de pós-consulta

configurações de consulta de postagem de listagem de calendário

Por padrão, todas as postagens de um tipo de postagem escolhido são mostradas no calendário. Porém, se quiser exibir apenas parte deles, você pode definir quais deles serão exibidos neste mesmo calendário.

Bloquear visibilidade

Por padrão, o bloco Calendário de listagem está sempre visível. No entanto, você pode alterar isso e definir a opção “Consulta vazia” no menu suspenso Ocultar bloco se . Nesse caso, se a seção Post Query estiver vazia, o Calendário de Listagem não será mostrado aos usuários. Isso significa que se após a consulta não houver postagens, o bloco fica oculto.

visibilidade do bloco de calendário

Bom trabalho! Agora você sabe criar e adicionar um calendário dinâmico à página do seu site usando JetEngine e Gutenberg Editor.

Índice