✅ Izradite kalendar postova s JavaScriptom

Sadržaj

Funkcionalnost kalendara na bilo kojoj web stranici uvijek je zanimljiv dodatak, možemo imati od poznatih birača datuma do kalendara koji prikazuju aktivnosti korisnika na našoj web stranici.
Za potonje možemo koristiti mnoge API -je koji postoje na Internetu i na taj način implementirati kalendar objavljivanja koji prikazuje aktivnosti korisnika na našoj web stranici, a to možemo učiniti pomoću Google kalendar i njegov snažan API.
Uključujući API
Uključiti API za Google kalendar na našoj stranici samo moramo isto nazvati u zaglavlju naše aplikacije i moramo je učitati metodom učitavanja na sljedeći način:

 google.load ("vizualizacija", "1.1", {paketi: ["kalendar"]});

Nakon što to učinimo, inicijaliziramo glavnu funkciju koja će imati stupce našeg kalendara, koristeći metodu addColumn Y addRows segmentirat ćemo prema godinama koje su nam potrebne, to činimo metodom Datum, koji će dobiti godinu, mjesec i dan, gdje ćemo dodatno proći aktivnost koja se dogodila tog određenog datuma:

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

Važno je napomenuti da kao primjer koristimo statičke vrijednosti, ali svatko ih može prilagoditi svojim potrebama i generirati ih putem upita u bazi podataka ili s nekim okvirom JavaScript generirati a JSON i učinite injekciju iste kako biste to učinili na dinamičniji način.
Opcije kalendara
Nakon što smo inicijalizirali kalendar, samo moramo dodati željene opcije, te se opcije prazne u formatu JSON radi lakšeg rukovanja i čitanja pomoću API -ja. Možemo definirati naslov kalendara, visinu, boju ćelija pa čak i način na koji želimo prikazati dane u tjednu:

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

Konačno, metodom crtanja prikazujemo kalendar, a u tijelo HTML -a postavljamo div koji će sadržavati kreirani kalendar:

 chart.draw (dataTable, opcije);

Kad ovo završi, pogledajmo kako izgleda naš kalendar.

POVEĆAJTE

Način na koji vidimo implementaciju kalendara publikacija iznimno je jednostavan na našoj web stranici, sada je samo na svakoj osobi da proširi njezinu funkcionalnost i učini je dinamičnijom za prilagodbu potrebama web stranice na kojoj je ona uključena.

calendar_publicaciones.html 1,79K 134 preuzimanja