Share
Există multe nevoi pentru un calendar pe orice site web. Problema cu multe programe de calendar este reutilizarea. Ele lucrează adesea numai cu un singur sistem de gestionare a conținutului (Content Management System - CMS). Când trebuie să vă mutați în altul, acestea nu funcționează.
Dacă vă creați propriul site cu fișiere statice sau propriul CMS, atunci de obicei trebuie să vă dezvoltați propriul calendar. Asta a fost dilema mea cu CPS goPress pe care am scris-o. Apoi am găsit Jalendar 2 pe CodeCanyon.
Primul lucru pe care trebuie să-l faceți este să cumpărați Jalendar 2 de la CodeCanyon.
Jalendar 2Odată ce ai Jalendar 2 zip fișier descărcat, despachetați-l în directorul dvs. de lucru. Fișierul zip ar trebui să conțină următoarele fișiere:
~ / D / R / r / J / codecanyon-12662442-jalendar-2-calendar-pack-event-gama-și-mai mult ➜ copac ... ├── 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 └── stil ├── jalendar.css ├── jalendar.css.map └── jalendar.less 2 directoare, 12 fișiere
Directorul principal are două dosare (js și stil) și fișiere HTML exemplu. js directorul conține JavaScript pentru programul Jalendar 2. Acesta conține, de asemenea, versiunea jQuery pe care o folosește.
Veți folosi jalendar.min.js în proiectul dvs. Aceasta oferă cel mai rapid timp de încărcare pentru site-ul dvs. web. Autorul spune că puteți folosi orice versiune de jQuery versiunea 1.11.3 sau mai nouă. Dar când am încercat jQuery 3.1.1, mi-am pierdut câteva funcționalități. Deci, folosesc doar copia jQuery care vine cu descărcarea.
Directorul de stil conține fișierele CSS pentru Jalendar 2. În directorul de stil există jalendar.less fişier. Acest fișier creează jalendar.css și jalendar.css.map fișier atunci când este prelucrat de mai puțin. Mai puțin este un preprocesor CSS pentru crearea mai ușoară a fișierelor CSS. Veți avea nevoie doar de utilizarea fișierelor mai puțin pentru a face schimbări majore în stilul calendarelor. Din moment ce puteți schimba culorile cu preferințe, modificarea fișierelor mai mici nu este necesară.
În directorul dvs. de lucru pentru acest proiect, creați js director. Apoi puneți o copie a textului jalendar.min.js si jQuery-1.11.3.min.js fișiere în el. Apoi creați css director și plasați jalendar.css fișier în el.
În partea de sus a directorului, creați un fișier numit Basic.html și plasați acest cod:
Jalendar 2 Demo
Aceasta este instalarea minimă pentru Jalendar 2. Este un boilerplate HTML simplu cu liniile necesare pentru a crea un calendar. Liniile 8 și 10 se încarcă în fișierele pentru Jalendar 2. Linia 9 se încarcă în jQuery. Linia 15 este codul HTML pentru div care va conține calendarul. id din div poate fi orice vrei tu. Clasa trebuie să aibă jalendar clasă. În caz contrar, nu obține stilul potrivit.
Linile 17 până la 19 conțin cel mai puțin cod JavaScript pentru a afișa un calendar. Utilizează jQuery pentru a localiza id-ul lui div și a executa jalendar () funcția pe ea.
Implicit Jalend CalendarCând încărcați acest fișier în browserul dvs., veți vedea un calendar într-o culoare albastră. Puteți utiliza săgețile din partea de sus pentru a vă deplasa la luna precedentă sau viitoare. Este un calendar frumos pentru orice site web!
Arată ușor și evenimentele din calendar. Creați o serie de evenimente divs în interiorul calendarului div. Formatul pentru un eveniment div este:
Acum reîncărcați pagina și veți vedea evenimentul.
Un eveniment adăugat la calendarul de bazăSelectarea zilei evenimentului va afișa textul pe care l-ați dat în partea de jos a calendarului. Puteți închide lista de evenimente cu Închide butonul din partea de jos.
Până în prezent, am folosit doar funcțiile de bază pentru Jalendar 2. Puteți personaliza cu 17 proprietăți diferite. Puteți vedea lista completă de pe site-ul Jalendar 2.
Primul lucru pe care trebuie să-l fac este să potrivesc calendarul site-ul meu. Site-ul meu utilizează o culoare cafeniu pentru tema de bază. Îmi place albastrul implicit, dar nu se potrivește destul. Schimbați codul de script la:
$ ( '# Calendar') jalendar (customDay:. '12 -23-2016' , culoare: '# f2ce95', COLOR2: '# f7edde', titleColor: "negru", weekColor: "negru", todayColor: " negru ", dataType:" mm-dd-yyyy ");
Acest cod stabilește o zi personalizată pentru a afișa utilizând customDay proprietate. Am stabilit ziua obișnuită, astfel încât atunci când o testați pe sistemul dvs. veți obține aceleași rezultate.
Colorarea este setată cu culoare și COLOR2 proprietăți. Proprietățile culorii au setat culoarea cea mai de sus. Cu COLOR2 set de proprietăți, creează un gradient neted de la culoarea de sus la culoarea de jos. titleColor, weekColor, și todayColor proprietățile fixează colorarea pentru titlu, numele săptămânilor și numărul de astăzi din calendar.
dateType formatul stabilește formatul de utilizat pentru datele evenimentului și pentru customDay proprietate.
Jalendar cu parametri personalizațiCu aceste setări, sunt aproape de aspectul pe care îl doresc. Dar îmi plac colțurile mai rotunjite. Nu există o proprietate pentru asta, dar pot vedea cum să-l ajuți folosind inspectorul.
Jalendar cu parametri personalizațiÎn inspectorul, pot optimiza setările CSS și dau seama ce trebuie să fie schimbat pentru a obține rezultatul vreau. .jalend .jalendar-container .jalendar-pagini Traseul CSS se ocupă de rotunjirea colțurilor. Când am setat border-radius proprietate 20px, Am aspectul care îmi place.
Jalendar cu parametri personalizațiAcest lucru devine aproape, dar există încă o problemă. Butonul de închidere de jos indică un ușor negru în colțurile inferioare. Inspectorul arată că stilul .jalend .jalendar-container .jalendar-pagini .add-event .close-button este responsabil. Deci, va trebui să adăugați cele două reguli de stil la codul HTML:
Este ușor să editați selectați proprietățile CSS în acest fel. Hacking codul sursă original CSS este uneori mai greu. De asemenea, vă permite să păstrați editările dvs. separate de ceea ce obțineți de la autor. Când actualizați o versiune mai nouă, puteți vedea modificările pe care le-ați făcut fără a le pierde.
Acum că am aspectul pe care îl vreau, îl pot adăuga pe site-ul meu. Descărcarea pentru acest tutorial are o copie a serverului meu goPress pe care îl folosesc cu tema site-ului meu. Consultați tutorialul serverului goPress despre cum să construiți serverul.
Am adăugat următorul cod la site-ul / piese / sidebar.html fişier:
Evenimente
Apoi va trebui să adăugați jalendar.css la site-ul / css director. jQuery-1.11.3.min.js si jalendar.min.js fișierele intră în site-ul / js director. Deoarece fișierele JavaScript sunt dependente de ordinea de încărcare, adăugați a 00- la fișierul jQuery și a 01- la fișierul Jalendar 2. Am stabilit lățimea pentru .jalendar div pentru a centra calendarul. jalendar.css fișierul a avut deja marjele pentru setarea calendarului auto. Problema este că browser-ul nu îl centrează decât dacă îi alocați lățimea.
Acum, trebuie să setați codul pentru procesarea setului de agendă din site-ul / js / 02-site.js fişier. Deschideți fișierul și adăugați acest cod:
jQuery (documentul) .ready (funcția () SyntaxHighlighter.all (); $ ( '# calendar') jalendar (customDay:. '12 -23-2016' , culoare: '# f2ce95', COLOR2: „# C7AB82 “, titleColor: "negru", weekColor: "negru", todayColor: "negru", dateType: "ll-zz-aaaa"););
SyntaxHighlighter.all () codul este pentru setarea oricăror evidențiere a codului pentru pagină. Restul este ceea ce am copiat din ultimul fișier de test care execută codul Jalendar 2 din ultima secțiune.
Site-ul de testare cu Jalendar 2Când rulați serverul goPress, ar trebui să vedeți pagina web de mai sus. Calendarul centrat este bara laterală cu tema potrivită corespunzătoare culorilor.
Uneori, veți avea nevoie de un selector de date în interiorul paginii dvs. web. Jalendar 2 funcționează și pentru acest lucru. În site-ul / main.html fișier, adăugați următoarele rânduri:
Testarea Jalendar 2
Picker de date
Apoi adăugați acest cod la site-ul / js / 02-site.js fişier:
$ ( '# DateInputCal') jalendar (tipul:. 'Selector', selectingBeforeToday: fals, selectingAfterToday: true, culoare: '# f2ce95', COLOR2: '# C7AB82', titleColor: "negru", weekColor: "negru" , astăziColor: "negru");
Acest cod este imediat după codul pentru inițializarea calendarului bara laterală. tip proprietatea este setată la selector pentru a crea un selector de date. selectingBeforeToday proprietatea este setată la falsă. Aceasta asigură că utilizatorul nu poate selecta o dată înainte de data curentă. selectingAfterToday proprietatea este setată la adevărat. Aceasta asigură că utilizatorul poate selecta date după data curentă.
Site-ul de testare cu Jalendar 2Selectorul de date rezultat seamănă cu cel din bara laterală. Există două diferențe principale. Se afișează data curentă, iar utilizatorul poate selecta numai datele după data curentă. Când selectați o dată, ea va fi plasată în caseta de text de deasupra calendarului.
Cu ajutorul instrumentelor potrivite, adăugarea de elemente la site-ul dvs. este ușoară. Calendarul Jalendar 2 este ușor de integrat cu orice site web și arată bine. Acum, trebuie să-l adăugați pe site-ul dvs. Există mai multe elemente pe CodeCanyon pe care le puteți adăuga și pe site-ul dvs..
Accentsconagua