Статьи / Календарик на свой вкус

← к списку статей

08.09.10 (последнее изменение 28 октября 2010)

Календарик на свой вкус

Как прикрутить собствнный дизайн к jQuery UI datepicker

Понадобилось сделать кастомный календарь. Взял за основу jQuery UI datepicker и написал для него свои стили. Пару недостающих классов в таблицу календаря пришлось добавить с помощью яваскрипта — класс left левым ячейкам и nextMonth нижней строке. В результате вот такая красота.

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

HTML

CSS

<style type="text/css" charset="utf-8" media="screen">
	#page1ext div.calendar {position: relative;width: 300px;background: #212121 url(calendar.bgt.jpg) no-repeat left top;}
	#page1ext div.calendar div.ui-datepicker {padding: 1px;background: url(calendar.bgb.jpg) no-repeat left bottom;}
	#page1ext div.calendar div.ui-datepicker-header {position: absolute;top: 47px;height: 26px;width: 100%;}
	#page1ext div.calendar div.ui-datepicker-header a {position: absolute;top: 0;display: block;width: 26px;height: 26px;background-image: url(calendar.arr.png);cursor: pointer;}
	#page1ext div.calendar div.ui-datepicker-header a.ui-datepicker-prev {left: 58px;background-position: left top;}
	#page1ext div.calendar div.ui-datepicker-header a.ui-datepicker-next {right: 58px;background-position: left bottom;}
	#page1ext div.calendar div.ui-datepicker-header a span {display: none;}
	#page1ext div.calendar div.ui-datepicker-title {position: absolute;top: 0px;left: 84px;width: 132px;height: 26px;font: 13px/26px 'Arial', sans-serif;color: #fff;text-align: center;}
	#page1ext div.calendar table.ui-datepicker-calendar {margin: 81px 7px 7px 7px;width: 284px;}
	#page1ext div.calendar table.ui-datepicker-calendar th {color: #88c6ff;font: 15px/27px 'Arial', sans-serif;text-align: center;}
	#page1ext div.calendar table.ui-datepicker-calendar td {color: #909090;font: 17px/27px 'Arial', sans-serif;text-align: center;}
	#page1ext div.calendar table.ui-datepicker-calendar td.ui-datepicker-current-day {background: url(calendar.tda.png) no-repeat center;}
	#page1ext div.calendar table.ui-datepicker-calendar td a {color: #909090;text-decoration: none;}
	#page1ext div.calendar table.ui-datepicker-calendar td.ui-datepicker-current-day a {color: #fff;}
	#page1ext div.calendar table.ui-datepicker-calendar td.ui-datepicker-other-month * {color: #1e1e1e;}
	#page1ext div.calendar table.ui-datepicker-calendar tr.nextMonth td.ui-datepicker-other-month * {color: #000;}
	#page1ext div.calendar table.ui-datepicker-calendar tr th,
	#page1ext div.calendar table.ui-datepicker-calendar tr td {border-left: 1px solid #585858;}
	#page1ext div.calendar table.ui-datepicker-calendar th.left,
	#page1ext div.calendar table.ui-datepicker-calendar td.left {border-left: 1px solid transparent;}
</style>

JavaScript

← к списку статей