Opret postkalender med JavaScript

Kalendernes funktionalitet på enhver webside er altid en interessant tilføjelse, vi kan have fra de berømte datapickers til kalendere, der viser brugeraktivitet på vores websted.
Til sidstnævnte kan vi bruge mange af de API'er, der findes på Internettet og på denne måde implementere en publikationskalender, der viser brugernes aktivitet på vores websted, og vi kan gøre dette med Google Kalender og dens kraftfulde API.
Herunder API
At inkludere API for Google Kalender på vores side behøver vi kun at kalde det samme i overskriften på vores applikation, og vi skal indlæse det med indlæsningsmetoden som følger:

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

Når dette er gjort, initialiserer vi hovedfunktionen, som vil have kolonnerne i vores kalender ved hjælp af metoden tilføj kolonne Y addRows vi vil segmentere efter de år, vi har brug for, vi gør dette med metoden Dato, som modtager året, måneden og dagen, hvor vi yderligere vil bestå den aktivitet, der fandt sted på den specifikke dato:

 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 vigtigt at nævne, at vi som eksempel bruger statiske værdier, men alle kan tilpasse det til deres behov og generere disse gennem databaseforespørgsler eller med nogle rammer for JavaScript generere en JSON og gør indsprøjtningen af ​​det samme for at gøre det på en mere dynamisk måde.
Kalenderindstillinger
Når vi har initialiseret kalenderen, behøver vi kun at tilføje de valgmuligheder, vi ønsker, disse muligheder tømmes i formatet JSON for nem håndtering og læsning med API. Vi kan definere titlen på kalenderen, højden, cellens farve og endda hvordan vi vil vise ugens dage:

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

Endelig med tegnemetoden viser vi kalenderen og i brødteksten i vores HTML placerer vi div, der vil indeholde den oprettede kalender:

 chart.draw (datatabel, optioner);

Når dette er færdigt, lad os se, hvordan vores kalender ser ud.

FORSTØRRE

Hvordan vi ser implementering af en publikationskalender er ekstremt enkelt på vores websted, nu er det kun op til hver person at udvide dets funktionalitet og gøre det mere dynamisk at tilpasse det til behovene på det websted, hvor det er inkluderet.

calendar_publicaciones.html 1,79K 134 Downloads