Cum să inserați un calendar într-o pagină html. Calendar HTML. Script de calendar PHP în stil rusesc
Ultima actualizare: 04/08/2016
Există mai multe tipuri de elemente de intrare pentru a lucra cu date și ore în HTML5:
datetime-local : Setează data și ora
data : stabilește data
luna : setează luna și anul curent
time : setează ora
săptămână : setează săptămâna curentă
De exemplu, folosim un câmp pentru a seta data:
Și când tastați în câmpul pentru dată, se va deschide un calendar:
Cu toate acestea, trebuie remarcat aici că efectul acestui element depinde de browser. În acest caz, se folosește Google Chrome. În cele mai recente versiuni ale Opera, elementul nu va fi mult diferit. Dar în Microsoft Edge elementul va arăta astfel:
Aplicarea altor elemente:
Atunci când utilizați aceste elemente, ar trebui să țineți cont de faptul că Firefox acceptă doar elemente de dată și oră; pentru restul, sunt create câmpuri de text obișnuite. Și IE11 nu acceptă deloc aceste elemente.
Astăzi vă prezentăm o selecție de plugin-uri care vă permit să creați cu ușurință calendare cu selecția datei, majoritatea fiind dezvoltate în jQuery și jQuery UI (interfață de utilizator).
Aproape toate aceste calendare sunt o platformă cu drepturi depline, cu o funcționalitate bună, dar unele vor trebui îmbunătățite și finalizate, dar uneori acesta este chiar un plus, deoarece în majoritatea cazurilor, într-un fel sau altul, trebuie să ajustați aspectul la designul site-ului.
Acest articol este despre cum puteți crea un calendar în stilul unei aplicații iPhone.
DatePicker permite utilizatorilor să selecteze data curentă dintr-un meniu derulant. Nu trebuie să vă faceți griji cu privire la formatele de date, deoarece acestea sunt întotdeauna corecte datorită formularului de selecție.
Calendar este o clasă javascript care vă permite să adăugați un selector de date accesibil și discret. Această clasă este un ansamblu de mai multe elemente care sunt adesea folosite de dezvoltatorii web și au fost deja complet reproiectate de echipa MooTools. Am încercat să includem toate proprietățile necesare, dar să păstrăm dimensiunea cât mai mică. Pentru a vedea clasa, consultați linkurile de mai jos.
Pluginul este un widget de calendar jQuery cu capacitatea de a afișa luna. Puteți alege ce lună doriți să afișați și implicit va afișa luna curentă. Pluginul își îndeplinește funcția perfect, în ciuda faptului că este format din doar 100 de linii de cod javascript.
O componentă de calendar care este foarte ușor de modificat și schimbat aspectul său.
Proprietăți:
* Creați orice număr de luni pe un calendar separat
* Posibilitatea de a afișa weekend-uri și sărbători
*Date de început și de sfârșit
* Schimbați aspectul folosind CSS
* Posibilitatea de a instala mai multe calendare pe o pagină simultan
* Optimizare pentru o performanță mai bună
Acest calendar pop-up flexibil și simplu este conceput pentru a funcționa în toate browserele. Îl puteți schimba și modifica complet în ceea ce privește limbile, date și culori. O fereastră pop-up afișează luna pe mai mulți ani.
De asemenea, puteți introduce opțional o dată și vi se va afișa luna dorită. Anul poate fi afișat în format de două sau patru cifre, iar luna poate fi afișată în numere sau după nume. De asemenea, puteți afișa orice dată sau zi folosind javascript.
Acest widget este perfect pentru combinarea tehnologiilor server-side pentru a dezvolta în continuare o aplicație profesională.
Puteți integra cu ușurință componenta DatePicker în aplicația dvs. web.
Proprietăți:
* Posibilitatea de a afișa împreună cu alte elemente de pe pagină
* Calendare multiple într-o singură componentă
* Abilitatea de a evidenția anumite date
* Abilitatea de a schimba aspectul folosind CSS
* Abilitatea de a localiza numele zilelor și lunilor
* Posibilitatea de a vă seta propria zi de început a săptămânii
* Posibilitate de integrare în fereastra browserului
Calendar System este un calendar simplu.
Calendarul Tigra este un element javascript pentru mai multe browsere, care oferă posibilitatea de a selecta datele din meniurile derulante prin intermediul formularelor HTML.
Aplicația One Plans va putea accepta mai multe calendare. De asemenea, este posibil să afișați informații în diferite calendare între ele. Fiecare calendar este gestionat separat (parolă unică, setări separate, aspect diferit).
Mai multe calendare care rulează într-o singură aplicație Plans pot fi utilizate pe diferite site-uri web. Aplicația folosește un model de evenimente recurente foarte flexibil.
Aplicația acceptă mai multe limbi. Puteți seta manual ziua de început a săptămânii. Datele pot fi afișate în format de abreviere (ll/zz/aa, zz/ll/aa și așa mai departe). Aplicația poate folosi date din fișiere individuale sau dintr-o bază de date.
jQuery UI Datepicker este un plugin extrem de personalizabil care vă permite să adăugați formulare de selectare a datelor în paginile dvs. web. De asemenea, puteți edita aspectul și limba pluginului, puteți specifica anumite perioade de timp și puteți adăuga cu ușurință butoane de navigare suplimentare.
În mod implicit, calendarul este afișat ca o mică suprapunere prin onfocus și este închis automat cu un efect de neclaritate sau după ce data a fost deja selectată. Puteți încorpora cu ușurință un calendar în pagina dvs. web folosind un div sau un interval.
Vă puteți gestiona calendarul utilizând taste rapide:
* pagina sus/jos – luna anterioară/următoare
* ctrl+pagina sus/jos – – anul precedent/următorul
* ctrl+home – luna curentă sau deschide calendarul dacă este închis
* ctrl+stânga/dreapta – – ziua anterioară/următoare
* ctrl+sus/jos – – săptămâna anterioară/următoare
* introduceți – confirmați data selectată
* ctrl+end – închide fără a salva data
* evadare – pur și simplu închideți calendarul
Acest element vă permite să selectați o dată folosind un panou glisor simplu. Tragând glisorul de-a lungul cronologiei, puteți schimba imediat data. Mai mult, atunci când utilizatorul dorește să afișeze alte date, glisoarele revin automat la pozițiile inițiale.
FullCalendar este un plugin jQuery care vă permite să creați calendare la scară completă, cu drag-and-drop. Pluginul folosește AJAX și îl puteți formata cu ușurință în formatul dorit (există și un add-on special pentru Google Calendar).
Pluginul oferă posibilitatea de a selecta și trage evenimente după dată.
* control total prin tastatură
* suport pentru diferite formate de afișare și separatoare
* discret
* posibilitate de proiectare folosind css
* capacitatea de a afișa anumite zile ale săptămânii
* opțiune flexibilă de localizare
* capacitatea de a evidenția anumite zile ale săptămânii
* distribuție gratuită (sub acordul de licență CC)
Proprietăți:
* funcționează cu unul sau mai multe elemente de introducere a textului input type="text"
* capacitatea de a evidenția anumite date
* se închide automat după selectarea unei date (precum și atunci când apăsați data de astăzi sau butoanele de închidere)
* posibilitate de tranziții rapide folosind câmpul „select”.
* ascunde automat butoanele dacă nu există altundeva unde să derulați
Și, de asemenea, multe altele...
Această componentă este un simplu formular de selectare a datei și un calendar.
Proprietăți:
* capacitatea de a adăuga limbi
* capacitatea de a schimba data curentă
* capacitatea de a derula cu rotița mouse-ului
* prezenta butoanelor
Timeframe este o componentă gratuită testată care rulează pe Github. Este posibil să specificați data „de la” și „până la”.
Date/Time Picker este o componentă simplă a selectorului de dată sau oră. Pentru a deschide calendarul, faceți clic pe pictograma din partea dreaptă a câmpului de introducere.
Un alt exemplu de componentă simplă a selectorului de date. Calendarul are trei poziții obligatorii: , și .
Pluginul transformă selectorul de date jQuery UI într-o componentă interactivă care este concepută special pentru selectarea unei game de date. Aceasta este o actualizare.
|
jMonthCalendar este un calendar complet cu suport pentru evenimente. Puteți seta pur și simplu opțiuni și evenimente și va face restul pentru dvs. Plugin-ul are capacitatea de a fi modificat, ceea ce va permite dezvoltatorului să interacționeze cu calendarul, când să afișeze schimbarea lunilor și, de asemenea, să editeze evenimentul când dă clic pe fereastra de notificare. jMonthCalendar acceptă acum, de asemenea, evenimente de tip hover, precum și parametrul de declanșare alert(); Conform standardului, fiecare eveniment are un URL care duce la o pagină cu informații detaliate.
VCalendar (Virtual Web Calendar) este o aplicație gratuită de calendar web pentru crearea și gestionarea evenimentelor online, sub formă de calendar, desigur. Această soluție excelentă și gratuită poate fi folosită pentru comunitățile web și pentru orice organizație comercială sau non-profit. Spre deosebire de alte calendare online, VCalendar este distribuit cu cod sursă în diferite limbaje de programare: PHP, ASP și ASP.NET (C#). Acest lucru se face cu scopul de a adăuga noi tehnologii în viitor.
Unul dintre elementele importante de pe site este calendarul, cu ajutorul căruia utilizatorii dvs. pot urmări evenimentele și lansările de noi produse. Sau citiți doar notele sau orice altceva vă puteți gândi. După ce ai petrecut ceva timp în această lecție, vei învăța cum să creezi un script de calendar PHP pentru site-ul tău. Nu ne vom limita doar la programare; vom acorda atenție și structurii CSS și html a calendarului. Într-un cuvânt, vom face totul, de la început până la sfârșit!
CSS
Vorbește mai puțin, lucrează mai mult. Să începem imediat cu stilurile CSS ale calendarului. Codul de mai jos este compatibil cu browserul problematic IE6.
/* calendar */ table.calendar ( border-left:1px solid #999; ) tr.calendar-row ( ) td.calendar-day ( min-height:80px; font-size:11px; position:relative; ) * html div.calendar-day (înălțime:80px; ) td.calendar-day:hover ( background:#eceff5; ) td.calendar-day-np ( background:#eee; min-height:80px; ) * html div. calendar-day-np ( înălțime:80px; ) td.calendar-day-head ( background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; ) div.day-number ( fundal:#999; padding:5px; color:#fff; font-weight:bold; float: dreapta; margine:-5px -5px 0 0; lățime:20px; text-align:center; ) td.calendar-day, td.calendar-day-np ( lățime:120px; padding:5px; chenar-bottom:1px solid #999; chenar-dreapta:1px solid #999; )
PHP
Întregul cod de script de calendar PHP se bazează practic pe o singură funcție care necesită doi parametri: luna și anul dorit. De remarcat că la mijlocul funcției am lăsat spațiu pentru baza de date. Dacă doriți, puteți afișa evenimentele necesare în grila calendarului. Când am scris acest script, am folosit tabele în loc de blocuri div, deoarece sunt mai practice în cazul în care o zi este plină de evenimente.
S-a luat ca bază scriptul calendaristic în limba engleză, așa că voi oferi două versiuni: un calendar în stil englez și rus. Alege care iti place! Singura diferență este în codul PHP. Stilurile CSS rămân aceleași pentru ambele opțiuni.
Script de calendar PHP în stil rusesc
| ".implozie(" | ",$titluri)." |
| <= $days_in_month; $list_day++): $calendar.= " | ".$list_day." |
iunie 2012
Rezultat
Script de calendar PHP în stil englezesc
Practic, nu știu de ce ai nevoie. Dar, dintr-o dată, cineva are nevoie doar de acesta. Codul este aproape același.
/* Funcția de generare a calendarului */ funcția draw_calendar($lună,$an)( /* Începutul tabelului */ $calendar = "
| ".implozie(" | ",$titluri)." |
| "; $days_in_this_week++; endfor; /* am ajuns la numere, le vom scrie pe prima linie */ for($list_day = 1; $list_day<= $days_in_month; $list_day++): $calendar.= " | "; /* Scrieți numărul în celulă */ $calendar.= " ".$list_day." "; /** AICI PUTEȚI FACE O INTEROGARE MySQL BAZEI DE DATE! DACĂ ESTE GĂSITĂ O POTRIVIRE A DATEI EVENIMENTULUI CU DATA CURENTĂ - IEȘIRE! **/ $calendar.= str_repeat("",2); $calendar. = " | "; dacă($zi_alergătoare == 6): $calendar.= "
| "; endfor; endif; /* Închide ultima linie */ $calendar.= " |
iunie 2012
"; echo draw_calendar(6,2012);Rezultat
Asta e tot! Sper că acest script de calendar PHP v-a fost util. Nu vă lăsați limitat de acest cod, faceți ajustări și extindeți scriptul. Oricine plănuiește să folosească scriptul sau l-a folosit deja, vă rugăm să vă dezabonați în comentarii și să lăsați un link către pagina cu exemplul.
Design calendar
În cursurile noastre JavaScript, atingem uneori subiectul construirii unui calendar HTML. Este destul de rapid să programați cadrul calendaristic, dar nu vreau să pierd timpul cu proiectarea lui cu stiluri CSS, așa că s-a decis să scriem aceste stiluri în avans într-o postare separată de blog pentru o aplicare rapidă ulterioară. Să avem un calendar pentru iulie 2084, prezentat în HTML (fiddle). Vom discuta legătura dintre JavaScript și calendar într-una dintre postările noastre viitoare; deocamdată vom reține doar că, în practică, nimeni nu va putea completa manual un astfel de calendar (numele lunii în legenda HTML). element, zilele săptămânii în th, zilele lunii în td) fără programare.
Stiluri HTML și CSS pentru calendar
Să adăugăm reguli pentru colorarea zilelor lunii (cu proprietatea background:linear-gradient(...)), clase pentru weekend și ziua curentă a lunii. Pentru a vedea cum funcționează clasele .holyday și .today, trebuie să scrieți valorile lor în celulele corespunzătoare din tabel. Dacă vorbim doar de weekendurile de sâmbătă-duminică, atunci poți să faci fără cursuri folosind selectoare nth-child(...).
Calendar( chenar: 1 px solid #bbb; afișare: bloc inline ) .calendar tabel (celule goale: ascunde; ) .calendar caption( umplutură: 3px; fundal: liniar-gradient (în jos, #ddd 10%, #bbb) ); ) .calendar td( padding: 2px 6px; text-align: center; border:1px solid #ccc; background: linear-gradient (în jos, #fff 10%, #ddd); border-radius:0 0 3px ) .calendar td:hover(border:1px solid #888; ) .calendar .holiday( fundal: liniar-gradient (în jos, #fff 10%, #ffc); ) .calendar .today( font-weight:600; chenar:1px solid #888; )
Denumirea zilelor săptămânii („Luni”, „Marți”, „Miercuri”, „Joi”, „Vineri”, „Sâmbătă”, „Dumiri”), luni („Ianuarie”, „Februarie”, „Martie”, „Aprilie”, „Mai”, „Iunie”, „Iulie”, „August”, „Septembrie”, „Octombrie”, „Noiembrie”, „Decembrie”) pot fi găsite pe site-ul de localizare a widget-ului jQuery Datepicker (https:/ /github.com/ jquery/jquery-ui/blob/master/ui/i18n/datepicker-ru.js), adică. un calendar gata făcut folosind JavaScript și bibliotecile jQuery și jQuery UI (mai multe despre
În ajunul noului an, a apărut o sarcină foarte banală - crearea unui site de calendar, unde pentru fiecare lună era necesar să se afișeze propriul calendar pentru lună. Prima etapă de rezolvare a problemei a fost căutarea unor soluții gata făcute. După ce am căutat printre o duzină de soluții listate pe Internet, alegerea a fost făcută. Unele versiuni s-au dovedit a fi complet nefuncționale, altele prea greoaie - ar fi trebuit să fie reduse destul de mult pentru a obține rezultatul dorit. Deci, să ne uităm la cum să scrieți un calendar simplu în PHP.
Baza scriptului a fost găsită pe Internet, erorile au fost corectate, unele lucruri au fost finalizate, în special, a fost adăugată funcționalitatea de evidențiere a weekendurilor cu o clasă CSS separată.
Implementarea unui calendar lunar în PHP pur fără utilizarea mySQL, jQuery etc. este dat mai jos:
"; // afișează zilele săptămânii $headings = array("Luni","Tue","Mier","Joi","Fri","Sat","Sun"); $calendar.= "
Funcția draw_calendar primește numărul de serie al lunii și anului ca intrare. Rezultatul executării funcției este codul html al calendarului pentru luna dată. Utilizarea caracteristicii de mai sus este ușoară și chiar și un începător în dezvoltarea web o poate face. Exemplul de mai jos va afișa un calendar pentru ianuarie 2016.
Ieșirea legendei calendarului, care include numele lunii și anului, nu a fost inclusă în mod deliberat în funcție, astfel încât să poată fi schimbată liber și, eventual, eliminată cu totul.
Calendar PHP pentru un an
Din funcția de mai sus puteți obține cu ușurință un script de calendar PHP pentru un an și pentru orice an. Pentru a face acest lucru, este suficient să parcurgeți toate lunile și pentru fiecare dintre ele apelați funcția de afișare a unui calendar pentru luna.
Cu toate acestea, acest lucru va necesita crearea unei matrice cu o listă de nume de luni în rusă, deoarece puteți obține numai nume de luni din PHP în engleză.
Codul în acest caz va fi următorul:
"Ianuarie", 1 => "Februarie", 2 => "Martie", 3 => "Aprilie", 4 => "Mai", 5 => "Iunie", 6 => "Iulie", 7 => " August", 8 => "Septembrie", 9 => "Octombrie", 10 => "Noiembrie", 11 => "Decembrie"); pentru ($lună = 1; $lună<= 12; $month++) { ?>
Puteți descărca exemplele date în această postare din Github.