Como criar um calendário dinâmico com Bricks

Para ativar o módulo Calendário , vá para o painel JetEngine , ative a alternância Calendário na seção Módulos padrão e pressione o botão “Salvar” .

Conforme diziam os requisitos, era necessário criar um CPT dedicado para os eventos. Prossiga para JetEngine > Post Types , clique para editar este tipo de postagem, role para baixo até a guia Meta Fields e adicione o meta field Date .

Se você deseja adicionar eventos de vários dias ao calendário (eventos que durarão mais de um dia, por exemplo, eventos de fim de semana ou feriados), crie o segundo metacampo “Data de término ”. Mais sobre esta função você pode aprender no tutorial Como exibir uma postagem para várias datas com o widget de calendário . Não se esqueça de ativar o botão “Salvar como carimbo de data/hora” .

Além disso, criei o metacampo Mídia para adicionar imagens ao calendário.

Ao terminar de editar o CPT, clique no botão “Atualizar tipo de postagem” .

Vá para a guia CPT no painel do WordPress (“Eventos”, no meu caso) e crie várias postagens de eventos para exibi-los posteriormente na listagem do calendário. Criei diversos eventos para o site do restaurante.

No post do evento “Degustação de Vinhos”, adicionei datas de início e término para mostrar posteriormente no calendário que este evento dura dois dias (durante os finais de semana).

Vá para JetEngine> Listagens e clique no botão “Adicionar novo” . Escolha a fonte da listagem “Postagens” , o tipo de postagem para os eventos no campo Do tipo de postagem (“Eventos” no meu caso), insira o nome do item da listagem e selecione a visualização da listagem “Bricks” . Pressione o botão “Criar item de listagem” .

Clique no botão “+” na tela para adicionar uma nova seção. Arraste e solte os elementos dinâmicos, como Dynamic Field , Dynamic Image e Dynamic Link para organizar a futura célula do calendário. Você pode encontrar mais sobre a criação de itens de listagem com Bricks no tutorial Como criar itens de listagem com Bricks .

Usei o elemento Dynamic Field para exibir o título da postagem, Dynamic Image para mostrar uma imagem do evento do metacampo Image e Dynamic Link com a fonte “Permalink” para que os usuários possam prosseguir para a página do evento.

Depois de terminar de personalizar, clique no botão “Salvar” .

Vá para a guia Páginas no painel do WordPress e clique em “Editar com Bricks” na página que você criou anteriormente para colocar o calendário dinâmico aqui.

Adicione uma nova seção e arraste e solte o elemento Calendário .

Agora, vamos passar pelas configurações do Calendário .

Configurações Gerais

• Listagem . Neste menu suspenso, você precisa selecionar o modelo de listagem criado recentemente para a célula do calendário;
• Agrupar postagens por . Este recurso define como os eventos serão colocados no calendário. Se você escolher “Data pós-publicação” ou “Data pós-modificação”, cada evento será colocado na célula do calendário correspondente à data de criação ou modificação desse evento. De acordo com este tutorial passo a passo, você precisa selecionar a opção “Data do campo personalizado” e inserir o nome do metacampo Data na área de texto Nome do metacampo . Você pode escolher a opção “Consultar data de criação do item” se desejar exibir no calendário objetos como usuários, comentários e termos pela data de criação. Se tais objetos contiverem o metacampo Data , use a opção “Data do campo personalizado”;
• Permitir eventos de vários dias . Se você ativar esse botão, será possível adicionar eventos que duram dois ou mais dias. No nome do campo Data final , insira o nome do metacampo Data onde você adicionou a data do evento final;
• Use tipos de postagem personalizados . Ative esta opção se quiser mostrar postagens de dois ou mais tipos de postagem diferentes.
• Formato de dias da semana . Nesta lista suspensa, você pode selecionar a forma como os nomes dos dias da semana serão exibidos: “Completo”, “Abreviado” ou “Letra inicial”;
• Comece no mês personalizado . Por padrão, o calendário abre no ano e mês atuais. Depois de ativar esta alternância, você pode escolher qualquer outro mês de qualquer outro ano para mostrar primeiro;
• Mostrar postagens do mês próximo . Esta alternância permite mostrar os eventos que aconteceram ou acontecerão no mês próximo;
• Ocultar eventos passados . Se você não quiser exibir todos os eventos que já terminaram, ative esta opção.

Consulta personalizada

Query Builder é o recurso JetEngine que permite exibir apenas os itens da lista que correspondem às condições criadas. Você pode criar a consulta personalizada para postagens, termos, usuários, etc., e aplicá-la à grade de listagem na guia de configurações de consulta personalizada . Para saber mais, vá para Visão geral do Query Builder .

Visibilidade do widget

Com a seção de configurações de Visibilidade do Widget é possível configurar o elemento para sempre ser mostrado ou ocultá-lo quando a consulta estiver vazia.

Depois de terminar de personalizar o Calendário , clique no botão “Salvar” .

Prossiga para a página com o Calendário no front end. Como você pode ver, as postagens do CPT “Evento” são exibidas de acordo com a data no metacampo Data . O post “Degustação de Vinhos” é exibido duas vezes de acordo com a data de início e término.