Calendario - Calendar pentru site-ul dvs.
Astăzi dorim să vă împărtășim conceptul unui calendar flexibil, personalizabil. Am creat un jQuery-plugin pentru calendar, și în acest articol, puteți vedea câteva exemple de modul în care se poate utiliza. Scopul creării plug-in a fost de a oferi cea mai bună locație în calendar ca ecranele mici și mari și păstrarea „plutitoare“ structura calendarului ori de câte ori este posibil.
Vă rugăm să rețineți că exemplele demo va funcționa numai în scopul prevăzut în browsere care acceptă noile caracteristici ale CSS3, utilizate aici, în primul rând calculat ().
Calendarul se bazează pe aceste două exemple frumoase găsite pe Dribbble:
- Ziua - cel mai frumos calendar app pentru iPhone de la Toby Negele
- Calendarul lui Tomas Gajar
Pentru plugin-ul, avem nevoie doar pentru a crea o clasă container "fc-calendar-container":
Plugin-ul poate fi invocată după cum urmează:
$ # 40; '#calendar' # 41;. Calendario # 40; # 41; ;
Apoi conectați creează marcaje din calendar, cu următoarea structură:
Calendarul va consta dintr-un capac pentru o listă de zile ale săptămânii și un recipient cu rânduri de zile ale lunii. Fiecare „celula“ va conține data și ziua săptămânii, și vom controla înălțimea liniei, stabilirea clasei necesare pentru containerul (patru, cinci sau șase rânduri). Stiluri pentru calendarul, implicit, sunt definite în calendar.css.
Rețineți că celula care conține conținutul / evenimentul va fi după cum urmează:
14
însura
De asemenea, rețineți că zilele săptămânii în fiecare celulă este ascunsă în mod implicit, pentru că avem o pălărie pe calendar cu zilele săptămânii. Cei care sunt afișate în celulă atunci când vom folosi interogări media, pentru a schimba aspectul calendarului față de verticală. Aici ne arată zilele săptămânii în fiecare celulă.
Este clar că calendarul poate / trebuie să fie prezentate sub forma unui tabel, dar din cauza unor diferențe în redarea de tabele între browsere (în special IE9), am decis să nu-l folosească. Desigur, puteți ajusta plugin-ul pentru a afișa tabel.
O parte importantă de a crea un „plutitor“ este liniile grilei de calendar și stiluri de celule:
Fc-patru rânduri .fc rând # 123;
înălțime. 25%;
# 125;
Fc-cinci rânduri .fc rând # 123;
înălțime. 20%;
# 125;
Fc-șase rânduri .fc rând # 123;
înălțime. 16,66%;
înălțime. -moz-calc # 40; 100% / 6 # 41; ;
înălțime. -webkit-calc # 40; 100% / 6 # 41; ;
înălțime. Calc # 40; 100% / 6 # 41; ;
# 125;
fc-calendar .fc-rând> div.
.fc-calendarul .fc-head> div # 123;
float. stânga;
înălțime. 100%;
lățime. 14,28%; / * 100% / 7 * /
lățime. -moz-calc # 40; 100% / 7 # 41; ;
lățime. -webkit-calc # 40; 100% / 7 # 41; ;
lățime. Calc # 40; 100% / 7 # 41; ;
poziție. relativă;
# 125;
Astfel, definim calendarul înălțime diferită în funcție de numărul de rânduri folosind calc (). vom stabili o lățime egală cu 100 împărțit la 7 la unități interne - calculat (100% / 7).
Următoarele (implicit) setări:
// inițializa calendarul pentru luna (1-12). În mod implicit cel curent.
luna. null.
// inițializa calendarul pentru anul. În mod implicit cel curent.
an. null.
// alege între valorile și options.weeks options.weekabbrs
displayWeekAbbr. fals.
// alege între valorile și options.months options.monthabbrs
displayMonthAbbr. fals.
// prima zi a săptămânii
// 0 - duminică, o - luni. 6 - sâmbătă
Startin. 1.
// apel invers funcție de care se numește atunci când faceți clic pe celula
// $ el - o celulă
// conținut $ - este conținut în celulă
// dateProperties - un obiect cu următorii parametri:
// zi. Numărul zilei,
// luna. numărul de luni, 1 la 12,
// MONTHNAME. Numele lunii din options.months,
// an. an
// timpul saptamanii. zi a săptămânii, 0 - 6,
// weekdayname. Numele de zi a săptămânii options.weeks
onDayClick. funcție # 40; $ El. $ Conținut. dateProperties # 41; # 123; return false; # 125;
Următoarele metode publice sunt de asemenea disponibile:
// se întoarce anul, care sunt în prezent de navigare
getYear # 40; # 41;
// returnează luna, care sunt în prezent de navigare (1-12)
getMonth # 40; # 41;
// returnează numele lunii, care sunt în prezent de navigare
getMonthName # 40; # 41;
// returnează conținutul „ziua“ a celulei
getCell # 40; zi # 41;
// stabilește datele din calendar. Combină conținutul de „caldata“ cu cele care sunt deja instalate (dacă există)
setData # 40; caldata # 41;
// Afișați un calendar pentru luna în curs și anul
// Luna 1-12
gotoNow # 40; apel invers # 41;
// Afișați un calendar pentru luna „luna“ și anul „anul“
// Luna 1-12
Goto # 40; luna. an. apel invers # 41;
// returnează luna precedentă pe calendar
gotoPreviousMonth # 40; apel invers # 41;
// returnează anul calendaristic precedent
gotoPreviousYear # 40; apel invers # 41;
// se întoarce în luna următoare în calendar
gotoNextMonth # 40; apel invers # 41;
// se întoarce anul următor, în calendarul
gotoNextYear # 40; apel invers # 41;
Puteți utiliza funcția SetData. pentru a adăuga conținut în calendar. Cum va arăta cum puteți vedea în exemplele demo.
stiluri de bază, așa cum sa menționat mai sus, sunt definite în fișierul calendar.css, dar în exemple, puteți vedea cum puteți schimba stiluri și adăugați-le la fișierul personalizat CSS.