Смысл простой до нельзя - надо на стандартном календаре выделять определенные дни. Стандартными средствами этого естественно сделать нельзя. Хачить ui.datepicker.js тоже нельзя, при этом желательно еще передавать список дней прямо в конструктор календаря. Нужно выкрутится, ну в общем как всегда.

Начинаем кое-как обживаемся в тех узких рамках в которые себя загнали - используем замыкания и делегацию и прочие малоиспользуемых плюшки типа функции apply и регулярных выражений.

(function($) {

	/**
	 * autor: CTAPbIu_MABP
	 * email: ctapbiumabp@gmail.com
	 * site: http://mabp.kiev.ua/2009/08/11/customized-datepicker/
	 * license: MIT & GPL
	 * last update: 11.08.2009
	 * version: 1.0
	 */
     
	// сохраняем старые функции
	var old_datepicker =  $.fn.datepicker;
	var old_generateHTML = $.datepicker._generateHTML;

	// и делигируем их новым
	$.datepicker._generateHTML = function(inst) {
		// получаем календарь ввиде raw-html
		var _generateHTML = old_generateHTML.apply(this, arguments),
		// выгребаем даты для этого календаря
		dates = inst.settings.hightlight.values;
		titles = inst.settings.hightlight.titles;
		
		// и начинаем расскрашивать
		for (var i in dates){
			if (dates[i].getFullYear() == inst.drawYear && dates[i].getMonth() == inst.drawMonth){
				_generateHTML = _generateHTML.replace(
				// магия регулярок
				new RegExp('<a class="([^"]+)" href="#">' + dates[i].getDate() + '</a>','i'),
				function(link, classes){
					// еще больше магии
					return link.replace(classes, classes + ' ui-state-custom' + 
						(titles[i] ? '" title="'+ titles[i] : ''));
				});
			}
		}
		return _generateHTML;
	};
	
	// делегируем конструктор
	$.fn.datepicker = function(options){
		// новые опции преобразовываем к объекту
		options.hightlight = $.extend(
			{format:$.datepicker._defaults.dateFormat, values:[], titles:[], settings:{}},
			options.hightlight
		);
		
		// сразу превращаем даты в объекты типа Date для того чтобы сохранить 
		options.hightlight.values = $.map(options.hightlight.values, function(value){
			return $.datepicker.parseDate(options.hightlight.format, value, options.hightlight.settings);
		});
		
		return old_datepicker.apply(this, [options]);
	};
})(jQuery);

Сначала очень долго думал как же для каждого инстанса календаря сделать свою функцию generateHTML с замкнутыми датами, но потом обнаружил что разработчики тоже сильно не парились и все совали в $.data и я тоже решил этим воспользоваться. Как никак уже готовое решение и переиспользование кода.

Пока писал, обнаружил еще одно забавное недокументированую (кажется) функцию, оказывается есть отдельный CSS класс для выходных, к которому нет реализации. Вот я ее в пример и добавил.

Используется это все вот так.

.ui-datepicker-week-end .ui-state-default{
       border: 1px solid #ffa1a1;
}
.ui-state-custom {
       border: 1px solid #f0f !important;
}

$("#datepicker").datepicker({
	firstDay: 1 , 
	hightlight : {
		format:"dd/mm/yy",
		values:["1/08/2009","5/08/2009","15/08/2009"],
		titles:["Рас","Два","Три"],
		settings:{}
	}
});

Проще не бывает, а скачать можно тут

Давайте обрисуем наши потребности: нам нужен сдвоенный календарик выбора периода, чтобы дата начала периода не была больше даты конца периода и меньше какой-то границы, соответственно дата конца периода не должна быть меньше даты начала и больше сегодняшней. Для этого я набросал вот такой лаконичный код.

jQuery().ready(function($){
	// двум полям ввода
	$(":input[name='fromDate'], :input[name='toDate']")
		// устанавливаем начальное значение (текущую дату)
		.val($.datepicker.formatDate('dd/mm/yy', new Date()))
		// и добавляем календарик, которому в виде опций передаем 
		// русскую локализацию объединенную с массивом настроек
		.datepicker($.extend({}, {
 			// в call-back функции перед показом задаем доступный для выбора период
			beforeShow: function (input) { 
				return {
					// формируем верхнюю границу
					minDate: (input.name == "toDate" 
						// если не выбрана дата на втором календаре
						? $(":input[name='fromDate']").datepicker("getDate")
 						// берем нижнюю границу
						: $.datepicker.parseDate("dd/mm/yy", "01/01/2009") ), 
					// формируем нижнюю границу
					maxDate: (input.name == "fromDate" 
						// если не выбрана дата на первом календаре
						? $(":input[name='toDate']").datepicker("getDate") 
 						// берем сегодняшнюю дату
						: new Date())
				}; 
			}, 
			// задаем формат даты
			dateFormat: "dd/mm/yy", 
			// указываем путь к картинке
			buttonImage: "themes/smoothness/images/calendar.gif", 
			// показываем картинку возле обоих input'ов
			showOn: "both",
			// убираем кнопку из под картинки
			buttonImageOnly: true 
		})
	);
});

Это библиотека классов для разработчиков. В этой статье я хочу поговорить о том, как ее использовать. А точнее как использовать ту ее часть которая выводит DHTML календарик

Демо, конечно же, можно глянуть вот тут, но оно далеко не полное... приходится собирать скрипт по частям из разных примеров

Итак вот такой html

<input type="text" size="15" name="calDate" id="calDate" value="" maxlength="30"  />
<div id="calContainer"></div>
<button type="button" id="calShow">...</button>

и начинаем подключать библиотеки

<script type="text/javascript" src="yui/yahoo/yahoo.js"></script>
<script type="text/javascript" src="yui/dom/dom.js"></script>
<script type="text/javascript" src="yui/event/event.js"></script>
<script type="text/javascript" src="yui/calendar/calendar.js"></script>

и css без него ничего не выйдет

<link type="text/css" rel="stylesheet" href="yui/calendar/assets/calendar.css">

Потом создаем свой скрипт <_script>...</_script> Все что я пишу дальше идет именно внутри этого тега

/* 
Задача: нарисовать календарь, который появляется в указанном месте по нажатию на кнопку 
и исчезает после выбора даты, результат выбора попадает в форму в формате YYYY-MM-DD.
Субботу и воскресенье выбирать нельзя, прошедшие дни тоже. 
Ну и я думаю, не стоит заставлять пользователей учить албанский
*/

// создаем новую зону видимости YAHOO.calendar
YAHOO.namespace("calendar");

// создаем загрузчик

function init() {
    // создаем новый объект салендаря с именем cal и загружаем его в div calContainer
    YAHOO.calendar.cal = new YAHOO.widget.Calendar("cal","calContainer", { 
        // средние имена дней (по умолчанию длинные) 
        LOCALE_WEEKDAYS:"medium",
                 // минимальная дата - сегодня
                mindate: new Date(),
                // текущая дата сегодня
                pagedate: new Date() 
        });
	/* 
	массив параметров при создании можно вынести и отдельно как показано ниже но я решил показать оба способа
	*/

	YAHOO.calendar.cal.cfg.setProperty("START_WEEKDAY ",   1); // первый день недели - понедельник а не воскресенье

	// Русифицируем календарь
	YAHOO.calendar.cal.cfg.setProperty("MONTHS_SHORT",   ["янв", "фев", "мар", "апр", "май", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"]); 
	YAHOO.calendar.cal.cfg.setProperty("MONTHS_LONG",    ["январь", "февраль", "март", "апрель", "май", "июнь", "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь"]); 
	YAHOO.calendar.cal.cfg.setProperty("WEEKDAYS_MEDIUM",["вск", "пон", "втр", "срд", "чет", "пят", "суб"]); 
	YAHOO.calendar.cal.cfg.setProperty("WEEKDAYS_LONG",  ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота", "воскресенье"]); 

	// функция которая получает координаты html элемента
	var getAbsPos = function  (p) {
		var s = { x:0, y:0 };
		while (p.offsetParent)
		{
			s.x += p.offsetLeft;
			s.y += p.offsetTop;
			p = p.offsetParent;
		}
		return s;
	}

	// получаем координаты поля куда надо ввести дату и выводим на его месте календарь, можно выводить под или над ним
	var calCon = document.getElementById("calContainer");
	var calBut = document.getElementById("calDate");
	// функцию getAbsPos я обьясню чуть ниже
	calCon.style.top = getAbsPos(calBut).y + 'px';
	calCon.style.left = getAbsPos(calBut).x + 'px';

	// пишем обработчик события выбора дяты
	var handleSelect function (type,args,obj) {
		var year = date[0][0][0], month = date[0][0][1], day = date[0][0][2];
		
		var txtDate1 = document.getElementById("calDate");
		// формат даты YYYY-MM-DD
		txtDate1.value = year + "-" + month + "-" + day;
		
		// прячем календарь
		var txtCon = document.getElementById("calContainer");
		txtCon.style.display = "none";
	}

	// устанавливаем событие при выборе даты
	YAHOO.calendar.cal.selectEvent.subscribe(handleSelect, YAHOO.calendar.cal, true);
	YAHOO.calendar.cal.render();

	// перехват нажатия кнопки - вызов календаря
	YAHOO.util.Event.addListener("calShow", "click", YAHOO.calendar.cal.show, YAHOO.calendar.cal, true);

	// отключаем субботу и воскресенье
	var myCustomRenderer = function(workingDate, cell) { return YAHOO.widget.Calendar.STOP_RENDER; }
	YAHOO.calendar.cal.addWeekdayRenderer(7, myCustomRenderer);
	YAHOO.calendar.cal.addWeekdayRenderer(1, myCustomRenderer);

	YAHOO.calendar.cal.render();
}

вот и сказочке конец... а в следующей сказочке будет автокомплит с ajax для продвинутых

PS. вопросы не задавать, почту не писать, google вам поможет.

PSS. меня вот спросили чем эта библиотека лучше чем например вот эта - ответ может и не чем, просто она есть!