A jQuery UI egy nagyon hasznos kis eszköz, de a megfelelő ismeretek birtokában a címben található feladat megoldása sem tűnne triviálisnak. A datepicker eseményei eléggé hiányosak. Van mindenféle before esemény, de nincs after. Nincs semmilyen eseményünk azután hogy a naptár kiírásra kerül. Így például a naptár táblázatának egy sorát nem tudjuk ellátni utólag semmilyen külön css osztállyal. Nos, ha a teljes sort nem is, de a sor elemeit (td) már képesek vagyunk szerkeszteni a “beforeShowDay” eseménnyel.

A “beforeShowDay” minden egyes nap megjelenítése esetén meghívásra kerül. Paraméterben megkapjuk az aktuális nap dátumát és vissza kell adnunk egy tömböt. A tömb első eleme egy boolean változó, ez határozza meg, hogy az aktuális nap kiválasztható-e. A mi esetünkben ez mindig “1”, hiszen nem akarjuk megakadályozni a kiválasztást. A tömb második eleme már érdekesebb, adhatunk egy egyedi classt az elemnek. Ezt fel tudjuk használni arra, hogy megkülönböztessük a kiválasztott napokat. Még létezik egy harmadik paraméter, ami a link title-je lenne, de erre sem lesz most szükségünk.

Először is szükségünk lesz az alap keretrendszerre
[html]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/1.8.15/themes/base/jquery-ui.css">
[/html]

És egy külön css osztályra
[css]
<style>
.has_event a{
color:#bb0000 !important;
font-weight:bold !important;
background:#cccccc !important;
}
</style>
[/css]

Először is jöjjön a HTML. Lesz egy doboz, amiben a naptárunk egy inline elem lesz.
[html]
<div id="date"></div>
<input id="targetStart" type="text"/>
<input id="targetEnd" type="text"/>
[/html]

A gyári datepickert is jelenítsük meg (inline)
[javascript]
$(function() {
$("#date").datepicker({
showWeek: true,
numberOfMonths: 3,
firstDay: 1,
})
});
[/javascript]

És hát íme a beforeshow esemény. Előtte néhány dátumkezelő függvény elkészítésre is szükség volt.
A végén még beállítunk egy alapértelmezett értéket.
[javascript]
Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(),0,1);
return Math.ceil((((this – onejan) / 86400000) + onejan.getDay())/7);
}
Date.prototype.getWeekMonday = function() {
var res = new Date();
(this.getDay() == 0) ? res.setTime(this.getTime() – (6 * 86400000)) : res.setTime(this.getTime() + 86400000 – (this.getDay() * 86400000));
return res;
}
$(function() {
$( "#date" ).datepicker("option", "beforeShowDay", function(date) {
var selectedWeek = $("#date").datepicker("getDate").getWeek();
var thisWeek = date.getWeek();
if (selectedWeek == thisWeek)
{
jQuery(‘#targetStart’).val($.datepicker.formatDate(‘yy-mm-dd’, date.getWeekMonday()))
jQuery(‘#targetEnd’).val($.datepicker.formatDate(‘yy-mm-dd’, date))
return [1,’has_event’];
}
return [1]
})
$("#date").datepicker("setDate", new Date(2011,7,23) );
});
[/javascript]

Itt tekinthető meg a mű