✅ Skapa inläggskalender med JavaScript

Innehållsförteckning

Kalendrarnas funktionalitet på alla webbsidor är alltid ett intressant tillägg, vi kan ha från de kända datapickarna till kalendrar som visar användaraktivitet på vår webbplats.
För det senare kan vi använda många av de API: er som finns på Internet och på så sätt implementera en publikationskalender som visar användarnas aktivitet på vår webbplats och vi kan göra detta med Google Kalender och dess kraftfulla API.
Inklusive API: et
Att inkludera API för Google Kalender på vår sida behöver vi bara ringa samma i huvudet på vår applikation, och vi måste ladda det med laddningsmetoden enligt följande:

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

När detta är klart initierar vi huvudfunktionen som kommer att ha kolumnerna i vår kalender med hjälp av metoden addColumn Y addRows vi kommer att segmentera efter de år vi behöver, vi gör detta med metoden Datum, som kommer att få året, månaden och dagen, där vi dessutom kommer att klara aktiviteten som ägde rum på det specifika datumet:

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

Det är viktigt att nämna att vi som exempel använder statiska värden men alla kan anpassa det till sina behov och generera dessa genom databasfrågor eller med någon ram av JavaScript skapa en JSON och gör injektionen av samma för att göra det på ett mer dynamiskt sätt.
Kalenderalternativ
När vi har initierat kalendern behöver vi bara lägga till de alternativ vi vill ha, dessa alternativ töms i formatet JSON för enkel hantering och läsning med API: et. Vi kan definiera kalenderns titel, höjd, färg på cellerna och till och med hur vi vill visa veckodagarna:

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

Slutligen med dragmetoden visar vi kalendern och i vår HTML -kod placerar vi div som innehåller den skapade kalendern:

 chart.draw (dataTable, optioner);

När detta är klart, låt oss se hur vår kalender ser ut.

FÖRSTORA

Hur vi ser att implementera en publikationskalender är extremt enkelt på vår webbplats, nu är det bara upp till var och en att utöka sin funktionalitet och göra det mer dynamiskt att anpassa den till behoven på webbplatsen där den ingår.

calendar_publicaciones.html 1,79K 134 Nedladdningar