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

<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">

És egy külön css osztályra

<style>
	.has_event a{
		color:#bb0000 !important;
		font-weight:bold !important;
		background:#cccccc !important;
	}
</style>

Először is jöjjön a HTML. Lesz egy doboz, amiben a naptárunk egy inline elem lesz.

  <div id="date"></div>
  <input id="targetStart" type="text"/>
  <input id="targetEnd" type="text"/>

A gyári datepickert is jelenítsük meg (inline)

$(function() {
	$("#date").datepicker({
			showWeek: true,
			numberOfMonths: 3,
			firstDay: 1,
	})
});

É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.

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) );
});

Itt tekinthető meg a mű