Aggiungi un calendario sito Web utilizzando Jalendar 2

Ci sono molte esigenze per un calendario su qualsiasi sito web. Il problema con molti programmi di calendario è la riusabilità. Spesso funzionano solo con un sistema di gestione dei contenuti (CMS). Quando hai bisogno di trasferirti in un altro, non funzionano.

Se stai creando il tuo sito con file statici o il tuo CMS, di solito devi sviluppare il tuo calendario. Questo è stato il mio dilemma con il CMS goPress che ho scritto. Poi ho trovato Jalendar 2 su CodeCanyon.

Download e disimballaggio

La prima cosa che devi fare è acquistare Jalendar 2 da CodeCanyon.

Jalendar 2

Una volta che hai il Jalendar 2 file zip scaricato, decomprimilo nella tua directory di lavoro. Il file zip dovrebbe contenere questi file:

~ / D / R / r / J / codecanyon-12662442-jalendar-2-calendar-pack-event-range-e-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 └── stile ├── jalendar.css ├── jalendar.css.map └── jalendar.less 2 directory, 12 file

La directory principale ha due cartelle (js e stile) e file HTML di esempio. Il js la directory contiene il codice JavaScript per il programma Jalendar 2. Contiene anche la versione di jQuery che usa.

Utilizzerai il jalendar.min.js nel tuo progetto. Questo dà il tempo di caricamento più veloce per il tuo sito web. L'autore afferma che è possibile utilizzare qualsiasi versione di jQuery versione 1.11.3 o successiva. Ma quando ho provato jQuery 3.1.1, ho perso alcune funzionalità. Quindi sto solo usando la copia di jQuery che viene fornita con il download.

La directory di stile contiene i file CSS per Jalendar 2. Nella directory di stile, c'è il file jalendar.less file. Questo file crea il jalendar.css e jalendar.css.map file elaborato da Less. Less è un preprocessore CSS per la creazione di file CSS più facilmente. Dovrai solo utilizzare i file Less per apportare importanti modifiche allo stile dei calendari. Poiché è possibile modificare i colori con le preferenze, la modifica dei file Less non è necessaria.

Calendario di base

Nella tua directory di lavoro per questo progetto, crea il js directory. Quindi posiziona una copia di jalendar.min.js e il jquery-1.11.3.min.js file in esso. Quindi creare il css directory e posizionare il jalendar.css file in esso.

Nella parte superiore della directory, crea un file chiamato Basic.html e inserisci questo codice:

                                     Jalendar 2 Demo

Questa è l'installazione minima per Jalendar 2. È una piastra HTML di base con le linee necessarie per creare un calendario. Le righe 8 e 10 vengono caricate nei file per Jalendar 2. I carichi della riga 9 in jQuery. La riga 15 è l'HTML per div che conterrà il calendario. Il id del div può essere tutto ciò che vuoi La classe deve avere il jalendar classe. In caso contrario, non ottiene lo stile corretto.

Le righe dalla 17 alla 19 contengono il codice JavaScript minimo per visualizzare un calendario. Usa jQuery per individuare l'id di div ed eseguire il jalendar () funzione su di esso.

Calendario Jalendar predefinito

Quando carichi questo file nel tuo browser, vedrai un calendario di un bel colore blu. Puoi utilizzare le frecce in alto per passare al mese precedente o successivo. È un calendario piacevole per qualsiasi sito web!

Aggiungere eventi

Anche mostrare eventi sul calendario è facile. Crea una serie di eventi divs all'interno del calendario div. Il formato per un evento div è:

Il è un collegamento alla pagina del tuo sito o di un altro sito, per dettagli su quell'evento. Il è la data del testo dell'evento. La struttura della data predefinita è dd-mm-aaaa. Il </code> è il testo mostrato nella parte inferiore del calendario quando l'utente seleziona la data dell'evento. Aggiungi quanto segue al file HTML all'interno del calendario <code>div</code>:</p><pre><div data-date="25-12-2016" data-title="giorno di Natale"></div></pre><p>Ora ricarica la pagina e vedrai l'evento.</p><img src="//accentsconagua.com/img/images_6/add-a-website-calendar-using-jalendar-2_3.jpg">Un evento aggiunto al calendario di base<p>Selezionando il giorno dell'evento verrà mostrato il testo che hai inserito nella parte inferiore del calendario. Puoi chiudere la lista degli eventi con il <strong>Vicino</strong> pulsante in basso.</p><h2>Personalizzazione di Jalendar 2</h2><p>Finora, ho utilizzato solo le funzionalità di base per Jalendar 2. È possibile personalizzarlo con 17 proprietà diverse. È possibile visualizzare l'elenco completo sul sito Web Jalendar 2. </p><p>La prima cosa che devo fare è far corrispondere il calendario al mio sito web. Il mio sito Web utilizza un colore marrone per il tema di base. Mi piace il blu di default, ma non corrisponde perfettamente. Cambia il codice dello script in:</p><pre>$ ('# calendar'). jalendar (customDay: '12 -23-2016 ', color:' # f2ce95 ', color2:' # f7edde ', titleColor: "black", weekColor: "black", todayColor: " nero ", dateType:" mm-dd-yyyy ");</pre><p>Questo codice imposta un giorno personalizzato da mostrare usando <code>customDay</code> proprietà. Sto impostando il giorno personalizzato in modo che quando lo provi sul tuo sistema otterrai gli stessi risultati. </p><p>La colorazione è impostata con il <code>colore</code> e <code>color2</code> proprietà. Le proprietà del colore impostano il colore più in alto. Con il <code>color2</code> insieme di proprietà, crea una sfumatura uniforme dal colore superiore al colore inferiore. Il <code>TitleColor</code>, <code>weekColor</code>, e <code>todayColor</code> le proprietà impostano la colorazione per il titolo, i nomi delle settimane e il numero di oggi nel calendario. </p><p>Il <code>DateType</code> formato imposta il formato da utilizzare per le date dell'evento e per il <code>customDay</code> proprietà.</p><img src="//accentsconagua.com/img/images_6/add-a-website-calendar-using-jalendar-2_4.jpg">Jalendar con parametri personalizzati<p>Con queste impostazioni, sono vicino all'aspetto che voglio. Ma mi piacciono gli angoli più arrotondati. Non c'è una proprietà per questo, ma posso vedere come modificarlo usando l'ispettore.</p><img src="//accentsconagua.com/img/images_6/add-a-website-calendar-using-jalendar-2_5.jpg">Jalendar con parametri personalizzati<p>Nell'ispettore, posso modificare l'impostazione CSS e capire cosa deve essere cambiato per ottenere il risultato che voglio. Il <code>.jalendar .jalendar-container .jalendar-pages</code> Il percorso CSS gestisce l'arrotondamento degli angoli. Quando ho impostato il <code>border-radius</code> proprietà <code>20px</code>, Ho l'aspetto che mi piace.</p><img src="//accentsconagua.com/img/images_6/add-a-website-calendar-using-jalendar-2_6.jpg">Jalendar con parametri personalizzati<p>Questo lo avvicina, ma c'è ancora un problema. Il pulsante di chiusura in basso mostra un leggero nero negli angoli inferiori. L'ispettore mostra che lo stile <code>.jalendar .jalendar-container .jalendar-pages .add-event .close-button</code> è responsabile. Quindi dovrai aggiungere le due regole di stile all'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>In questo modo è facile modificare le proprietà CSS selezionate. L'hacking del codice sorgente CSS originale è talvolta più difficile. Permette inoltre di mantenere le tue modifiche separate da ciò che ottieni dall'autore. Quando esegui l'aggiornamento a una versione più recente, puoi vedere quali modifiche hai apportato senza perderle.</p><h2>Aggiunta del calendario al sito Web goPress</h2><p>Ora che ho l'aspetto che voglio, posso aggiungerlo al mio sito web. Il download per questo tutorial ha una copia del mio server goPress che uso con il tema per il mio sito web. Fare riferimento al tutorial su goPress Server su come creare il server.</p><p>Ho aggiunto il seguente codice al <code>sito / parti / sidebar.html</code> file:</p><pre><h2>eventi</h2> <div> <div> <div data-date="12-25-2016" data-title="giorno di Natale"></div> <div data-date="12-24-2016" data-title="vigilia di Natale"></div> <div data-date="12-31-2016" data-title="Vigilia di Capodanno"></div> <div data-date="01-01-2017" data-title="Capodanno"></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>Quindi dovrai aggiungere il <code>jalendar.css</code> al <code>sito / css</code> directory. Il <code>jquery-1.11.3.min.js</code> e il <code>jalendar.min.js</code> i file vanno nel <code>sito / js</code> directory. Poiché i file JavaScript dipendono dall'ordine di caricamento, aggiungere a <code>00-</code> al file jQuery e a <code>01-</code> al file Jalendar 2. Ho impostato la larghezza per il <code>.jalendar</code> div per centrare il calendario. Il <code>jalendar.css</code> il file aveva già i margini per il calendario impostato su <code>auto</code>. Il problema è che il browser non lo centra a meno che non si assegni la larghezza.</p><p>Ora, è necessario impostare il codice per l'elaborazione del calendario impostato in <code>sito / js / 02-site.js</code> file. Apri quel file e aggiungi questo codice:</p><pre>jQuery (document) .ready (function () SyntaxHighlighter.all (); $ ('# calendar'). jalendar (customDay: '12 -23-2016 ', colore:' # f2ce95 ', color2:' # C7AB82 ', TitleColor: "black", weekColor: "black", todayColor: "black", dateType: "mm-dd-yyyy"););</pre><p>Il <code>SyntaxHighlighter.all ()</code> il codice serve per impostare l'evidenziazione del codice per la pagina. Il resto è ciò che ho copiato dall'ultimo file di test che esegue il codice Jalendar 2 dall'ultima sezione.</p><img src="//accentsconagua.com/img/images_6/add-a-website-calendar-using-jalendar-2_7.jpg">Il sito web di test con Jalendar 2<p>Quando esegui il server goPress, dovresti vedere la pagina web sopra. Il calendario centrato è la barra laterale con i colori appropriati per la corrispondenza dei temi.</p><h2>Aggiungere un selettore di date</h2><p>A volte, avrai bisogno di un selezionatore di date all'interno della tua pagina web. Jalendar 2 funziona perfettamente anche per questo. Nel <code>sito / main.html</code> file, aggiungi queste righe:</p><pre><h3>Test di Jalendar 2</h3> <h4>Date picker</h4> <div> <input type="text" readonly /> <div></div> </div></pre><p>Quindi aggiungere questo codice al <code>sito / js / 02-site.js</code> file:</p><pre> $ ('# dateInputCal'). jalendar (type: 'selector', selezionandoBeforeToday: false, selezionandoAfterToday: true, colour: '# f2ce95', color2: '# C7AB82', titleColor: "black", weekColor: "black" , todayColor: "black");</pre><p>Questo codice è subito dopo il codice per inizializzare il calendario della barra laterale. Il <code>genere</code> la proprietà è impostata su <code>selettore</code> per creare un selettore di data. Il <code>selectingBeforeToday</code> la proprietà è impostata su false. Ciò assicura che l'utente non possa selezionare una data prima della data corrente. Il <code>selectingAfterToday</code> la proprietà è impostata su true. Ciò assicura che l'utente possa selezionare le date successive alla data corrente.</p><img src="//accentsconagua.com/img/images_6/add-a-website-calendar-using-jalendar-2_8.jpg">Il sito web di test con Jalendar 2<p>Il raccoglitore della data risultante appare come quello nella barra laterale. Ci sono due differenze principali. Mostra la data corrente e l'utente può selezionare solo le date successive alla data corrente. Quando selezioni una data, questa viene posizionata nella casella di testo sopra il calendario.</p><h2>Conclusione</h2><p>Con gli strumenti giusti, aggiungere elementi al tuo sito web è facile. Il calendario di Jalendar 2 è facile da integrare con qualsiasi sito Web e ha un bell'aspetto. Ora devi aggiungerlo al tuo sito web. Ci sono altri elementi su CodeCanyon che puoi aggiungere al tuo sito.</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">Codice</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">Aggiungi una 'Immagine in primo piano' automatica ai post dei blog in base alla categoria</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">Aggiungi una vignetta con facilità - Effetto personalizzato</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="/">it.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da zero. </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="Ricerca..."> <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>