✅ Sukurkite įrašų kalendorių naudodami „JavaScript“

Turinys

Kalendorių funkcionalumas bet kuriame tinklalapyje visada yra įdomus priedas, nuo garsių datų rinkėjų iki kalendorių, rodančių naudotojų veiklą mūsų svetainėje.
Pastarosioms galime naudoti daugelį internete esančių API ir tokiu būdu įdiegti paskelbimo kalendorių, kuriame rodoma naudotojų veikla mūsų svetainėje, ir tai galime padaryti su „Google“ kalendorius ir galinga API.
Įskaitant API
Norėdami įtraukti API „Google“ kalendorius mūsų puslapyje mums tereikia tą patį pavadinti savo programos antraštėje, ir mes turime ją įkelti naudodami įkėlimo metodą:

 google.load ("vizualizacija", "1.1", {paketai: ["kalendorius"]});

Kai tai bus padaryta, inicijuosime pagrindinę funkciją, kuri turės mūsų kalendoriaus stulpelius, naudodami šį metodą addColumn Y addRows skirsime segmentus pagal mums reikalingus metus, tai darome su metodu Data, kuris gaus metus, mėnesį ir dieną, kur papildomai perduosime tą dieną vykusią veiklą:

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

Svarbu paminėti, kad kaip pavyzdį naudojame statines vertes, tačiau kiekvienas gali jas pritaikyti savo poreikiams ir generuoti jas naudodami duomenų bazės užklausas arba naudodami tam tikrą sistemą „JavaScript“ generuoti a JSONAS ir atlikite tą pačią injekciją, kad tai padarytumėte dinamiškiau.
Kalendoriaus parinktys
Kai inicijuojame kalendorių, mums tereikia pridėti norimų parinkčių, šios parinktys ištuštinamos tokiu formatu JSONAS kad būtų lengviau valdyti ir skaityti naudojant API. Galime apibrėžti kalendoriaus pavadinimą, aukštį, langelių spalvą ir net tai, kaip norime rodyti savaitės dienas:

 var options = {title: "Skelbti kalendorių", aukštis: 350, kalendorius: {cellColor: {stroke: '# 76a7fa', strokeOpacity: 0.5, strokeWidth: 1,}, dayOfWeekLabel: {fontName: 'Times-Roman', fontSize : 12, color: '# 1a8763', paryškintas: true, kursyvas: true,}, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS',}};

Galiausiai, naudodami piešimo metodą, mes rodome kalendorių ir į HTML tekstą įdedame skyrių, kuriame bus sukurtas kalendorius:

 chart.draw (dataTable, parinktys);

Kai tai bus baigta, pažiūrėkime, kaip atrodo mūsų kalendorius.

DIDELIS

Tai, kaip mes matome leidinių kalendoriaus įgyvendinimą, mūsų svetainėje yra labai paprasta, dabar tik kiekvienas žmogus turi išplėsti jo funkcionalumą ir padaryti jį dinamiškesnį, kad pritaikytų jį svetainės, į kurią jis įtrauktas, poreikiams.

calendar_publicaciones.html 1,79 tūkst 134 atsisiuntimai