✅ Maak een postkalender met JavaScript

Inhoudsopgave

De functionaliteit van de kalenders op elke webpagina is altijd een interessante toevoeging, van de beroemde datepickers tot kalenders die gebruikersactiviteit op onze website tonen.
Voor dit laatste kunnen we veel van de API's gebruiken die op internet bestaan en op deze manier een publicatiekalender implementeren die de activiteit van gebruikers binnen onze website toont en we kunnen dit doen met Google kalender en zijn krachtige API.
Inclusief de API
Om de API van . op te nemen Google kalender op onze pagina hoeven we alleen hetzelfde aan te roepen in de kop van onze applicatie, en we moeten het als volgt laden met de laadmethode:

 google.load ("visualisatie", "1.1", {pakketten: ["kalender"]});

Zodra dit is gebeurd, initialiseren we de hoofdfunctie die de kolommen van onze kalender zal hebben, met behulp van de methode toevoegenKolom Y rijen toevoegen we zullen segmenteren op de jaren die we nodig hebben, we doen dit met de methode Datum, die het jaar, de maand en de dag ontvangt, waar we bovendien de activiteit doorgeven die op die specifieke datum plaatsvond:

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

Het is belangrijk om te vermelden dat we als voorbeeld statische waarden gebruiken, maar iedereen kan het aanpassen aan hun behoeften en deze genereren via databasequery's of met een of ander raamwerk van JavaScript genereer een JSON en doe de injectie van hetzelfde om het op een meer dynamische manier te doen.
Agenda-opties
Nadat we de kalender hebben geïnitialiseerd, hoeven we alleen de gewenste opties toe te voegen, deze opties worden geleegd in het formaat JSON voor gebruiksgemak en lezen met de API. We kunnen de titel van de kalender definiëren, de hoogte, de kleur van de cellen en zelfs hoe we de dagen van de week willen weergeven:

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

Ten slotte geven we met de tekenmethode de kalender weer en in de body van onze HTML plaatsen we de div die de gemaakte kalender zal bevatten:

 chart.draw (dataTable, opties);

Nu dit klaar is, laten we eens kijken hoe onze kalender eruit ziet.

VERGROTEN

Hoe we een publicatiekalender zien implementeren op onze website is uiterst eenvoudig, nu is het alleen aan elke persoon om de functionaliteit uit te breiden en dynamischer te maken om deze aan te passen aan de behoeften van de website waarin deze is opgenomen.

calendar_publicaciones.html 1,79K€ 134 Downloads