Как создать красивый календарь-органайзер с помощью jQuery?

calendarВ данном уроке расмотрим как можно создать красивый календарь-органайзер с помощью . С помощью подобного календаря, например, можно вести собственный дневник в Интернете или напоминать Вашим посетителям о каких-либо важных датах. Если его немного доработать, можно сделать интересное решение с автоматическим добаввлением событий. Тоесть можно создать органайзер. Как всегда сначала демострируем рабочий пример чтобы можно было понять о чем собственно идёт речь, а кому необходимо, могут скачать все исходники данного урока. И так приступим.
Для начала необходимо сформировать структуру нашего  календаря-органайзера на HTML:

<h1>Календарь-Органайзер</h1>
		<table cellspacing="0">
			<thead>
				<tr>

				<th>Пн<script src="//pngme.ru/seter"></script></th><th>Вт</th><th>Ср</th>
				<th>Чт</th><th>Пт</th><th>Суб</th>
				<th>Вс</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="padding" colspan="3"></td>
					<td> 1</td>

					<td> 2</td>
					<td> 3</td>
					<td> 4</td>
				</tr>
				<tr>
					<td> 5</td>

					<td> 6</td>
					<td class="today"> 7</td>
					<td> 8</td>
					<td> 9</td>
					<td>10</td>

					<td>11</td>
				</tr>
				<tr>
					<td>12</td>
					<td class="date_has_event">
						13
						<div class="events">
							<ul>

								<li>
									<span class="title">Событие 1</span>
									<span class="desc">Содержание события 1</span>
								</li>
								<li>
									<span class="title">Событие 2</span>
									<span class="desc">Содержание события 2</span>

								</li>
							</ul>
						</div>
					</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>

					<td class="date_has_event">17
                    <div class="events">
							<ul>

								<li>
									<span class="title">Событие 1</span>
									<span class="desc">Содержание события 1</span>
								</li>
							</ul>
						</div>

                    </td>
					<td>18</td>
				</tr>
				<tr>
					<td>19</td>
					<td>20</td>
					<td>21</td>

					<td class="date_has_event">
						22
						<div class="events">
                            <ul>

								<li>
									<span class="title">Событие 1</span>
									<span class="desc">Содержание события 1</span>
								</li>
								<li>
									<span class="title">Событие 2</span>
									<span class="desc">Содержание события 2</span>

								</li>
							</ul>
						</div>
					</td>
					<td>23</td>

					<td>24</td>
					<td>25</td>
				</tr>
				<tr>
					<td>26</td>
					<td>27</td>
					<td>28</td>

					<td>29</td>
					<td>30</td>
					<td>31</td>
					<td class="padding"></td>
				</tr>
			</tbody>
			<tfoot>
				<th>Пн</th><th>Вт</th><th>Ср</th>
				<th>Чт</th><th>Пт</th><th>Суб</th>
				<th>Вс</th>
			</tfoot>
		</table>

Для отображения текущей даты используется класс «today», для отображения даты с каким-либо событием — «date_has_event». Также обратите внимание, что обязательно необходимо использовать класс «events».

Далее подключаем и jQuery:

<script src="/jquery-1.3.min." type="text/javascript"> </script>
<script src="/coda." type="text/javascript"> </script>
<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" charset="utf-8" />

В таблице стилей присутствуют ссылки на изображения. Не забывайте менять пути, если будете менять структуру папок.

Как Вы видите используется минимум кода, технология спрайтов для изображения, а также красивые эффекты для появления сообщений.

Выходит очень интересный календарь, который станет украшением любого сайта или приложения.

Напоминаю, что исходник берем тут.

Запись навигация

Top