Uma das maiores vantagens em trabalhar com WordPress é a quantidade enorme de ferramentas que existem para adicionar à plataforma. Você já deve saber bem que com o WP a gente pode criar mil e um projetos – de diferentes tipos, tamanhos e objetivos. Então hoje, o CanalWP, vai te indicar um plugin maravilhoso para quem precisa exibir calendários de eventos.

Seu negócio ou site pode precisar mostrar para seus clientes de forma on-line, horários de palestras, shows, aulas e qualquer outro tipo de evento que requer uma organização clara e objetiva dentro de um calendário.

Calendário de Eventos e Horários no WordPress

Talvez você já tenha tentado fazer isso utilizando de HTML puro – o que deve ter dado o maior trabalho. Para facilitar a sua vida, o CanalWP vai te mostrar a ferramenta perfeita para criar calendário de eventos e horários no WordPress.

Plugin Timetable Responsive Schedule

Disponível no marketplace CodeCanyon, o plugin Timetable Responsive Schedule pode ser mais útil para o seu negócio e site do que você imagina. Extremamente fácil de criar eventos e organizá-los, ele ainda permite que você customize cores de fundo, texto, slug e títulos da maneira que melhor te parecer.

Pelo valor de $19 (dólares) você equipa seu site com uma ferramenta que cria e exibe calendários de eventos extremamente eficientes e completamente responsivos! Criado pela QuanticaLabs, ao comprar o plugin Timetable Responsive Schedule você conta com suporte, documentação, futuras atualizações e a certeza de ter em mãos uma ferramenta de qualidade com código HTML5 validado.

Baixar Demo | Hospedagem

Iniciando no Timetable Responsive Schedule

Comprou o plugin lá na CodeCanyon? Agora eu vou te ensinar como utilizá-lo. Você vai ver como é fácil e rápido.

Depois de estar com o arquivo do plugin em seu computador, você precisa fazer o upload do mesmo para dar início às primeiras configurações.

Subiu e ativou o plugin para seu site WordPress? Maravilha! Agora, por meio da barra lateral de sua Dashboard, acesse Configurações > Timetable.

Na nova página você verá diversos campos a serem preenchidos e logo no topo, um botão capaz de importar o conteúdo de exemplo que vem com o plugin. Vou te ensinar a configurar o Timetable Responsive Schedule do zero, então não precisaremos importar nada. Caso você ache interessante, importe o conteúdo de demonstração e veja como o plugin funciona.

Role a página até o final, localizando o título Events post type configuration. Aqui nós vamos configurar o slug, e o título em singular e plural. Como o exemplo que vou utilizar neste tutorial será para Aulas, vamos assumir esse slug e também esse título. Veja como fiz abaixo:

Depois, clique no botão Save.

Até este ponto, onde não criamos eventos e nem categorias, esta é a única configuração necessária.

Cenário de Exemplo

Para demonstrar na prática como o plugin Timetable Responsive Schedule funciona, vamos assumir um cenário de exemplo. Imagine que temos o site de uma academia, onde as diferentes aulas, horários e dias devem ser listados para consulta por seus alunos através do site.

Então, vamos precisar criar:

1. Os dias da semana, como colunas
2. Os diferentes tipos de aulas que a academia possui, como categorias
3. As aulas com horários e informações importantes
4. Página com shortcodes para exibir a tabela de horários

Criando Colunas e Eventos

Como você acabou no tópico anterior, assumiremos como cenário de exemplo para esse tutorial o site de uma academia. Então, depois da configuração que realizamos lá no início, precisamos criar os dias da semana para nossas tabelas ou calendários de aulas que ocorrerão na academia.

Colunas

Você deve entender que os dias da semana serão apresentados como colunas em nosso calendário. Serão eles que irão nos ajudar e também permitir que nossos visitantes entendam quais as aulas que acontecem em cada dia da semana.

Através da lateral esquerda do seu Painel de Administração, acesse Timetable Columns. Depois, clique em Add New.

Na página de cadastro das colunas ou dias da semana, você deve informar o nome do “dia da semana”. Assim, você deve fazer 7 adições: segunda, terça, quarta e assim sucessivamente.

Depois de cadastrar todos os dias da semana, a listagem de colunas ficará assim:

Eventos ou Aulas

Agora que nós já temos os dias da semana devidamente cadastrados, o que já ajuda a organizar nosso calendário, precisaremos criar categorias – também com o mesmo intuito de organização.

Digamos que a nossa academia disponha de diferentes atividades, muitas vezes realizadas na praia, na piscina, etc. Então, é excelente que criemos categorias capazes de englobar os diferentes tipos de aulas e atividades.

Categorias para Aulas

Lembra que no início do nosso tutorial te ensinei a configurar slug e títulos e configuramos como “Aulas”? Pois então, no momento que salvamos essa configuração um item de menu lateral esquerdo será exibido com o mesmo título. Então, para criar categorias você deve acessar Aulas > Categories.

Na nova janela que se abrirá, você vai perceber que o sistema é igual ao de cadastrar categorias para posts no WordPress. Então, preencha o Nome da Categoria, Slug e clique em Adicionar nova categoria. Realize esse processo para todas as categorias que precisar.

Criei apenas duas categorias: Lutas e Atividades Coletivas.

Adicionando Novas Aulas

Ufa! Chegamos até a o cadastro em si das nossas aulas ou eventos – depende da forma como você irá utilizar o Timetable Responsive Schedule. Bem, em nosso exemplo continuaremos a chamar de “aulas”, OK?!

O processo de criar aulas que segue abaixo deve ser utilizado para todas as aulas que você precise, sejam ela 5, 10 ou 50. Repita os mesmos passos sempre que for necessário adicionar uma nova aula ao seu calendário.

Clique em Add New para adicionar uma Nova Aula (Aulas > Add New).

Agora, comece digitando o título da sua Aula e depois, selecionando a categoria a qual ela pertence no box que está na lateral direita da sua tela.

Depois, rolando a página mais para baixo, você vai encontrar o box referente a Options. Aqui você deve definir configurações referentes às cores do “quadradinho” (box onde a aula será exibida no calendário), cor do texto, cor para texto que exibirá o horário, URL da página da atividade e se haverá esse link, dentre outros.

Aqui eu vou precisar configurar apenas cor de fundo do quadrado que vai conter a minha aula e uma cor para o texto.

Role a página para baixo e encontre Event Hours. Esse é o momento onde configuraremos dia de semana, horário e demais informações para a nossa aula.

Comece escolhendo o dia semana, depois, digite o horário de início e fim da atividade. Nos campos de descrição você pode preencher com informações relevantes àquela aula, como número da sala e nome do professor.

Os 2 últimos campos não serão utilizados. Todavia, saiba que em Tooltip você pode entrar algum texto importante, que ao passar o mouse em cima do box de seu evento no calendário, ele será exibido. Em Category você pode criar uma categorização para horários – repare que são diferentes de categorias para aulas.

Para finalizar, clique em Add.

Você deve adicionar quantos horários quiser repetindo o mesmo processo, para todas as aulas de diferentes dias e horários que quiser.

Eu adicionei 4 aulas, com o mesmo professor e na mesma sala, mas para diferentes dias da semana e horários. Veja como ficou:

Para finalizar, clique no botão Publicar no início da página. Não esqueça!

Gerando Shortcodes para Exibição de Eventos

Além da aula de Muay Thai que cadastrei no tópico anterior, eu cadastrei diversas outras aulas, para diferentes tipos de luta.

Agora, eu preciso exibir meu calendário numa página específica, para que meus visitantes possam visualizá-la. Para isso, precisarei gerar uma shortcode. Então, acesse Configurações > Timetable.

Passo a Passo

Para gerar a nossa shortcode, alguns campos precisam ser selecionados, dias da semana escolhidos, tipos de filtro, etc. Abaixo vou detalhar para você aquelas opções que obrigatoriamente precisa configurar para gerar seu shortcode de maneira correta.

Events

Aqui você encontra a lista de todos os eventos, ou aulas como estamos chamando, que tenha criado. Selecione aqueles que deseja exibir.

Event categories

Aqui você encontra a lista de todas as categorias criadas. Selecione aquelas que deseja exibir. Escolhi a categoria Lutas para exibir todas que cadastrei.

Hour categories

Se você houver criado categoria para horários, selecione aquelas que te interessam exibir neste momento.

Columns

Referente às colunas de nosso calendário, selecione os dias da semana que deverão ser mostrados. Selecionei todos os dias da semana.

Hour measure

Se você tem eventos de 1 em 1 hora, 30 em 30 minutos ou 15 em 15minutos – escolha o período de tempo geral para a maioria dos seus eventos. Escolhi de hora em hora.

Filter style

Quando nossa tabela de horários for exibida, a depender das categorias que venhamos a criar, será possível utilizar de um filtro para visualizar melhor os eventos. Então, escolha qual o tipo deste filtro: Dropdown list ou Tabs. Escolhi a opção Tabs.

Filter kind

Como o filtro deverá funcionar em seu site? Escolha a listagem de eventos será exibida por eventos, categorias ou eventos e categorias.

Filter label

Digite um texto para a opção que exibirá todos as aulas, sem utilizar filtro.

Time format

Escolha a formatação de horário que deseja utilizar.

Event block layout

O plugin traz alguns layouts prontos. Escolhi o Type 5, mas você pode testar todos e escolher o que quiser.

Hide empty rows

Se você quer exibir um calendário onde apenas os dias da semana que possuem aulas ou eventos apareçam, escolha Yes. Deixei como “Yes” na minha seleção, pois não tenho nenhuma aula agendada para sábado ou domingo, então prefiro que tais dias não apareçam.

Disable event url

Caso alguma das suas aulas possua página específica, mas você quer desabilitar a linkagem dentro do calendário, escolha Yes.

Outras configurações são possíveis de fazer, como alinhamento do texto, marcação de Id para identificação, altura de linha, responsividade, etc. No entanto, apenas os tópicos que listei acima são necessários para a geração correta de uma shortcode.

Colando Shortcode e Exibindo Calendário

Depois de configurar todos os campos do nosso calendário, você deve copiar a shortcode gerada. No início e quase no finalzinho da mesma página, você encontrará esse código – copie o mesmo.

Agora, siga para a página onde seu calendário de aulas deve ser exibido e cole a shortcode. Depois, clique em Publicar.

Abaixo seguem 2 exemplos de calendário. O primeiro com apenas as aulas de Muay Thai sendo exibidas:

E o segundo, com todas as aulas da categoria Lutas:

Conclusão

Se dúvida alguma, para quem tem a necessidade de exibir horários de eventos, aulas, congressos, palestras e reuniões, o plugin Timetable Responsive Schedule é uma ferramenta obrigatória. Com ele você cria categorias, eventos e horários em poucos minutos e consegue exibir em suas páginas com grande facilidade. Recomendo!

Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.