✅ Vytvořte poštovní kalendář pomocí JavaScriptu

Obsah

Funkčnost kalendářů na jakékoli webové stránce je vždy zajímavým doplňkem, který můžeme mít od známých výběrčích dat až po kalendáře, které ukazují aktivitu uživatelů na našem webu.
Pro ty druhé můžeme použít mnoho API, která existují na internetu, a tímto způsobem implementovat publikační kalendář, který ukazuje aktivitu uživatelů na našem webu a můžeme to udělat pomocí Kalendář Google a jeho výkonné API.
Včetně API
Zahrnout API z Kalendář Google na naší stránce stačí zavolat totéž v záhlaví naší aplikace a musíme ji načíst metodou načtení následujícím způsobem:

 google.load ("vizualizace", "1.1", {balíčky: ["kalendář"]});

Jakmile to bude hotové, inicializujeme hlavní funkci, která bude mít sloupce našeho kalendáře, pomocí metody addColumn Y addRows budeme segmentovat podle let, které potřebujeme, děláme to metodou datum, která obdrží rok, měsíc a den, kde budeme navíc předávat aktivitu, která se v dané konkrétní datum uskutečnila:

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

Je důležité zmínit, že jako příklad používáme statické hodnoty, ale každý si je může přizpůsobit svým potřebám a generovat je prostřednictvím databázových dotazů nebo v nějakém rámci JavaScript generovat a JSON a proveďte injekci téhož, abyste to udělali dynamičtěji.
Možnosti kalendáře
Jakmile jsme inicializovali kalendář, stačí přidat požadované možnosti, tyto možnosti se vyprázdní ve formátu JSON pro snadnou manipulaci a čtení pomocí API. Můžeme definovat název kalendáře, výšku, barvu buněk a dokonce i to, jak chceme zobrazit dny v týdnu:

 var options = {title: "Post Calendar", výška: 350, kalendář: {cellColor: {stroke: '# 76a7fa', strokeOpacity: 0,5, strokeWidth: 1,}, dayOfWeekLabel: {fontName: 'Times-Roman', fontSize : 12, color: '# 1a8763', bold: true, italic: true,}, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS',}};

Nakonec metodou draw zobrazíme kalendář a do těla našeho HTML umístíme div, který bude obsahovat vytvořený kalendář:

 chart.draw (dataTable, možnosti);

Až to bude hotové, podívejme se, jak vypadá náš kalendář.

ZVĚTŠIT

Jak vidíme implementaci publikačního kalendáře, je na našich webových stránkách velmi jednoduché. Nyní je jen na každé osobě, jak rozšíří jeho funkce a učiní jej dynamičtějším, aby jej přizpůsobil potřebám webu, na kterém je zahrnut.

calendar_publicaciones.html 1,79 kB 134 stažení