Creați calendarul postării cu JavaScript

Funcționalitatea calendarelor de pe orice pagină web este întotdeauna o adăugare interesantă, putem avea de la celebrele datepickers până la calendare care arată activitatea utilizatorilor pe site-ul nostru.
Pentru aceștia din urmă putem folosi multe dintre API-urile care există pe Internet și în acest fel implementăm un calendar de publicare care arată activitatea utilizatorilor pe site-ul nostru web și putem face acest lucru cu Google Calendar și API-ul său puternic.
Inclusiv API-ul
Pentru a include API-ul Google Calendar în pagina noastră trebuie să apelăm la fel în antetul aplicației noastre și trebuie să o încărcăm cu metoda de încărcare după cum urmează:

 google.load ("vizualizare", "1.1", {pachete: ["calendar"]});

Odată ce acest lucru este făcut, inițializăm funcția principală care va avea coloanele calendarului nostru, folosind metoda addColumn Da addRows vom segmenta după anii de care avem nevoie, facem acest lucru cu metoda Data, care va primi anul, luna și ziua, unde vom trece în plus activitatea care a avut loc la acea dată specifică:

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

Este important să menționăm că, de exemplu, folosim valori statice, dar toată lumea o poate adapta la nevoile sale și le poate genera prin interogări de baze de date sau cu un anumit cadru de JavaScript genera o JSON și faceți injecția la fel pentru a o face într-un mod mai dinamic.
Opțiuni calendar
Odată ce am inițializat calendarul, trebuie doar să adăugăm opțiunile dorite, aceste opțiuni sunt golite în format JSON pentru ușurința manipulării și citirii cu API. Putem defini titlul calendarului, înălțimea, culoarea celulelor și chiar modul în care dorim să afișăm zilele săptămânii:

 var options = {title: "Post Calendar", înălțime: 350, calendar: {cellColor: {stroke: '# 76a7fa', strokeOpacity: 0.5, strokeWidth: 1,}, dayOfWeekLabel: {fontName: 'Times-Roman', fontSize : 12, color: '# 1a8763', bold: true, italic: true,}, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS',}};

În cele din urmă, cu metoda de extragere, afișăm calendarul și în corpul HTML-ului nostru plasăm divul care va conține calendarul creat:

 chart.draw (dataTable, opțiuni);

Odată terminat, să vedem cum arată calendarul nostru.

MARI

Modul în care vedem implementarea unui calendar de publicații este extrem de simplu pe site-ul nostru, acum depinde doar de fiecare persoană să își extindă funcționalitatea și să o facă mai dinamică să o adapteze la nevoile site-ului web în care este inclus.

calendar_publicaciones.html 1,79K 134 Descărcări