Voeg een website-agenda toe met Jalendar 2

Er zijn veel behoeften aan een kalender op elke website. Het probleem met veel kalenderprogramma's is herbruikbaarheid. Ze werken vaak alleen met één Content Management System (CMS). Wanneer u naar een andere moet verhuizen, werken ze niet.

Als u uw eigen site maakt met statische bestanden of uw eigen CMS, dan moet u meestal uw eigen kalender ontwikkelen. Dat was mijn dilemma met de goPress CMS die ik schreef. Toen vond ik Jalendar 2 op CodeCanyon.

Downloaden en uitpakken

Het eerste dat u hoeft te doen is Jalendar 2 kopen bij CodeCanyon.

Jalendar 2

Zodra u de Jalendar 2 zip-bestand gedownload, pak het uit in je werkmap. Het zip-bestand zou deze bestanden moeten bevatten:

~ / D / R / r / J / codecanyon-12662442-jalendar-2-calendar-pack-event-range-and-more ➜ tree ... ├── jalendar-event-demo.html ├── jalendar-linker-demo .html ├── jalendar-range-demo.html ├── jalendar-selector-demo.html ├── js │ ├── jalendar.js │ ├── jalendar.min.js │ ├── jalendar.min. js.map │ └── jquery-1.11.3.min.js └── style ├── jalendar.css ├── jalendar.css.map └── jalendar.less 2 mappen, 12 bestanden

De bovenste map heeft twee mappen (js en stijl) en voorbeeld HTML-bestanden. De js map bevat JavaScript voor het Jalendar 2-programma. Het bevat ook de versie van jQuery die wordt gebruikt.

Je zult de gebruiken jalendar.min.js in je project. Dit geeft de snelste laadtijd voor uw website. De auteur zegt dat je elke versie van jQuery-versie 1.11.3 of nieuwer kunt gebruiken. Maar toen ik jQuery 3.1.1 probeerde, verloor ik wat functionaliteit. Dus ik gebruik alleen de kopie van jQuery die bij de download wordt geleverd.

De stijldirectory bevat de CSS-bestanden voor Jalendar 2. In de stijldirectory is er de jalendar.less het dossier. Dit bestand maakt de jalendar.css en jalendar.css.map bestand wanneer verwerkt door Minder. Less is een CSS-preprocessor voor het eenvoudiger maken van CSS-bestanden. U hoeft alleen de bestanden Minder te gebruiken om grote wijzigingen in de vormgeving van de kalenders aan te brengen. Aangezien u de kleuren kunt wijzigen met voorkeuren, hoeft u de Less-bestanden niet te wijzigen.

Basis kalender

Maak in de werkmap voor dit project de js directory. Plaats vervolgens een kopie van de jalendar.min.js en de jquery-1.11.3.min.js bestanden erin. Maak vervolgens de css map en plaats de jalendar.css bestand erin.

Maak bovenaan de map een bestand met de naam Basic.html en plaats deze code:

                                     Jalendar 2 Demo

Dit is de minimale installatie voor Jalendar 2. Het is een eenvoudige HTML-boilerplate met de regels die nodig zijn om een kalender te maken. Lijnen 8 en 10 laden in de bestanden voor Jalendar 2. Lijn 9 laadt in de jQuery. Regel 15 is de HTML voor de div die de kalender zal bevatten. De ID kaart van de div kan alles zijn wat je wilt. De klas moet de hebben jalendar klasse. Anders krijgt het niet de juiste styling.

Regel 17 tot en met 19 bevatten de minste JavaScript-code om een kalender weer te geven. Het gebruikt jQuery om de id van de div te lokaliseren en de id uit te voeren jalendar () functie erop.

Standaard Jalendar-kalender

Wanneer u dit bestand in uw browser laadt, ziet u een kalender in een mooie blauwe kleur. U kunt de pijlen bovenaan gebruiken om naar de vorige of volgende maand te gaan. Het is een mooie kalender voor elke website!

Gebeurtenissen toevoegen

Het weergeven van afspraken in de agenda is ook eenvoudig. Maak een serie evenementen divs in de kalender div. Het formaat voor een evenement div is:

De is een link naar de pagina op uw site of naar een andere site voor meer informatie over die gebeurtenis. De is de tekstdatum van het evenement. De standaard datumstructuur is dd-mm-yyyy. De </code> is de tekst onderaan de kalender wanneer de gebruiker de datum van de gebeurtenis selecteert. Voeg het volgende toe aan het HTML-bestand in de agenda's <code>div</code>:</p><pre><div data-date="25-12-2016" data-title="kerstdag"></div></pre><p>Herlaad de pagina nu en je zult de gebeurtenis zien.</p><img src="//accentsconagua.com/img/images_6/add-a-website-calendar-using-jalendar-2_3.jpg">Een gebeurtenis toegevoegd aan de basiskalender<p>Als u de dag van het evenement selecteert, wordt de tekst weergegeven die u aan de onderkant van de agenda hebt gegeven. U kunt de evenementenlijst sluiten met de <strong>Dichtbij</strong> knop onderaan.</p><h2>Jalendar 2 aanpassen</h2><p>Tot nu toe heb ik alleen de basisfuncties voor Jalendar 2 gebruikt. Je kunt deze aanpassen met 17 verschillende eigenschappen. Je kunt de volledige lijst op de Jalendar 2-website bekijken. </p><p>Het eerste wat ik moet doen is ervoor zorgen dat de kalender overeenkomt met mijn website. Mijn website gebruikt een bruine kleur voor het basisthema. Ik ben dol op het standaard blauw, maar het komt niet helemaal overeen. Verander de scriptcode in:</p><pre>$ ('# kalender'). jalendar (customDay: '12 -23-2016 ', kleur:' # f2ce95 ', color2:' # f7edde ', titleColor: "black", weekColor: "black", todayColor: " zwart ", dateType:" mm-dd-jjjj ");</pre><p>Met deze code wordt een aangepaste dag ingesteld voor weergave met behulp van de <code>customDay</code> eigendom. Ik stel de aangepaste dag zo in dat wanneer u het op uw systeem test, u dezelfde resultaten krijgt. </p><p>De inkleuring wordt ingesteld met de <code>kleur</code> en <code>color2</code> eigenschappen. De kleureigenschappen bepalen de bovenste kleur. Met de <code>color2</code> eigenschapsset, maakt het een vloeiend verloop van de bovenste kleur naar de onderste kleur. De <code>titleColor</code>, <code>weekColor</code>, en <code>todayColor</code> eigenschappen instellen de inkleuring voor de titel, weeknamen en het huidige nummer in de kalender. </p><p>De <code>dateType</code> format stelt het formaat in dat moet worden gebruikt voor de evenementendata en voor de <code>customDay</code> eigendom.</p><img src="//accentsconagua.com/img/images_6/add-a-website-calendar-using-jalendar-2_4.jpg">Jalendar met aangepaste parameters<p>Met deze instellingen sta ik dicht bij de look die ik wil. Maar ik hou van de hoeken meer afgerond. Daar is geen eigendom voor, maar ik kan zien hoe ik het kan aanpassen met de inspecteur.</p><img src="//accentsconagua.com/img/images_6/add-a-website-calendar-using-jalendar-2_5.jpg">Jalendar met aangepaste parameters<p>In de inspecteur kan ik de CSS-instelling aanpassen en erachter komen wat er moet worden gewijzigd om het gewenste resultaat te krijgen. De <code>.jalendar .jalendar-container .jalendar-pagina's</code> CSS-pad zorgt voor de afronding van de hoeken. Toen ik de <code>border-radius</code> woning aan <code>20px</code>, Ik krijg de look die ik leuk vind.</p><img src="//accentsconagua.com/img/images_6/add-a-website-calendar-using-jalendar-2_6.jpg">Jalendar met aangepaste parameters<p>Dit komt dichterbij, maar er is nog steeds een probleem. De onderste knop sluiten vertoont een kleine zwart op de onderste hoeken. De inspecteur laat zien dat de stijl <code>.jalendar .jalendar-container .jalendar-pages .add-event .close-button</code> is verantwoordelijk. U moet dus de twee stijlregels toevoegen aan de HTML:</p><pre><style> .jalendar .jalendar-container .jalendar-pages border-radius: 20px; .Jalendar .jalendar-container .jalendar-pages .add-event .close-button border-radius: 0 0 20px 20px; </style></pre><p>Het is gemakkelijk om op deze manier geselecteerde CSS-eigenschappen te bewerken. Het hacken van de originele CSS-broncode is soms moeilijker. Het maakt het ook mogelijk om uw bewerkingen gescheiden te houden van wat u van de auteur krijgt. Wanneer u een update uitvoert naar een nieuwere versie, kunt u zien welke bewerkingen u hebt aangebracht zonder ze te verliezen.</p><h2>De kalender toevoegen aan de goPress-website</h2><p>Nu ik de look heb die ik wil, kan ik deze toevoegen aan mijn website. De download voor deze tutorial heeft een kopie van mijn goPress Server die ik gebruik met het thema voor mijn website. Raadpleeg de tutorial van goPress Server over het bouwen van de server.</p><p>Ik heb de volgende code toegevoegd aan de <code>site / onderdelen / sidebar.html</code> het dossier:</p><pre><h2>Evenementen</h2> <div> <div> <div data-date="12-25-2016" data-title="kerstdag"></div> <div data-date="12-24-2016" data-title="kerstavond"></div> <div data-date="12-31-2016" data-title="Oudjaarsavond"></div> <div data-date="01-01-2017" data-title="Nieuwjaarsdag"></div> </div> </div> <style> .jalendar .jalendar-container .jalendar-pages border-radius: 20px; .Jalendar .jalendar-container .jalendar-pages .add-event .close-button border-radius: 0 0 20px 20px; .Jalendar width: 300px; </style> <hr></pre><p>Dan moet u het toevoegen <code>jalendar.css</code> naar de <code>site / css</code> directory. De <code>jquery-1.11.3.min.js</code> en de <code>jalendar.min.js</code> bestanden gaan in de <code>site / js</code> directory. Aangezien JavaScript-bestanden afhankelijk zijn van de laadvolgorde, voegt u a toe <code>00-</code> naar het jQuery-bestand en een <code>01-</code> naar het Jalendar 2-bestand. Ik heb de breedte ingesteld voor de <code>.jalendar</code> div om de kalender te centreren. De <code>jalendar.css</code> bestand had al de marges voor de kalender ingesteld op <code>auto</code>. Het probleem is dat de browser het niet centreert, tenzij je de breedte toewijst.</p><p>Nu moet u de code instellen voor het verwerken van de kalender die is ingesteld in de <code>site / js / 02-site.js</code> het dossier. Open dat bestand en voeg deze code toe:</p><pre>jQuery (document) .ready (function () SyntaxHighlighter.all (); $ ('# calendar'). jalendar (customDay: '12 -23-2016 ', color:' # f2ce95 ', color2:' # C7AB82 ', TitleColor: "black", weekColor: "black", todayColor: "black", dateType: "mm-dd-yyyy"););</pre><p>De <code>SyntaxHighlighter.all ()</code> code is voor het instellen van coderingmarkering voor de pagina. De rest is wat ik heb gekopieerd van het laatste testbestand met de Jalendar 2-code uit het laatste gedeelte.</p><img src="//accentsconagua.com/img/images_6/add-a-website-calendar-using-jalendar-2_7.jpg">De testwebsite met Jalendar 2<p>Wanneer u de goPress-server uitvoert, ziet u de bovenstaande webpagina. De gecentreerde kalender is de zijbalk met de juiste themakleuren.</p><h2>Een datumkiezer toevoegen</h2><p>Soms hebt u een datumkiezer nodig op uw webpagina. Jalendar 2 werkt ook uitstekend. In de <code>site / main.html</code> bestand, voeg deze regels toe:</p><pre><h3>Jalendar 2 testen</h3> <h4>Datumkiezer</h4> <div> <input type="text" readonly /> <div></div> </div></pre><p>Voeg vervolgens deze code toe aan de <code>site / js / 02-site.js</code> het dossier:</p><pre> $ ('# dateInputCal'). jalendar (type: 'selector', selecterenVóórToday: false, selecterenAfterToday: true, color: '# f2ce95', color2: '# C7AB82', titleColor: "black", weekColor: "black" , todayColor: "black");</pre><p>Deze code bevindt zich net achter de code voor het initialiseren van de zijbalkkalender. De <code>type</code> eigenschap is ingesteld op <code>keuzeschakelaar</code> om een datumselector te maken. De <code>selectingBeforeToday</code> eigenschap is ingesteld op false. Dit verzekert dat de gebruiker geen datum vóór de huidige datum kan selecteren. De <code>selectingAfterToday</code> eigenschap is ingesteld op true. Dit verzekert dat de gebruiker datums na de huidige datum kan selecteren.</p><img src="//accentsconagua.com/img/images_6/add-a-website-calendar-using-jalendar-2_8.jpg">De testwebsite met Jalendar 2<p>De resulterende datumkiezer lijkt precies op die in de zijbalk. Er zijn twee belangrijke verschillen. Het toont de huidige datum en de gebruiker kan alleen datums na de huidige datum selecteren. Wanneer u een datum selecteert, wordt deze in het tekstvak boven de kalender geplaatst.</p><h2>Conclusie</h2><p>Met de juiste hulpmiddelen is het eenvoudig om items toe te voegen aan uw website. De Jalendar 2-kalender is eenvoudig te integreren met elke website en ziet er goed uit. Nu moet je het toevoegen aan je website. Er zijn meer items op CodeCanyon die u ook aan uw site kunt toevoegen.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Code</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/add-an-automatic-featured-image-to-blog-posts-based-on-category.html">Voeg een automatisch 'Uitgelichte afbeelding' toe aan blogposts op basis van categorie</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_9/add-an-automatic-featured-image-to-blog-posts-based-on-category.png');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/cgi/add-a-vignette-with-ease-custom-effect.html">Voeg een vignet met gemak toe - aangepast effect</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_4/add-a-vignette-with-ease-custom-effect.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Zoeken..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>