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

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

[source]

Календарь-Органайзер

Пн Вт Ср Чт Пт Суб Вс
1 2 3 4
5 6 7 8 9 10 11
12 13

  • Событие 1
    Содержание события 1
  • Событие 2
    Содержание события 2

14 15 16 17

  • Событие 1
    Содержание события 1
18
19 20 21 22

  • Событие 1
    Содержание события 1
  • Событие 2
    Содержание события 2

23 24 25
26 27 28 29 30 31
Пн Вт Ср Чт Пт Суб Вс

[/source]

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

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

[source]

[/source]

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

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

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

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