Créer un calendrier de publication avec JavaScript

La fonctionnalité des calendriers sur n'importe quelle page Web est toujours un ajout intéressant, nous pouvons avoir des célèbres sélecteurs de date aux calendriers qui montrent l'activité des utilisateurs sur notre site Web.
Pour ces derniers, nous pouvons utiliser de nombreuses API existantes sur Internet et ainsi implémenter un calendrier de publication qui montre l'activité des utilisateurs au sein de notre site Web et nous pouvons le faire avec Google Agenda et sa puissante API.
Y compris l'API
Pour inclure l'API de Google Agenda dans notre page, nous n'avons qu'à appeler le même dans l'en-tête de notre application, et nous devons le charger avec la méthode load comme suit :

 google.load ("visualisation", "1.1", {packages : ["calendrier"]});

Une fois cela fait, nous initialisons la fonction principale qui aura les colonnes de notre calendrier, en utilisant la méthode ajouterColonne Oui ajouter des lignes nous allons segmenter par les années dont nous avons besoin, nous le faisons avec la méthode Date, qui recevra l'année, le mois et le jour, où nous transmettrons en plus l'activité qui a eu lieu à cette date spécifique :

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

Il est important de mentionner qu'à titre d'exemple, nous utilisons des valeurs statiques mais chacun peut l'adapter à ses besoins et les générer via des requêtes de base de données ou avec un cadre de JavaScript générer un JSON et faire l'injection de la même chose pour le faire de manière plus dynamique.
Options de calendrier
Une fois que nous avons initialisé le calendrier, nous n'avons plus qu'à ajouter les options que nous voulons, ces options sont vidées dans le format JSON pour une facilité de prise en main et de lecture avec l'API. On peut définir le titre du calendrier, la hauteur, la couleur des cellules et même comment on veut afficher les jours de la semaine :

 var options = {title: "Post Calendar", height: 350, calendar: {cellColor: {stroke: '# 76a7fa', strokeOpacity: 0.5, strokeWidth: 1,}, dayOfWeekLabel: {fontName: 'Times-Roman', fontSize : 12, couleur : '# 1a8763', gras : vrai, italique : vrai,}, dayOfWeekRightSpace : 10, daysOfWeek : 'DLMMJVS',}};

Enfin avec la méthode draw, on affiche le calendrier et dans le corps de notre HTML on place le div qui contiendra le calendrier créé :

 chart.draw (dataTable, options);

Ceci étant terminé, voyons à quoi ressemble notre calendrier.

AGRANDIR

La façon dont nous envisageons la mise en place d'un calendrier de publication est extrêmement simple sur notre site Web, il n'appartient désormais qu'à chacun d'étendre ses fonctionnalités et de le rendre plus dynamique pour l'adapter aux besoins du site Web dans lequel il est inclus.

calendrier_publicaciones.html 1,79K 134 Téléchargements