Как сделать календарь в html и css

Календарь для сайта | JavaScript

Можно сделать большие подсказки (как сделать). Но это базовый образец и усложнять его не хочется.

Полный календарь, где даты идут вслед

В коде выше в JS строку заменить на Строку заменить на

Добавить CSS перед закрывающимся тегом </style>:

68 комментариев:

Анонимный Полезная информация, благодарствую 🙂 NMitra Совсем не запланированная: накопились знания про new Date() при написании цикла "сколько часов, сколько минут. ", которые тут и использовала. Анонимный Отлично всё работает. Очень полезно для верстальщика. NMitra Да, я понимаю, что это не конечный вариант, и понимаю, что проще написать своё "творение", чем разбираться в чужой работе. Поэтому стараюсь либо давать самое простое решение, либо писать комментарии. Aleksey NMitra, спасибо. Своё "творение" писать не проще, но приходится. И без таких "самых простых решений" это сделать очень трудно (долго). У меня календарь занял около 600 строк js, К сожалению выложить его не могу, но могу показать http://result-systems.ru/dbopen?RF.TVR/DP_2013
Там список документов — откройте любой в режиме правки. Календарь рассчитан на ввод с клавиатуры. Открыть по Enter NMitra Заценила 🙂 Анонимный отличные календари) но как заставить работать календарь со стрелками в IE (желательно IE8)? а то сами стрелки не работают( NMitra Десятка норм. Честно говоря, не могу сказать что там именно ему не нравится. Возможно document.querySelector (не помню когда начал поддерживать) или он с селекторами CSS не дружит. ( Анонимный Ошибка в коде 2-го календаря (со стрелками-переключателями). Если сегодня 31-е число вы не сможете переключиться на месяца в которых нет 31-го числа, либо не сможете переключиться на невисокосный февраль, если сегодня число большее, чем 28-е. Да вообще много ошибок, хотя и не критичных, в коде, например не генерируются закрывающие теги для ячеек и строчек таблицы, многократно используются вызовы функций для получения одних и тех же значений, вместо сохранения в переменную и последующего использования, постоянно используются длинные цепочки в querySelector вместо назначения id на нужный элемент и выборки его по id. Но вообщем код рабочий, за исключением описанного бага, за что огромная благодарность автору. NMitra Спасибо за бдительность. Код подправила. Теперь как по маслу.

Закрывающиеся теги не нужны http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission
Точно, querySelector я люблю без меры. Разница с id незначительна.
Вызовы функций, предполагаю, каждый под себя сделает. Зато так понятно что откуда берётся. Учитывая, что я сегодня на код смотрела как в первый раз, сразу в нём разобралась. Анонимный Экспериментировать можно и нужно в процессе саморазвития, но в коммерческих (да и любых других проектах) лучше использовать готовые проверенные и отлаженные решения (их масса беЗплатных). Как пример http://jqueryui.com/datepicker/ или http://plugins.jquery.com/tag/calendar/ (их довольно много, не только джекверных, они кроссбраузерны и кастомизируемы и т.д.). Цените своё время и экономьте средства заказчика. NMitra Согласна. Для себя считаю так. Код пишется для новых версий браузера. В приоритете мобильные телефоны, планшеты, ноутбуки. Они быстро морально устаревают или ломаются. Как ни крути их пользователи установят последние версии браузеров.

Прозрачность, выделение столбцов таблицы, <input type="date"> и т.п. Для пользователей новых версий браузеров будет всё красиво и юзабильно. Для старых версий должно быть доступно. То есть чтобы они могли воспользоваться функциями, заказать товар, вёрстка не съезжала, но при заполнении поля input не будет показан календарь. Они просто ручками наберут нужную дату. Анонимный Всем привет. Мне надо сделать так, чтобы при нажатии на день календаря джаваскриптом стягивало число, месяц и год, и заносило это дело в поле (скрытое, но для теста сделал поля видимыми). Когда нахожусь на текущем месяце, то все отлично: http://prntscr.com/40xg4r
А вот стоит мне переключить месяц, все остается также http://prntscr.com/40xgrj . Ошибок инспектор кода не выдает. NMitra Нашлась минутка для ответа. Предполагаю идея должна быть ясна: day2() нужно добавлять и при переключении месяцев:

<div />
<script>
function day2() <
var day2 = document.querySelectorAll(&#39;#calendar2 tbody td&#39;);
for (var i = 0; i < day2.length; i++) <
day2[i].onclick = function() <
document.querySelector(&#39;#rez&#39;).innerHTML = this.innerHTML + &#39; &#39; + parseFloat(parseFloat(this.parentNode.parentNode.parentNode.querySelector(&#39;thead td:nth-child(2)&#39;).dataset.month) + 1) + &#39; &#39; + this.parentNode.parentNode.parentNode.querySelector(&#39;thead td:nth-child(2)&#39;).dataset.year;
>
>
>

Calendar2("calendar2", new Date().getFullYear(), new Date().getMonth());

// переключатель минус месяц
document.querySelector(&#39;#calendar2 thead tr:nth-child(1) td:nth-child(1)&#39;).onclick = function() <
Calendar2("calendar2", document.querySelector(&#39;#calendar2 thead td:nth-child(2)&#39;).dataset.year, parseFloat(document.querySelector(&#39;#calendar2 thead td:nth-child(2)&#39;).dataset.month)-1);
day2();
>

// переключатель плюс месяц
document.querySelector(&#39;#calendar2 thead tr:nth-child(1) td:nth-child(3)&#39;).onclick = function() <
Calendar2("calendar2", document.querySelector(&#39;#calendar2 thead td:nth-child(2)&#39;).dataset.year, parseFloat(document.querySelector(&#39;#calendar2 thead td:nth-child(2)&#39;).dataset.month)+1);
day2();
>
</script> Анонимный Спасибо автору за статью. Буду признателен если подскажете как в календаре со стрелками (пример 2) вывести даты с ссылками и подсказками. NMitra В CSS добавьте:

#calendar2 tbody td[title] <
outline: 3px solid green;
background: yellow;
cursor: help;
>
#calendar2 tbody td[title] a <
display: block;
>

В HTML добавьте:

<div /> <div data-dd="5" data-mm="9" data-yyyy="2014" data-text="Некое событие" data-link="http://shpargalkablog.ru/2013/11/calendar.html"></div>
<div data-dd="8" data-mm="10" data-yyyy="2014" data-text="Другое событие" data-link="http://shpargalkablog.ru/2013/11/calendar.html"></div>
</div> NMitra Скрипт будет таким:

function Calendar2(id, year, month) <
var Dlast = new Date(year,month+1,0).getDate(),
D = new Date(year,month,Dlast),
DNlast = new Date(D.getFullYear(),D.getMonth(),Dlast).getDay(),
DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
calendar = '<tr>&#39;,
month=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
soob = document.querySelectorAll(&#39;#calendarTable div&#39;);;
if (DNfirst != 0) <
for(var i = 1; i < DNfirst; i++) calendar += '<td>&#39;;
>else <
for(var i = 0; i < 6; i++) calendar += '<td>&#39;;
>
for(var i = 1; i <= Dlast; i++) <
if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) <
calendar += '<td + i;
>else <
calendar += '<td>&#39; + i;
>
if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) <
calendar += '<tr>&#39;;
>
>
for(var i = DNlast; i < 7; i++) calendar += '<td>&nbsp;&#39;;
document.querySelector(&#39;#&#39;+id+&#39; tbody&#39;).innerHTML = calendar;
document.querySelector(&#39;#&#39;+id+&#39; thead td:nth-child(2)&#39;).innerHTML = month[D.getMonth()] +&#39; &#39;+ D.getFullYear();
document.querySelector(&#39;#&#39;+id+&#39; thead td:nth-child(2)&#39;).dataset.month = D.getMonth();
document.querySelector(&#39;#&#39;+id+&#39; thead td:nth-child(2)&#39;).dataset.year = D.getFullYear();
if (document.querySelectorAll(&#39;#&#39;+id+&#39; tbody tr&#39;).length < 6) < // чтобы при перелистывании месяцев не "подпрыгивала" вся страница, добавляется ряд пустых клеток. Итог: всегда 6 строк для цифр
document.querySelector(&#39;#&#39;+id+&#39; tbody&#39;).innerHTML += '<tr><td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;&#39;;
>

// абзац создаёт сообщения
for (var k = 0; k < soob.length; k++) <
if (soob[k].dataset.yyyy == D.getFullYear() && soob[k].dataset.mm — 1 == D.getMonth()) <
var mytd = document.querySelectorAll(&#39;#&#39;+id+&#39; tbody td&#39;);
for (var p = 0; p < mytd.length; p++) <
if (soob[k].dataset.dd == mytd[p].innerHTML) <
if (soob[k].dataset.link) <
mytd[p].innerHTML = '<a href="&#39; + soob[k].dataset.link + &#39;" target="_blank">&#39; + mytd[p].innerHTML + '</a>&#39;;
>
if (soob[k].dataset.text) <
mytd[p].title = soob[k].dataset.text;
>
>
>
>
>

>
Calendar2("calendar2", new Date().getFullYear(), new Date().getMonth());
// переключатель минус месяц
document.querySelector(&#39;#calendar2 thead tr:nth-child(1) td:nth-child(1)&#39;).onclick = function() <
Calendar2("calendar2", document.querySelector(&#39;#calendar2 thead td:nth-child(2)&#39;).dataset.year, parseFloat(document.querySelector(&#39;#calendar2 thead td:nth-child(2)&#39;).dataset.month)-1);
>
// переключатель плюс месяц
document.querySelector(&#39;#calendar2 thead tr:nth-child(1) td:nth-child(3)&#39;).onclick = function() <
Calendar2("calendar2", document.querySelector(&#39;#calendar2 thead td:nth-child(2)&#39;).dataset.year, parseFloat(document.querySelector(&#39;#calendar2 thead td:nth-child(2)&#39;).dataset.month)+1);
> Анонимный Спасибо за оперативный ответ, очень помогли. Анонимный А как в календаре на год сделать чтобы одни даты были одного цвета, а другие другого Анонимный Имеется ввиду определенные даты заданные через data-dd, . на которых появляется подсказка NMitra Добавьте по аналогии с data-text ещё и data-class
В div (всегда прописываете)
data-class="mytd1"
В скрипте в двух местах после myD[i].title = my.dataset.text; добавьте
myD[i].className = my.dataset.class;
Стиль будет
#calendarBig .mytd1
#calendarBig .mytd2 NMitra Пример http://jsfiddle.net/NMitra/3Ljdb2s7/ Анонимный Спасибо огромное!
Всё оказывается просто. Учиться, учиться и еще раз учиться 🙂 Андрей Бакрин Как сделать так, чтобы при клике по дате, вылезало окно с выбором цвета (2-3 цвета), пользователь мог выбрать каким цветом закрасить дату. Нужно для графика работы. NMitra Андрей, со всем уважением, но это уже делается за плату. Анонимный 1 января 2014 вообще то среда,а не вторник (браузер FF) NMitra У меня среда. А где вы смотрите (какой из калькуляторов)? Анонимный Спасибо NMitra, отличные календари, прям то что надо. NMitra Рада помочь! Виталий Привет! Очень понравился Большой календарь со всеми 12 месяцами на HTML.
Но хотелось бы переделать его: Дни недели с ПН по ВС были бы по левую и правую сторону, а даты месяцев соответственно шли бы не по горизонтали, а по вертикали.
Подскажите! NMitra Привет, с трудом представляю как это должно выглядеть. Добавьте в стили

#calendarBig <
transform: rotate(-90deg);
>
#calendarBig table tbody td <
transform: rotate(90deg);
> Виталий получается лабуда. Виталий как сделать календарь аналогично как в Виндовс 7, когда изменяешь дату с переходами в месяца, года и десятилетия? NMitra Я могу сделать чтоб ровненько было, но всё равно лабуда получится. Если у вас есть пример, когда дни недели находятся сбоку, приведите его, пожалуйста.

Календарь как в Виндовс 7 делать более трудоёмко и не бесплатно. Виталий как ещё сделать в Большом календаре на год чтобы при нажатии на день
текст выводился внизу календаря, а не во всплывающей подсказке.
NMitra Без ссылок, клик будет выводить текст под календарём http://jsfiddle.net/NMitra/uq41yoxx/
Так как календарь занимает почти всю высоту экрана монитора (особенно на планшетах), то всплывающие подсказки оставила Виталий Подскажите, как правильно добавить условие, что
today, . иначе holiday или "ещё какие-то дни", тогда . td.
т.е. параллельно с holiday
а то запутался. сори.
NMitra Когда текущий день совпадает с праздником, то что-то должно происходить?

Строку
calendar += '<td + i;

замените на
if (
((i > 0 && i < 9) && D.getMonth() == 0) ||
(i == 23 && D.getMonth() == 1 ) ||
(i == 8 && D.getMonth() == 2) ||
(i == 1 && D.getMonth() == 4) ||
(i == 9 && D.getMonth() == 4) ||
(i == 12 && D.getMonth() == 5) ||
(i == 4 && D.getMonth() == 10)
) <
calendar += '<td + i;
>else <
calendar += '<td + i;
> NMitra И для todayPR укажите свои стили Виталий хм, так закрасились все выходные.
Нужно стилями отметить и другие дни, кроме праздников.
Т.е. есть праздники, а есть и другие памятные дни, которые нужно тоже отметить стилями отдельно от праздников и рядовых дней.
Пока не получается. NMitra if (
((i > 0 && i < 9) && D.getMonth() == 0) ||
(i == 23 && D.getMonth() == 1 ) ||
(i == 8 && D.getMonth() == 2) ||
(i == 1 && D.getMonth() == 4) ||
(i == 9 && D.getMonth() == 4) ||
(i == 12 && D.getMonth() == 5) ||
(i == 4 && D.getMonth() == 10)
) <
calendar += '<td + i;
>else<
if (
(i == 20 && D.getMonth() == 3) ||
(i == 5 && D.getMonth() == 8 )
) <
calendar += '<td + i;
>else<
calendar += '<td + i;
>
>

Установите свои стили

#calendarBig .holiday, #calendarBig .todayPR <
color: blue;
>
#calendarBig .todayMYPR <
color: green;
> Виталий Вроде логику вижу, однако непонятно, где здесь должны быть эти строки:
от for(var i = 1; i <= Dlast; i++)
и до if (DNlast != 0) NMitra Это всё остаётся, вам нужно заменить одну строку, озвученную в комментарии 38

calendar += '<td + i; Анонимный это то и так понятно
не понятно то, что это не работает. NMitra Стили нужно более подробно расписывать

#calendarBig table tbody td.holiday, #calendarBig table tbody td.todayPR <
color: blue;
>
#calendarBig table tbody td.todayMYPR <
color: green;
>

См. http://jsfiddle.net/NMitra/srdq5oc7/ Sergey Zavrazhnov Можно чтобы дата была ссылкой на другую страницу, тогда нужно написать data-link (адрес страницы, куда перенаправить пользователя). Одна дата не может вести на несколько страниц [вернее может, но в код нужно внести дополнительные изменения]

Возникла необходимость сделать дату ссылкой на несколько различных страниц. Что нужно в код добавить.
Заранее спасибо NMitra См. http://jsfiddle.net/NMitra/y2qxys9w/ Дмитрий Вашкевич Подскажите, как закрыть для выбора определенные даты в календаре (чтобы они были выделены другим цветом и их нельзя было выбрать для передачи в форму) NMitra Можно в JS, а можно только CSS и HTML.
CSS и HTML (пример http://jsfiddle.net/NMitra/t3uv1jcu/ ):

последним в calendarTable добавьте свои даты, только оставьте пустым data-text=""

тогда в CSS внесите приблизительно такой стиль

#calendarBig table tbody td[title=""] <
outline: 3px none green;
background: #ccc;
cursor: not-allowed;
> Дмитрий Шумов хороший календарь советую всем без рекламы и всего прочего NMitra Благодарю за комментарий, Дмитрий СГ приветствую! прошу вашего совета. Есть страничка на простом html, на ней церковный календарь в виде длинного списка. Как привязать какой-либо из ваших скриптов так, чтобы при открытии странички мы видели перед собою не верх страницы, а сегодняшний день? посмотреть можно здесь maristarover.ru в левом меню Месяцеслов. С уважением Сергей Генн. NMitra Привет, не поняла. Нужно чтобы страница перематывалась? Или в правой колонке висела картинка конкретного месяца? Второе делается по той же схеме http://shpargalkablog.ru/2010/07/kartinku-v-zagolovok-bloga.html#mes NMitra Первое http://shpargalkablog.ru/2015/07/hash-scrolling.html Анонимный Всем салют!Подскажите,как в календаре(на 12 мес который) сделать не три месяца в столбце,а пять,хотя бы NMitra Здравствуйте, на 5 плохо — получится что два месяца будут отшельниками. Вот по 4-ре месяца (тег tr чтоит через каждые четыре td; верхняя колонка объединяет две ячейки с помощью colspan="2")

for(var i = 1; i <= Dlast; i++) <
if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) <
calendar += '<td + i;
>else <
calendar += '<td>&#39; + i;
>
if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) <
calendar += '<tr>&#39;;
>
>

for(var i = 1; i <= Dlast; i++) <
if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) <
calendar += '<td + i;
>else <
if ( // список официальных праздников
(i == 1 && D.getMonth() == 0 && ((D.getFullYear() > 1897 && D.getFullYear() < 1930) || D.getFullYear() > 1947)) || // Новый год
(i == 2 && D.getMonth() == 0 && D.getFullYear() > 1992) || // Новый год
((i == 3 || i == 4 || i == 5 || i == 6 || i == 8) && D.getMonth() == 0 && D.getFullYear() > 2004) || // Новый год
(i == 7 && D.getMonth() == 0 && D.getFullYear() > 1990) || // Рождество Христово
(i == 23 && D.getMonth() == 1 && D.getFullYear() > 2001) || // День защитника Отечества
(i == 8 && D.getMonth() == 2 && D.getFullYear() > 1965) || // Международный женский день
(i == 1 && D.getMonth() == 4 && D.getFullYear() > 1917) || // Праздник Весны и Труда
(i == 9 && D.getMonth() == 4 && D.getFullYear() > 1964) || // День Победы
(i == 12 && D.getMonth() == 5 && D.getFullYear() > 1990) || // День России (декларации о государственном суверенитете Российской Федерации ознаменовала окончательный Распад СССР)
(i == 7 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 2005)) || // Октябрьская революция 1917 года
(i == 8 && D.getMonth() == 10 && (D.getFullYear() > 1926 && D.getFullYear() < 1992)) || // Октябрьская революция 1917 года
(i == 4 && D.getMonth() == 10 && D.getFullYear() > 2004) // День народного единства, который заменил Октябрьскую революцию 1917 года
) <
calendar += '<td + i;
>else <
calendar += '<td>&#39; + i;
>
>
if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) <
calendar += '<tr>&#39;;
>
> NMitra Про дни каникул: вместо

if (
((i > 27 && (i < 32)) && D.getMonth() == 11 && D.getFullYear() == 2015) || // каникулы с 28 по 31 декабря 2015 года
((i > 25 && (i < 32)) && D.getMonth() == 4 && D.getFullYear() == 2016) // каникулы с 25 по 31 мая 2016 года
) <
calendar += '<td title="Каникулы">&#39; + i;
>else<
calendar += '<td>&#39; + i;
>
NMitra i &#8212; это день
D.getMonth() &#8212; это месяц — 1. Например декабрь &#8212; это 12 месяц года, тогда для него D.getMonth() равен (два символа ==) 11
D.getFullYear() &#8212; это год, его можно не писать, тогда дата каникул в любой год будет в одно и то же время. Но я сомневаюсь, что школьники часто будут интересоваться в какое время каникулы были в прошлом году.

i, D.getMonth() и D.getFullYear() объединены символами &&
это условие берём в скобки и при необходимости пишем ещё одно условие, также в скобках. Условия объединяются символами ||

#calendar2 tbody td.today

#calendar2 .vacation <
color: #919191;
> yes_59 Ok yes_59 Доброго времени суток! Спасибо! Просто замечательно! Всё работает, но вот если, например неделю каникул цветом выделить, при этом не изменяя фон текущей даты или запрограммировать, например на 15 января олимпиаду (событие) и при загрузке страницы выдавать сообщение о напоминании или подтверждении этого события. С благодарностью Александр NMitra Доброе время суток: это 2015,12-1,31 сравниваемая дата 31.12.2015. Когда текущая дата будет равна сравниваемой, появится сообщение

<script>
if ((new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()) — new Date(2015,12-1,31))/86400000 == 0)
</script> NMitra В стилях что ниже, то и имеет приоритет. Так текущая дата

PHP календарь: скрипт календаря для сайта на PHP + HTML + CSS

Одним из важных элементов на сайте является календарь, с помощью которого ваши пользователи могут отслеживать события, появления новых продуктов. Или просто читать записи или еще что только не придумаешь. Уделив несколько времени этому уроку, вы узнаете, как создать PHP скрипт календаря для своего сайта. Мы не будем ограничиваться только программированием, также обратим внимание на css и html структуру календаря. Одним словом сделаем все, от начала до конца!

Меньше слов, больше дела. Сразу же начнем из css стилей календаря. Ниже предоставленный код, совместим с проблемным браузером IE6.

Весь PHP код скрипта календаря, в основном базируется на одной функции, которая требует два параметра: желаемый месяц и год. Следует отметить, в средине функции, я оставил место для mysql запроса к базе данных. Если хотите, можете выводить необходимые события в сетку календаря. При написании этого скрипта, я использовал таблицы, вместо div блоков, так как они более практичны в случае, если один день будет пресыщен событиями.

За основу брался англоязычный скрипт календаря, поэтому предоставлю две версии: календарь в английском и русском стиле. Выбирайте, какой вам по душе! Разница только в PHP коде. CSS стили остаются прежними, для обеих вариантов.

PHP скрипт календаря в русском стиле

Результат

Календарь в русском стиле на PHP

PHP скрипт календаря в английском стиле

Впринципе, незнаю зачем он вам. Но, вдруг кому-то нужен именно такой. Код практически тот же.

Результат

Календарь в английском стиле на PHP

Вот и все! Надеюсь, этот скрипт календаря на PHP, был полезен для вас. Не ограничивайтесь этим кодом, вносите коррективы и расширяйте скрипт. Кто планирует воспользоваться скриптом или уже воспользовался, просьба отписаться в комментариях и оставить ссылку на страницу с примером.

Как сделать календарь в html и css

Создание календаря-расписания

Создание календаря-расписания

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

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

Использовать его можно для учета работы (работал — не работал) или учета занятости человека: свободен или занят, этакий гугл-календарь для бедных.

Начнем с HTML. Календарь завернем в див "Schedule". А структура самого календарика будет следующая:

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

Одна ячейка таблицы — это див внутри td:

Именно для него мы и будем писать стили и назначать js-ивенты.

Для этой ячейки предполагаются всего три состояния:

Теперь взглянем на CSS.

Многие верстальщики старой закалки, стараясь обеспечить поддержку IE6 избегали использовать псевдоклассы, вроде :first-child, вместо этого первым элементам дописывали дополнительные классы или использовали js, и поэтому забыли их напрочь. Сегодня многие заказчики уже не требуют поддержки шестого ослика, а так как в седьмом Эксплорере многие псевдоклассы работают, можно не стесняться их использовать.

Мы хотим несколько вещей:

При наведении на блок-ячейку, менялся стиль его оформления (в заголовке и в теле таблицы):

Первая ячейка строки (та, в которой время должна иметь свой стиль:

Теперь поговорим о необходимом jQuery коде, который нам нужен.

Основное: при клике на ячейку она должна выделиться. Для этого присвоим ячейке класс selected

При наведении на ячейку, должны подсвечиваться время и день, чтобы было понятно, где мы находимся. Для этого соответствующей строчке и ячейке в заголовке будем добавлять класс hover:

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

А событие на клик будет таким:

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

После манипуляций с расписанием, нам надо в каком-то приличном виде отправить это на сервер. Самое простое — пройдя все ячейки, составить XML, который будет содержать всю нужную нам информацию.
Формат:

Функция, которая все для нас сделает:

В результате всей этой XHTML+CSS+jQuery акробатики, получилось вот такое расписание:

Надеюсь вы нашли для себя что-нибудь интересное. Все ваши мысли приветствуются в комментах.

  • schedule,
  • календарь,
  • расписание.

Автор: Евгений Белодед

Сооснователь Временно.нет. Занимается проектированием интерфейсов, клиентским и серверным программированием в компании Comet Technologies.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *