Lag innleggskalender med JavaScript

Kalenderens funksjonalitet på en hvilken som helst nettside er alltid et interessant tillegg, vi kan ha fra de berømte datapikerne til kalendere som viser brukeraktivitet på nettstedet vårt.
For sistnevnte kan vi bruke mange av API -ene som finnes på Internett og på denne måten implementere en publikasjonskalender som viser aktiviteten til brukerne på nettstedet vårt, og vi kan gjøre dette med Google Kalender og dens kraftige API.
Inkludert API
For å inkludere API for Google Kalender på siden vår trenger vi bare å kalle det samme i toppteksten til applikasjonen vår, og vi må laste den inn med lastemetoden som følger:

 google.load ("visualisering", "1.1", {pakker: ["kalender"]});

Når dette er gjort, initialiserer vi hovedfunksjonen som vil ha kolonnene i kalenderen vår, ved hjelp av metoden addColumn Y addRows vi vil segmentere etter årene vi trenger, vi gjør dette med metoden Dato, som vil motta året, måneden og dagen, hvor vi i tillegg vil passere aktiviteten som fant sted på den spesifikke datoen:

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

Det er viktig å nevne at som et eksempel bruker vi statiske verdier, men alle kan tilpasse det til deres behov og generere disse gjennom databasespørsmål eller med en ramme for JavaScript generere en JSON og gjør injeksjonen av det samme for å gjøre det på en mer dynamisk måte.
Kalenderalternativer
Når vi har initialisert kalenderen, trenger vi bare å legge til alternativene vi ønsker, disse alternativene tømmes i formatet JSON for enkel håndtering og lesing med API. Vi kan definere tittelen på kalenderen, høyden, fargen på cellene og til og med hvordan vi vil vise ukedagene:

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

Til slutt med trekningsmetoden viser vi kalenderen og i brødteksten i HTML -koden plasserer vi div som vil inneholde den opprettede kalenderen:

 chart.draw (datatabell, alternativer);

Når dette er ferdig, la oss se hvordan kalenderen vår ser ut.

FORSTØRRE

Hvordan vi ser implementering av en publikasjonskalender er ekstremt enkelt på nettstedet vårt, nå er det bare opp til hver person å utvide funksjonaliteten og gjøre det mer dynamisk å tilpasse den til behovene til nettstedet der den er inkludert.

calendar_publicaciones.html 1,79K 134 Nedlastinger