✅ Izveidojiet ziņu kalendāru, izmantojot JavaScript

Satura rādītājs

Kalendāru funkcionalitāte jebkurā tīmekļa lapā vienmēr ir interesants papildinājums, no slavenajiem datumu atlasītājiem līdz kalendāriem, kas parāda lietotāju aktivitātes mūsu vietnē.
Attiecībā uz pēdējo mēs varam izmantot daudzas internetā esošās API un šādā veidā ieviest publikāciju kalendāru, kas parāda lietotāju aktivitāti mūsu vietnē, un mēs to varam izdarīt ar Google kalendārs un tā jaudīgā API.
Ieskaitot API
Lai iekļautu API Google kalendārs mūsu lapā tas ir jāizsauc tikai mūsu lietojumprogrammas galvenē, un mums tas ir jāielādē ar ielādes metodi šādi:

 google.load ("vizualizācija", "1.1", {paketes: ["kalendārs"]});

Kad tas ir izdarīts, izmantojot šo metodi, mēs inicializējam galveno funkciju, kurai būs mūsu kalendāra slejas addColumn Y addRows mēs segmentēsim pēc gadiem, kas mums nepieciešami, mēs to darām ar metodi Datums, kas saņems gadu, mēnesi un dienu, kur mēs papildus nokārtosim darbību, kas notika konkrētajā datumā:

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

Ir svarīgi pieminēt, ka kā piemēru mēs izmantojam statiskās vērtības, taču ikviens var tās pielāgot savām vajadzībām un ģenerēt, izmantojot datu bāzes vaicājumus vai izmantojot kādu sistēmu JavaScript ģenerēt a JSON un veiciet to pašu injekciju, lai to izdarītu dinamiskāk.
Kalendāra iespējas
Kad esam inicializējuši kalendāru, mums tikai jāpievieno vēlamās opcijas, šīs opcijas tiek iztukšotas formātā JSON ērtākai apstrādei un lasīšanai, izmantojot API. Mēs varam definēt kalendāra nosaukumu, augstumu, šūnu krāsu un pat to, kā mēs vēlamies parādīt nedēļas dienas:

 var options = {title: "Publicēt kalendāru", augstums: 350, kalendārs: {cellColor: {stroke: '# 76a7fa', strokeOpacity: 0.5, strokeWidth: 1,}, dayOfWeekLabel: {fontName: 'Times-Roman', fontSize : 12, color: '# 1a8763', treknraksts: true, slīpraksts: true,}, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS',}};

Visbeidzot, izmantojot izlozes metodi, mēs parādām kalendāru un HTML kodā ievietojam div, kurā būs izveidotais kalendārs:

 chart.draw (dataTable, opcijas);

Kad tas ir pabeigts, redzēsim, kā izskatās mūsu kalendārs.

PALIELINĀT

Tas, kā mēs redzam publikāciju kalendāra ieviešanu, mūsu vietnē ir ārkārtīgi vienkāršs, tagad tikai katras personas ziņā ir paplašināt tā funkcionalitāti un padarīt to dinamiskāku, lai to pielāgotu tās vietnes vajadzībām, kurā tas ir iekļauts.

calendar_publicaciones.html 1,79 tūkst 134 lejupielādes