✅ Crie uma agenda de postagem com JavaScript

Índice

A funcionalidade dos calendários em qualquer página da web é sempre uma adição interessante, podemos ter desde os famosos selecionadores de data até calendários que mostram a atividade do usuário em nosso site.
Para este último, podemos usar muitas das APIs existentes na Internet e, dessa forma, implementar um calendário de publicação que mostra a atividade dos usuários em nosso site e podemos fazer isso com calendário do Google e sua API poderosa.
Incluindo a API
Para incluir a API de calendário do Google em nossa página, precisamos apenas chamar o mesmo no cabeçalho de nosso aplicativo, e devemos carregá-lo com o método load da seguinte maneira:

 google.load ("visualização", "1.1", {pacotes: ["calendário"]});

Feito isso, inicializamos a função principal que terá as colunas de nosso calendário, usando o método addColumn Y addRows vamos segmentar pelos anos de que precisamos, fazemos isso com o método Encontro: Data, que receberá o ano, mês e dia, onde passaremos adicionalmente a atividade ocorrida naquela data específica:

 var dataTable = new google.visualization.DataTable (); dataTable.addColumn ({type: 'data', id: 'data'}); dataTable.addColumn ({tipo: 'número', id: 'publi'}); dataTable.addRows ([[nova data (2014, 4, 13), 500], [nova data (2014, 4, 14), 800], [nova data (2014, 3, 15), 400], [nova data (2014, 3, 16), 900], [nova data (2014, 3, 17), 600], [nova data (2015, 9, 4), 400], [nova data (2015, 9, 5), 400], [nova data (2015, 9, 12), 250], [nova data (2015, 9, 13), 900], [nova data (2015, 9, 19), 800], [nova data (2015 , 9, 23), 900], [nova data (2015, 9, 24), 500], [nova data (2015, 9, 30), 900]]);

É importante mencionar que, como exemplo, usamos valores estáticos, mas todos podem adaptá-los às suas necessidades e gerá-los através de consultas de banco de dados ou com algum framework de JavaScript gerar um JSON e fazer a injeção do mesmo para fazer de uma forma mais dinâmica.
Opções de calendário
Depois de inicializarmos o calendário, só precisamos adicionar as opções que queremos, essas opções são esvaziadas no formato JSON para facilidade de manuseio e leitura com a API. Podemos definir o título do calendário, a altura, a cor das células e até como queremos mostrar os dias da semana:

 var options = {title: "Post Calendar", height: 350, calendar: {cellColor: {stroke: '# 76a7fa', strokeOpacity: 0.5, strokeWidth: 1,}, dayOfWeekLabel: {fontName: 'Times-Roman', fontSize : 12, cor: '# 1a8763', negrito: verdadeiro, itálico: verdadeiro,}, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS',}};

Finalmente, com o método draw, exibimos o calendário e no corpo do nosso HTML colocamos o div que conterá o calendário criado:

 chart.draw (dataTable, options);

Com isso concluído, vamos ver como é o nosso calendário.

PROLONGAR

A forma como vemos a implementação de um calendário de publicação no nosso site é extremamente simples, agora cabe a cada um alargar a sua funcionalidade e torná-la mais dinâmica para o adaptar às necessidades do site em que está inserido.

calendar_publicaciones.html 1,79K 134 downloads