Реальный пиарСоздание сайтовВёрстка → Создание календаря-расписания

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

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

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

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

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

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

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

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

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

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

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

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

При наведении на блок-ячейку, менялся стиль его оформления (в заголовке и в теле таблицы):
#Schedule table tbody tr td div:hover {
border-color: #ccc;
background: url(../images/ggrad2.png) left bottom repeat-x;
}
#Schedule table thead tr td div:hover {
color: #555;
border-color: #bfbfbf;
background: url(../images/gradRev.png) left bottom repeat-x;
}

Первая ячейка строки (та, в которой время должна иметь свой стиль:
#Schedule table tbody tr td:first-child div {
padding: 1px 3px;
vertical-align: top;
font-size: 9pt;
cursor: default;
text-align: right;
margin: 0;
border: solid 1px White;
font-weight: bold;
color: #777;
}

И так далее.

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

Основное: при клике на ячейку она должна выделиться. Для этого присвоим ячейке класс selected
$('#Schedule table tbody tr td div').click(
function() { $(this).toggleClass('selected') });

При наведении на ячейку, должны подсвечиваться время и день, чтобы было понятно, где мы находимся. Для этого соответствующей строчке и ячейке в заголовке будем добавлять класс hover:
$('#Schedule table tr').hover(
function() { $(this).addClass('hovered') },
function() { $(this).removeClass('hovered') });
$('#Schedule table tbody tr .d0').hover(
function() { $('#Schedule table thead tr td.d0').addClass('hovered') },
function() { $('#Schedule table thead tr td.d0').removeClass('hovered') });

Еще нам может захотеться добавить возможность выделить сразу все часы конкретного дня, кликнув по заголовку. Но для начала сделаем соответствующую подсветку при наведении на заголовок:
$('#Schedule table thead tr .d0').hover(
function() { $('#Schedule table td.d0').addClass('hovered') },
function() { $('#Schedule table td.d0').removeClass('hovered') })

А событие на клик будет таким:
$('#Schedule table thead tr .d0').click(
.click(function() { DayClick('0', this) });

Код немаленький, и повторяться он должен для каждого дня, поэтому я решил вынести его в отдельную функцию. Сама функция определяет, выделен ли полностью конкретный день, или же нет, и уже на основании этой информации, решает, выделять все ячейки дня или наоборот, убрать все выделения.
function DayClick(dayNum, obj) {
if ($(obj).hasClass('selected') && ($('#Schedule table tbody tr td.d' + dayNum + ' div.selected').length)) {
$('#Schedule table tbody tr td.d'+dayNum+' div').removeClass('selected');
$(obj).removeClass('selected');
}
else {
$('#Schedule table tbody tr td.d' + dayNum + ' div').addClass('selected');
$(obj).addClass('selected');
};
}

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

Функция, которая все для нас сделает:
function SubmitSchedule() {
var XMLSchedule = "";
for (var d = 0; d < 7; d++) {
XMLSchedule += ''
for (var h = 7; h < 21; h++) {
if ($('#Schedule table tbody tr.h' + h + ' td.d' + d + ' div').hasClass('selected')) {
XMLSchedule += '1';
}
else {
XMLSchedule += '0';
};
}
XMLSchedule += '';
}
XMLSchedule += "";
$('#output').text(XMLSchedule);
}


Источник: http://vremenno.net

Рекомендуем



Улучшение форм авторизации, регистрации и напоминации Если бы мы попробовали в прошлом примере с помощью табуляции переходить по элементам формы, мы бы перескакивали с формы на форму, причем в некоторых браузерах маргин менялся бы автоматически, чтобы показать сфокусированные элементы формы и назад нам вернуться было бы проблематично


Советы по CSS для начинающих Далеко не все шрифты присутствуют во всех системах и платформах, поэтому при объявлении семейства шрифтов необходимо указывать алтернативные шрифты


Sass — еще более удобный и логичный CSS Более легкий синтаксис, логическая структура и возможность использования переменных предоставляют разработчикам отличные возможности и могут существенно ускорить написание и редактирование файлов стилей