Как сделать календарь на сайте

Как сделать календарь на сайте

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

На сервер данные передаются в формате ГГГГ-ММ-ДД, например, 22.12.2014, а вид календаря может различаться в зависимости от браузера. Полностью поддерживает календарь пока только Opera, выводя виджет для выбора любой даты (рис. 1).

Рис. 1. Календарь в браузере Opera

Браузер Chrome также поддерживает календарь, но делает это весьма скупо (рис. 2). По сути вы только можете прокручивать дату или вводить её как текст.

Рис. 2. Календарь в Chrome

В примере 1 показано создание календаря для выбора произвольной даты.

Пример 1. Календарь

HTML5 IE Cr Op Sa Fx

Допустимо ограничить ввод даты заданным значением через атрибуты min и max , они соответственно указывают нижнюю и верхнюю дату. Так, если вам требуется сузить диапазон ввода до ±3 дней от даты 01.06.2012, то код запишется, как показано в примере 2.

Пример 2. Ограничение даты

HTML5 IE Cr Op Sa Fx

Текущая дата заданная через атрибут value подсвечивается фоном, неактивные дни, которые нельзя выбрать — серым цветом (рис. 3).

Рис. 3. Календарь с диапазоном ввода

Кроме традиционного календаря, в котором можно выбрать дату, месяц и год, существует и календарь только для ввода месяца и недели. Они записываются в таком виде.

Выбор месяца в Opera происходит через аналогичный виджет, но в этом случае нельзя указать конкретную дату (рис. 4).

Рис. 4. Выбор месяца в Opera

На сервер данные поля type="month" пересылаются как ГГГГ-ММ, например, 2014-10.

Похожим образом выглядит и виджет для выбора недели (рис. 5), но дополнительно выводится номер недели и выбрать можно только её. На сервер при этом значение отправляется как 2014-W38, где вначале указывается год, затем через дефис W и после него номер недели от начала года.

Рис. 5. Выбор недели в Opera

В примере 3 показано создание поля для ввода месяца.

Узнайте, как создать календарь с помощью CSS.

Создание макета календаря

  • August
    2017
  • Mo
  • Tu
  • We
  • Th
  • Fr
  • Sa
  • Su
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
Шаг 1) добавить HTML:

Пример

Пример как работает

Триггер/открытая часть

Используйте любой элемент, чтобы открыть фактический модальный, например или элемент и указать уникальный идентификатор.

Модальная часть

Элемент class="close" должен использоваться для закрытия модального.

Шаг 2) добавить CSS:

Пример

/* Month header */
.month <
padding: 70px 25px;
width: 100%;
background: #1abc9c;
text-align: center;
>

/* Month list */
.month ul <
margin: 0;
padding: 0;
>

.month ul li <
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
>

/* Previous button inside month header */
.month .prev <
float: left;
padding-top: 10px;
>

/* Next button */
.month .next <
float: right;
padding-top: 10px;
>

/* Weekdays (Mon-Sun) */
.weekdays <
margin: 0;
padding: 10px 0;
background-color:#ddd;
>

.weekdays li <
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
>

/* Days (1-31) */
.days <
padding: 10px 0;
background: #eee;
margin: 0;
>

.days li <
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
>

/* Highlight the "current" day */
.days li .active <
padding: 5px;
background: #1abc9c;
color: white !important
>

Вид виджета Описание Код

Скрипт простого календаря HTML
Пн Вт Ср Чт Пт Сб Вс Это основа. В коде даны подробные комментарии. открыть
Как создать календарь со стрелками-переключателями
Пн Вт Ср Чт Пт Сб Вс На большинстве сайтах календарём пользуются для просмотра ближайших дней плюс-минус месяц, например, чтобы определиться с днём недели числа. В листании годов нет необходимости. открыть
Календарь для сайта
Пн Вт Ср Чт Пт Сб Вс Можно сделать календарь, в котором нажатие на год/месяц приводит к появлению списка месяцев, ещё один клик — к выбору годов, ещё — к выбору списка периодов годов. Но на практике это не удобно и не понятно: нужно совершить много кликов, разобраться во всей структуре, а человек хочет поменьше думать. В код добавлен список официальных праздников. открыть
Как сделать календарь с неделями
Пн Вт Ср Чт Пт Сб Вс Полезен на странице сайта института, где учебный процесс завязан на недельных циклах. Для того, чтобы узнать номер недели используется этот скрипт. открыть

Выпадающий календарь в input

Типы input описаны здесь. Среди них есть несколько для дат

вид код формат описание
yyyy-mm-dd дата
yyyy-mm-ddTHH:MM:SS дата и время с часовым поясом, нет поддержки, работает как type="text"
yyyy-mm-ddTHH:MM:SS дата и время
yyyy-mm год и месяц
yyyy-W год и порядковый номер недели
HH:MM:SS (секунды не обязательны) время
Читайте также:  Как создать значок dll

Можно указывать максимальное и минимальное значение

value с сегодняшней датой и текущим временем в input type="date" на JavaScript

вид код

Большой календарь со всеми 12 месяцами на HTML

Январь
Пн Вт Ср Чт Пт Сб Вс
Февраль
Пн Вт Ср Чт Пт Сб Вс
Март
Пн Вт Ср Чт Пт Сб Вс
Апрель
Пн Вт Ср Чт Пт Сб Вс
Май
Пн Вт Ср Чт Пт Сб Вс
Июнь
Пн Вт Ср Чт Пт Сб Вс
Июль
Пн Вт Ср Чт Пт Сб Вс
Август
Пн Вт Ср Чт Пт Сб Вс
Сентябрь
Пн Вт Ср Чт Пт Сб Вс
Октябрь
Пн Вт Ср Чт Пт Сб Вс
Ноябрь
Пн Вт Ср Чт Пт Сб Вс
Декабрь
Пн Вт Ср Чт Пт Сб Вс

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

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

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

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

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 не будет показан календарь. Они просто ручками наберут нужную дату. Анонимный Всем привет. Мне надо сделать так, чтобы при нажатии на день календаря джаваскриптом стягивало число, месяц и год, и заносило это дело в поле (скрытое, но для теста сделал поля видимыми). Когда нахожусь на текущем месяце, то все отлично: http://prntscr.com/40xg4r
А вот стоит мне переключить месяц, все остается также http://prntscr.com/40xgrj . Ошибок инспектор кода не выдает. NMitra Нашлась минутка для ответа. Предполагаю идея должна быть ясна: day2() нужно добавлять и при переключении месяцев:

Анонимный Спасибо автору за статью. Буду признателен если подскажете как в календаре со стрелками (пример 2) вывести даты с ссылками и подсказками. NMitra В CSS добавьте:

Читайте также:  Как обновить интегрированную видеокарту

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

В HTML добавьте:

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 = ‘

‘,
month=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
soob = document.querySelectorAll(‘#calendarTable div’);;
if (DNfirst != 0) <
for(var i = 1; i Анонимный Спасибо за оперативный ответ, очень помогли. Анонимный А как в календаре на год сделать чтобы одни даты были одного цвета, а другие другого Анонимный Имеется ввиду определенные даты заданные через 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 += ‘

‘ + i;

calendar += ‘

‘ + 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")

Читайте также:  Как сделать резервную копию приложений на андроид

Январь
Пн Вт Ср Чт Пт Сб Вс

Февраль

Пн Вт Ср Чт Пт Сб Вс

Март

Пн Вт Ср Чт Пт Сб Вс

Апрель

Пн Вт Ср Чт Пт Сб Вс

Май

Пн Вт Ср Чт Пт Сб Вс

Июнь

Пн Вт Ср Чт Пт Сб Вс

Июль

Пн Вт Ср Чт Пт Сб Вс

Август

Пн Вт Ср Чт Пт Сб Вс

Сентябрь

Пн Вт Ср Чт Пт Сб Вс

Октябрь

Пн Вт Ср Чт Пт Сб Вс

Ноябрь

Пн Вт Ср Чт Пт Сб Вс

Декабрь

Пн Вт Ср Чт Пт Сб Вс

Ильнарик Как в календаре на 1 месяц прописать события, как в календаре на весь год? Анонимный А можно ли сделать в большом календаре, чтобы на следующий/предыдущий год открывался в новом окне со своим title и description? То же самое и для каждого месяца большого календаря? NMitra Можно создать несколько страниц и без всякого JS, только на HTML сделать календарь.
Можно с помощью PHP, но я не разбиралась как именно. NMitra Пример https://jsfiddle.net/NMitra/LLtqjqcm/ yes_59 Доброго времени суток! Во было бы замечательно если в календаре со стрелками-переключателями добавить выделение государственных праздников, а ещё прекрасней выделенным цветом например недели каникул. Работаю в школе пишу своё пространство. С ув. Александр. NMitra В календаре со стрелками вместо

for(var i = 1; i 1897 && 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() 1926 && D.getFullYear() 2004) // День народного единства, который заменил Октябрьскую революцию 1917 года
) <
calendar += ‘

‘ + i;
>else <
calendar += ‘ ‘ + i;
>
>
if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) <
calendar += ‘

‘;
>
> NMitra Про дни каникул: вместо

calendar += ‘

‘ + i;

if (
((i > 27 && (i 25 && (i NMitra i — это день
D.getMonth() — это месяц — 1. Например декабрь — это 12 месяц года, тогда для него D.getMonth() равен (два символа ==) 11
D.getFullYear() — это год, его можно не писать, тогда дата каникул в любой год будет в одно и то же время. Но я сомневаюсь, что школьники часто будут интересоваться в какое время каникулы были в прошлом году.

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. Когда текущая дата будет равна сравниваемой, появится сообщение

NMitra В стилях что ниже, то и имеет приоритет. Так текущая дата

#calendar2 .vacation <>
#calendar2 tbody td.today <>

А так дата каникул

#calendar2 tbody td.today <>
#calendar2 .vacation <>

Я бы текущую дату выделила не фоном, а рамкой

Ссылка на основную публикацию
Как разблокировать вай фай соседа
Внимание! Проект WiFiGid.ru и лично автор статьи Ботан не призывают делать взлом WiFi! Особенно чужих сетей. Статья написана в образовательных...
Как пользоваться вебкамерой на компьютере
Что являет собой веб-камера? Это устройство, которое, как правило, подключается к компьютеру или ноутбуку при помощи USB-кабеля, и используется для...
Как пользоваться вк савер
У тех, кто использует данное программное обеспечение впервые, часто возникает ряд вопросов, связанных не только с функционалом, но и некоторыми...
Как разблокировать веб сайт
Бывало ли такое, что вы пытаетесь открыть сайт, но он недоступен (даже при стабильном интернет-подключении). Часто даже можно видеть сообщения...
Adblock detector