Bullet in Head
MiSHAK: Děláme hovno!
Kalendář - finální
Konečně jsem se naučil alespoň jeden framework a to jQuery. Proč jQuery? Protože mají hezké logo
a v názvu tohoto frameworku není ani jedna tečka, což se nedá říci
třeba o script.aculo.us —
„tfuj“. Hlavně jsem díky jQuery zahodil můj
Ajax a pomocné funkce, takže kód zhubnul o 10kB, ale zase jsem
ho nafoukl jQuery (20kB), což vám určitě nebude vadit, pokud jQuery již
používáte…
Copak jsem vylepšil a přídal?
Kalendář jsem přepsal pro vícenásobné použití na jedné stránce, takže odteď si můžete užívat s více kalendáři než bude nezbytně nutné. Dále jsem přidal podporu pro minulé a předešlé měsíce resp. zobrazení dnů. Používám tuto volbu zapnutou na svém blogu, tak stočte bulvy napravo. Jako bonus lze zvolit, jestli se kliknutím na ně přejde na další resp. předchozí měsíc.
calendar.parentCtg = '#calendar';
calendar.showPrevNextMonthDays = true;
calendar.showPrevNextMonthDaysClickable = true;Od kdy pak to spolu táhneme, vzpomínáte si? Ano? Tak to se vám bude hodit
vlastnost begin – pokud ji určíte, kalendář za toto datum nepůjde, pokud
ho neurčíte nemohu ručit za to co se na vás uživatel dozví 
Co má za úkol vlastnost end netřeba popisovat, výchozí hodnotou je
dnešní měsíc a rok. Hlavně nezapomeňte, že měsíce se počítají od
nuly ne od jedné!
calendar.begin = {month: 3, year: 2006}; // jako tento blog
calendar.end = {month: 1, year: 2011}; // nepříjde snad v ten rok Ježíš spasit svět?Buď kosmopolita, vem kód, jdi do světa
Pokud jste odjinud, třeba budete potřebovat změnit jména měsíců, dnů nebo počátek týdne (0 je neděle, 1 pro pondělí) atd. K tomu vám poslouží vlastnosti months, days a dayStart. Dejme tomu že jste angličan.
this.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
// jména dní (od neděle)
this.days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
// první den
this.dayStart = 0; // začínají snad v neděli ne?Malovaný kalendáře
Trocha toho stylu nikomu neuškodí. Kalendář můžete nastylovat celkem jednoduše, díky několika třídám, které nastavuje jednotlivým dnům a ovládacím prvkům.
Třídy
- calendar
- kalendář
- today
- dnešní den resp. den nastavený vlastností date
- firstDayOfWeek, lastDayOfWeek
- první a poslední den v týdnu
- lastDayOfMonth, firstDayOfMonth
- první a poslední den v měsíci
- first7Days, last7Days
- prvních 7 a posledních 7 dní v týdnu
- prevmonth, nextmonth
- den předchozího a následujícího měsíce
- dayname
- jména dnů
- weekend
- sobota a neděle
- disabled
- znepřístupněný ovládácí prvek komentáře (předchozí/následující měsíc)
- calendarinfo
- kontejner s popisem vybraného dne
Elementy
- table
- kalendář
- caption
- nadpis kalendáře
- thead
- v hlavičce jsou umístěny ovládací prvky a jména dnů
- tbody
- zde jsou umístěny dny
- h2
- nadpis dne
- h3
- nadpis článku
- p
- perex článku
- td a
- odkaz na den
- h3 a
- odkaz na článek
- h2 a
- zavření informací o dni
Můj styl vypadá takto:
.calendar{
border: 0;
table-layout: fixed;
border-collapse: collapse;
color: #aaa;
}
.calendar td{
text-align: center;
vertical-align: middle;
}
.calendar td a{
display: block;
}
.calendar .today{
font-weight: bold;
color: #ccc;
}
.calendar .dayname{
font-style: italic;
color: #667;
}
.calendar .firstDayOfWeek, .calendar .firstDayOfMonth{
border-left: 1pt solid #555;
}
.calendar .first7Days{
border-top: 1pt solid #555;
}
.calendar .lastDayOfWeek, .calendar .lastDayOfMonth{
border-right: 1pt solid #555;
}
.calendar .last7Days{
border-bottom: 1pt solid #555;
}
.calendar .weekend{
border-color: #bbb;
color: #999;
}
.calendar .dayname.weekend{
color: #889;
}
.calendar .prevmonth, .calendar .nextmonth{
color: #666;
}
.calendarinfo h2{
font-size: 100%;
}
.calendarinfo h2 a{
color: #A44;
font-weight: bold;
display: block;
float:right;
}Tak a teďka to rozjedeme
Pokud si tedy budete chtít vytvořit funkční kalendářík, použijte PHP „plivátko“ z minulého článku a přidejte si následující kód do hlavičky stránky, hlavně si nezapomeňte správně nastavit cesty k filetám.
<script src="jquery.js" type="text/javascript" charset="UTF-8"></script>
<script src="calendar.js" type="text/javascript" charset="UTF-8"></script>Taky si do těla stránky přidejte kontejner pro kalendář, stačí prázdný div s id. Od té doby co kalendář používá jQuery lze místo id rodičovského prvku zadat i css selektor, pokud si nedáte pozor a zadáte obecnou cestu jako třeba div nebo .lr div aj. Kalendář se vloží na první z nalezených prvků.
A tento kousek vložte do nějakého skriptu, který vkládáte do stránky nebo na konec calendar.js, tak jak to mám já.
// Tak a teď si vytvoříme kalendář :)
var calendar = new Calendar();
$(document).ready(function(){
// Adresa k PHP skriptu
calendar.path = location.protocol +'//'+ location.host +'/calendar-flusher.php';
// Prvek kam příjde kalendář
calendar.parentCtg = '#calendar'; // Nezapomeňte na # před ID
calendar.showPrevNextMonthDays = true;
calendar.showPrevNextMonthDaysClickable = true;
calendar.init();
});Stahuj na konec
Pokud to někde nasadíte, tak mi dejte vědět. Tak a teď stahujte jQuery a hlavně kalendářík 8,7kB nebalený nebo kalendářík balený 4,8kB.