Создание красивого календаря на CSS и jQuery

Сегодняшний урок будет посвящен созданию красивого календаря в стиле iPhone.

С помощью подобного календаря, например, можно вести собственный дневник в Интернете или напоминать Вашим посетителям о каких-либо важных датах. Если его немного доработать, можно сделать интересное решение с автоматическим добавлением событий.

demosourse

Первым делом формируем структуру календаря на HTML:

<table cellspacing="0">
<thead>
<tr>
<th>Mon</th><th>Tue</th><th>Wed</th>
<th>Thu</th><th>Fri</th><th>Sat</th>
<th>Sun</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> 7</td>
<td> 8</td>
<td class="today"> 9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td class="date_has_event">
13
</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td class="date_has_event">
22
</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>Mon</th><th>Tue</th><th>Wed</th>
<th>Thu</th><th>Fri</th><th>Sat</th>
<th>Sun</th>
</tfoot>
</table>

Для отображения текущей даты используется класс "today", для отображения даты с каким-либо событием - "date_has_event".

Теперь, чтобы добавить текст для отображения достаточно после числа добавить следующий код:

<div class="events">
<ul>
<li>
<span class="title">Event 1</span>
<span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
</li>
<li>
<span class="title">Event 2</span>
<span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</li>
</ul>
</div>

Также обратите внимание, что обязательно необходимо использовать класс "events".

Далее наступает черед CSS магии и jQuery волшебства:

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

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

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

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

Спасибо за внимание!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.stefanoverna.com
Перевел: Максим Шкурупий
Урок создан: 24 Июня 2009
Просмотров: 79573
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 24 Июня 2009 19:16
    STALKER
    Спасибо мне пригодится
  • 24 Июня 2009 20:04
    Dimka
    это что нада самому каждый день к кажому числу прописывать class="today" ?
  • 25 Июня 2009 02:35
    Серега
    календарик красивый, но больше подходит к рубрике jQuery. автор урока расскажите нам, рельно что ли прописывать class="today" каждый день нужно? умереть не встать=)=)=)
  • 25 Июня 2009 06:04
    Ildar
    надо его на пхп и мускул переделать, а то жесть :)
  • 25 Июня 2009 13:34
    AleXgRey
    если страница будет генерироваться так то для каждой даты будет свой event --- и часть js кода будет не нужна.. сачем такое не удобство было придумывать ===================================================== <td>12</td> <td class="date_has_event"> 13 <div class="events"> <ul style="opacity: 0; bottom: 20px; left: -76px; display: none;"> <li> <span class="title">Event 1</span> <span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span> </li> </ul> </div> </td> <td>14</td>
  • 27 Июня 2009 12:07
    Андрей
    Клёвый календарь, конечно если его динамически генерировать а не статичным делать
  • 18 Декабря 2009 09:04
    turin
    хммм... а если его в php как отдельный объект засунуть... и эвенты из мускула тащить... будет даже нормальная вещь :) для статики он и не предназначен :) но однако уменьшать его придётся :(
  • 20 Декабря 2009 14:32
    Nataly
    мне тоже очень понравился календарь, вот только всплывающие окна с событиями отображаются правильно только в IE, а в браузерах Firefox, Safari события отображаются в левом нижнем углу сайта. Подскажите пожалуйста как исправить эту ошибку. Спасибо.
  • 25 Декабря 2009 10:53
    kabancheg
    У меня во всех браузерах все норм! тьфу тьфу..=) Я сделал так: с помощью php вычисляю текущую дату, и в каждой ячейки прописаль код, который сравнивает содержимое ячайки (т.е число) с ткущей датой и если совпадает, то присваевает этой ячейке класс "today" отличный календарь, спасибо!
    • 17 Марта 2012 00:11
      shabda
      Помогите чайнику)) подскажите код, плиз?
    • 25 Октября 2012 21:47
      shabda
      <td<?php
      $day = Date("d");
      { if(9==$day) echo ' class="today"'; else echo ' ';
      }
      ?>>9</td>
      чайник вскипел))
    • 25 Октября 2012 21:50
      shabda
      только страницу обозвать .php
  • 10 Января 2010 22:16
    Nataly
    вот ссылка на мой сайт http://nataly777.com , подскажите пожалуйста что не так. Спасибо!
  • 20 Января 2010 11:28
    Alexsin
    не кроссбраузерный вариант, к тому же мы живем в России, и желательно было бы видеть demo календарь в российском формате : - )
  • 5 Апреля 2010 18:05
    Max
    а как календарь прикрутиьт? Т.е. именно как прикрутить вывод чисел в правильные дни недели?
  • 9 Июня 2010 23:09
    Marsel
    kabancheg выкладывай свой код!))
  • 16 Июня 2010 15:22
    njuha
    -а как календарь прикрутиьт? Т.е. именно как прикрутить вывод чисел в правильные дни недели? *В html структуре видишь такие цыфорки? Так вот это числа. Меняешь их как тебе нужно и всё!
    • 9 Мая 2016 08:34
      andxbes
      Я вот тоже взял этот календарик за основу для плагина . Шаблон для php выглядит так : https://gist.github.com/andxbes/10287d1bb2a81ae272fdab8eee12cbc8 . Есть лишние переменные (пока пишу в соответствии с требованиями ) , и пока не реализовал вывод событий , (сейчас заглушка на следующий день после текущего ).
  • 21 Марта 2011 22:13
    BARS09
    Я этот календарь добавил в Ajax страницу и столкнулся со следующей проблемой: Jquery код не видит новое построенное дерево элементов. Что надо поправить/добавить для того, чтобы jquery работал и на ajax странице?
    • 9 Мая 2016 08:29
      andxbes
      Почитайте о jQuery.live() , и его замене в текущей версии .
  • 10 Февраля 2012 21:22
    LMisha1993
    у мене теж пролема!!!
  • 17 Марта 2014 13:16
    Desus
    День добрый, как поменять цвет ячеек, к примеру школьный календарь нужно пару цветов для каникул, праздник, мероприятие и.т.д
    • 9 Мая 2016 08:40
      andxbes
      Фоторедактором (gimp ... ) увеличиваем cells.png (в img) , добавляем свои ячейки , и дописываем новый класс в css c нужной позицией .Метим нужные дни своим классом .
  • 19 Августа 2014 10:36
    shoydullo
    rd.uz welcom на руской язык этот сайт
^ Наверх ^