Как сделать календарь в html и css
Самый простой и быстрый способ как вывести готовый календарь на странице, является применение тега input с аттрибутом date . Давайте посмотрим на его возможности.
type="date"> Такой вариант создает поле на странице как на рисунке ниже, при нажатии на mm/dd/yyyy можно будет отредактировать значения, а при нажатии на иконку календаря — выбрать нужное.
type="date" value="2023-01-01"> Здесь мы дополнительно передаем значение которое сразу будет установлено в виде текущего. Это может быть удобно в некоторых случаях.
type="date" value="2022-05-05" min="2022-01-01" max="2022-12-31"> Тут мы задаем диапазон значение из которых можно выбрать дату, например чтобы пользователь не смог ошибиться при выборе даты. Как видно на примере ниже, выбрать месяц из 2021 года нет возможности
Календарь
Выбор даты применяется на сайтах, торгующих авиа и железнодорожными билетами, ведь посетителя интересует заказ билета на определённый день. Календари также применяются в блогах, где записи систематизируются по дате, и сайтах, связанных с разными событиями, например, спортивными. Так или иначе, календарь востребован и может быть добавлен следующим образом.
На сервер данные передаются в формате ГГГГ-ММ-ДД, например, 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 показано создание поля для ввода месяца.
Пример 3. Выбор месяца
HTML5 IE Cr Op Sa Fx
Календарь Укажите месяц:
Как сделать календарь бронирования на js html css? [закрыт]
Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.
Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.
Закрыт 10 месяцев назад .
Всем привет! Не могу как сделать календарь как на фото, чтобы были зеленые поля(свободные даты) и красные поля(забронированные даты). Бронироваться(краситься в красный) будет при нажатии на дату.
Отслеживать
vladuss_cc
задан 29 ноя 2022 в 19:14
vladuss_cc vladuss_cc
17 2 2 бронзовых знака
:))) Вопрос можно отредактировать кнопкой править.
29 ноя 2022 в 19:16
Ну тут скорее всего идёт переключения класса, можно попробовать через element.classList.toggle менять класс который будет менять цвет на красный / зелёный.
29 ноя 2022 в 19:17
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Вы разметки не дали так что пришлось импровизировать 🙂
JS
Сначала объявил переменные, сам календарь и дни недель (на английском).
let $calendar = document.querySelector('#calendar') let days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] Дальше за каждый день недели создал новый столб с первой буквой дня (каждой дал класс name ).
days.forEach(e => < let day = document.createElement('div') day.textContent = e[0] day.className = 'name' $calendar.appendChild(day) >) Дальше через цикл создал сами дни недель, там думаю объяснять не стоит, весь код спокойно читается (Если хотите, напишите в комментариях и я вам объясню).
for (let i = 1; i
Дальше используя метод делегации событий повесил событие на сам календарь, и если пользователь нажимал на ячейку у которой из классов только block , то тогда к блоку добавляется класс active (Соответственно к блоку будет добавляться класс active только тогда, когда блок не пустой и не активный).
$calendar.addEventListener('click', e => < if(e.target.matches('[class="block"]')) < e.target.classList.add('active') >>) CSS
Добавил стандартные стили и ещё более красивый шрифт.
Дальше через grid сделал 7 колонн (т.к. 7 дней недели).
#calendar
Сделал высоту 50 пикселей (3.125em == 50px) и немного разделил блоки, также сделал так, чтобы текст был в центре блока и его нельзя было бы выделить.
.block
Ну и дальше самые простые CSS стили которые даже не нуждаются в объяснении
.name, .block < text-align: center; >.name < font-weight: 700; >.empty < background-color: rgb(247, 247, 247); >.active
Вот тут вся HTML разметка 🙂
Отслеживать
ответ дан 29 ноя 2022 в 21:37
3,331 2 2 золотых знака 9 9 серебряных знаков 27 27 бронзовых знаков
Само понятие бронирования напрашивает, чтобы результат сохранить на сервачке. (чтобы другие могли посмотреть)
29 ноя 2022 в 21:47
@Опан где же я вам сервер достану :)? Я думал что это что-то типа формы которая отправляется на сервер.
30 ноя 2022 в 8:31
Откровенно говоря, так и не понял, о чём Вы. (видать, я сегодня ещё не употребил 150 грамм.)
1 дек 2022 в 8:31
Ну смотрите, дизайн у календаря не особо современный, скорее всего работает на чём-то старом, может PHP и беря этот факт, я и подумал что это какая-то форма со своим JS’ом и соответственно отправка идёт на сервер где уже и будет происходить магия проверки на свободные места (ну и логично будет просто потом показывать какие места не свободны).
1 дек 2022 в 8:36
Я бы конечно подошёл с другого конца. Раз вопрос о бронировании, то нужно хранить об этом инфу и считывать постоянно актуальную, т.е. в момент нажатия проверять не занят ли день, соответственно логика такая: кликаем->получаем id элемента и его значение -> отправляем на сервак аяксом и смотрим не занят ли день другим пользователем(логику проверки пользователя нет смысла описывать), далее закрепляем бронь за текущим пользователем и возвращаем ответ в виде перекраски бэеграунда элемента или полной его перерисовке. P.S. Если же вам без логики, просто менять цвет дива, то вам при добавлении элемента, всё ровно необходимо присваивать уникальный id с нарастающим значением, например ‘id_’+i, далее вешать обработчик на клик по диву и вылавливать его функцией, которая будет уже заниматься всеми манипуляциями с элементом.
Отслеживать
ответ дан 30 ноя 2022 в 5:09
Ivan Chuzhmakov Ivan Chuzhmakov
63 6 6 бронзовых знаков
- javascript
- html
- css
- веб-программирование
-
Важное на Мете
Похожие
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Календарь-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).