Календарь-1 для сайта на JavaScript
Простой календарь для сайта на CSS и JavaScript.
Представленный календарь предназначен для просмотра ближайших дней плюс-минус месяц. Календарь можно листать до нужного года как вперед, так и назад.
Вид календаря на странеце сайта
- Разместить все три части на одной странице.
- Разместить часть 1 (стиль календаря) в отдельном файле.css.
- Разместить часть 3 (скрипт календаря) в отдельном файле.js и подключить к странице сайта.
1. Стиль календаря
.look-calendar < width:220px; border:1px solid #c0c0c0; padding:6px; margin: 0 auto; >#calendar < width: 100%; line-height: 1.2em; font-size: 15px; text-align: center; border-spacing:0px; >#calendar tr.dn td < font-size: 15px; >#calendar thead tr:last-child < font-size: small; color: #555555; >#calendar thead tr:nth-child(1) td:nth-child(2) < color: #323232; >#calendar thead tr:nth-child(1) td:nth-child(1):hover, #calendar thead tr:nth-child(1) td:nth-child(3):hover < cursor: pointer; >#calendar tbody td < color: #2c567a; >#calendar tbody td:nth-child(n+6), #calendar .holiday < color: #e78c5c; >#calendar tbody td.today
2. Код календаря на страние сайта.html
‹ › ПнВтСрЧтПтСбВс
3. Скрипт календаря
function calendar(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 = '', month = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"]; if (DNfirst != 0) < for (var i = 1; i < DNfirst; i++) calendar += ''; > else < for (var i = 0; i < 6; i++) calendar += ''; > for (var i = 1; i ‘ + i; > else < calendar += '' + i; > if (new Date(D.getFullYear(), D.getMonth(), i).getDay() == 0) < calendar += ''; > > for (var i = DNlast; i < 7; i++) calendar += ''; document.querySelector('#' + id + ' tbody').innerHTML = calendar; document.querySelector('#' + id + ' thead td:nth-child(2)').innerHTML = month[D.getMonth()] + ' ' + D.getFullYear(); document.querySelector('#' + id + ' thead td:nth-child(2)').dataset.month = D.getMonth(); document.querySelector('#' + id + ' thead td:nth-child(2)').dataset.year = D.getFullYear(); if (document.querySelectorAll('#' + id + ' tbody tr').length < 6) < // чтобы при перелистывании месяцев не "подпрыгивала" вся страница, добавляется ряд пустых клеток. Итог: всегда 6 строк для цифр document.querySelector('#' + id + ' tbody').innerHTML += ' '; > > calendar(«calendar», new Date().getFullYear(), new Date().getMonth()); // переключатель минус месяц document.querySelector(‘#calendar thead tr:nth-child(1) td:nth-child(1)’).onclick = function() < calendar("calendar", document.querySelector('#calendar thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar thead td:nth-child(2)').dataset.month) - 1); >// переключатель плюс месяц document.querySelector(‘#calendar thead tr:nth-child(1) td:nth-child(3)’).onclick = function() < calendar("calendar", document.querySelector('#calendar thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar thead td:nth-child(2)').dataset.month) + 1); >
Для этого календаря Примеры оформления (меняем только CSS).
Как создать календарь в html
Напишите функцию createCalendar(elem, year, month) .
Вызов функции должен создать календарь для заданного месяца month в году year и вставить его в elem .
Например, createCalendar(cal, 2012, 9) сгенерирует в cal следующий календарь:
P.S. В этой задаче достаточно сгенерировать календарь, кликабельным его делать не нужно.
Для решения задачи сгенерируем таблицу в виде строки: «
» , а затем присвоим в innerHTML .
Создание календаря-расписания
Сегодня, дорогие читатели, я хочу поделиться с вами процессом создания несложного календаря. Может быть, кому-нибудь пригодиться готовый вариант.
Задача: сделать недельный календарик, каждый час которого может быть двух состояний: вкл или выкл.
Использовать его можно для учета работы (работал — не работал) или учета занятости человека: свободен или занят, этакий гугл-календарь для бедных.
Начнем с 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); > Надеюсь вы нашли для себя что-нибудь интересное. Все ваши мысли приветствуются в комментах.
Календарь с помощью CSS-grid в несколько строк кода
Сетка календаря выглядит, как идеальный кандидат для использования CSS-grid. Ниже рассмотрим пример, как можно сделать разметку для календарика с помощью всего нескольких строк кода. В итоге должно получиться так:
Начать следует с HTML-разметки:
Mo Su 1 31 В нормальных условиях обычно не приходится вручную писать все числа
. Эта часть легко может быть сгенерирована с помощью Javascript в браузере или сервером, поэтому для примера будет использоваться только HTML и CSS.
В разметке будут две части: контейнер для дней недели .days-of-week-container и контейнер для чисел месяца .calendar-container . Оба будут реализованы с помощью CSS-grid, а текст будет выравниваться по правому краю:
.days-of-week-container, .calendar-container
Теперь, если посмотреть на сетку, станет ясно, что здесь будет 7 колонок, поэтому первое, что приходит в голову, написать как-то вроде:
grid-template-columns: 30px 30px 30px 30px 30px 30px 30px;Но это слишком примитивно и некрасиво, поэтому для настройки наших колонок будем использовать repeat :
grid-template-columns: repeat(7, 30px);Теперь, дни недели и сам календарь на месяц будут располагаться в макете сетки, состоящей из 7 колонок.
Что делать, если месяц должен начинаться не в понедельник, а например, в пятницу? Достаточно использовать CSS-свойство grid-column и переместить первый день месяца в колонку любого дня недели в календаре, а автоматическое размещение позаботится обо всем остальном.
.calendar-container div:first-child
Для установки значения grid-column можно использовать настраиваемые CSS-свойства и управлять расположением первого дня месяца из Javascript. Как это сделать, можно посмотреть на странице о передаче данных между CSS и JavaScript с помощью CSS-переменных.
Это всё, что требуется для реализации простого макета календаря: CSS-grid и всего несколько строк кода.