Crea un calendario dei post con JavaScript

La funzionalità dei calendari su qualsiasi pagina web è sempre un'aggiunta interessante, possiamo avere dai famosi datepicker ai calendari che mostrano l'attività degli utenti sul nostro sito web.
Per quest'ultimo possiamo utilizzare molte delle API che esistono su Internet e in questo modo implementare un calendario di pubblicazione che mostra l'attività degli utenti all'interno del nostro sito Web e possiamo farlo con Google Calendar e la sua potente API.
Inclusa l'API
Per includere l'API di Google Calendar nella nostra pagina dobbiamo solo richiamare lo stesso nell'intestazione della nostra applicazione, e dobbiamo caricarlo con il metodo load come segue:

 google.load ("visualizzazione", "1.1", {pacchetti: ["calendario"]});

Fatto ciò, inizializziamo la funzione principale che avrà le colonne del nostro calendario, utilizzando il metodo addColumn sì addRows segmenteremo per gli anni di cui abbiamo bisogno, lo facciamo con il metodo Data, che riceverà l'anno, il mese e il giorno, dove passeremo inoltre l'attività che si è svolta in quella data specifica:

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

È importante menzionare che come esempio usiamo valori statici ma ognuno può adattarlo alle proprie esigenze e generarli tramite query di database o con qualche framework di JavaScript generare un JSON e fai l'iniezione dello stesso per farlo in modo più dinamico.
Opzioni del calendario
Una volta che abbiamo inizializzato il calendario, dobbiamo solo aggiungere le opzioni che vogliamo, queste opzioni vengono svuotate nel formato JSON per facilità di gestione e lettura con l'API. Possiamo definire il titolo del calendario, l'altezza, il colore delle celle e anche come vogliamo visualizzare i giorni della settimana:

 var options = {title: "Post Calendar", altezza: 350, calendar: {cellColor: {stroke: '# 76a7fa', strokeOpacity: 0.5, strokeWidth: 1,}, dayOfWeekLabel: {fontName: 'Times-Roman', fontSize : 12, colore: '# 1a8763', grassetto: vero, corsivo: vero,}, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS',}};

Infine con il metodo draw visualizziamo il calendario e nel corpo del nostro HTML posizioniamo il div che conterrà il calendario creato:

 chart.draw (dataTable, opzioni);

Con questo finito, vediamo come appare il nostro calendario.

INGRANDIRE

Il modo in cui vediamo implementare un calendario di pubblicazione è estremamente semplice sul nostro sito web, ora sta solo ad ogni persona estenderne le funzionalità e renderlo più dinamico per adattarlo alle esigenze del sito web in cui è inserito.

calendar_publicaciones.html 1,79K 134 download