Создать календарь html

Air Datepicker, легкий и красивый выбор даты

Хочу поделиться с вами опытом написания компонента выбора даты для текстового поля.

Результат работы можно посмотреть здесь: Air Datepicker.

Введение

Работая над последним проектом, возникла необходимость добавить в приложение календарь с возможностью выбрать конкретный месяц. Все популярные плагины такую возможность предоставляют, мой выбор остановился на Zebra Datepicker — маленький, функциональный, все здорово. Но некоторых вещей все же не хватало:

1. передача объектов Date() в параметры вместо строк
2. менее громоздкая разметка
3. гибкое позиционирование элемента
4. анимация при появлении

Сколько не приходилось работать с датой, почти всегда в исходных данных она хранилась в unix формате, и для меня остается загадкой, почему во многих плагинах при задании, к примеру, минимально возможной даты, нужно передавать строку: нужно получить дату, затем переделать ее в строку и уже потом передать плагину, вместо того, чтобы просто отдать new Date(time).

Что касается громоздкой разметки, то к ней добавляется еще и табличная верстка, к ячейкам которой без лишних проблем не добавить position: relative;.

Ну и напоследок все же хочется, чтобы была возможность добавить небольшую анимацию, а из-за того, что многие популярные календари используют метод .show(), который задействует свойство display, плавные переходы (transition) добавлять трудоемко.

Разработка

Календарь я разделил на три части:

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

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

В свою очередь внутри геттера происходит вызов отрисовки элементов календаря (упрощенно):

Точно так же происходит переход на другой вид, очень просто:

Формирование разметки

Основа для календаря выглядит следующим образом:

Без таблиц и намека на них. Ячейка является простым

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

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

Вычисление общего количества дней в месяце

Чтобы сформировать корректный HTML, нужно знать сколько дней в месяце. Для этого используется небольшой трюк с передачей следующего месяца и нулевой даты (в Date() дата месяца начинается с единицы).

Формирование названий дней

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

Использование flexbox

Для позиционирования внутри календаря я использую flexbox. Он с легкостью позволяет отцентрировать контент внутри ячеек, будет по центру во всех браузерах (которые поддерживают эту технологию) и на разных ОС, в отличие от техники задания высоты и такого же междустрочного интервала.

Плюс он позволяет располагать элементы на равноудаленном расстоянии друг от друга всего одной строчкой:

Не нужно беспокоиться о разных значениях ширины, все будет рассчитываться автоматически.

Можно также упомянуть про кнопки «Сегодня» и «Очистить»:

Если их две, они занимают по 50% ото всей ширины, если одна, то она занимает всю ширину. Этого также можно достичь одной строкой:

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

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

Позиционирование

Позиция элемента задается двумя значениям:

1. сторона, с которой будет появляться календарь
2. положение на этой стороне

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

Для того, чтобы добавить анимацию «подъезжания» к текстовому полю, я добавил вспомогательные классы, которые говорят с какой стороны нужно начинать анимацию. В данном случае этот класс выглядел бы как .-from-top-. За анимацию отвечают css transition и css transform. Это позволяет достичь плавности, а также добавлять кастомные переходы.

Что касается Date()

Как я упоминал вначале, мне не совсем понятны ситуации, когда вместо объекта даты нужно передавать строку. Возможно это удобно при автоматической инициализации, когда параметры нужно передавать через data атрибуты, но для меня все же удобнее просто передать new Date(). Тем более, что запись вида new Date(2015, 11, 17) не особо сложнее ‘2015-12-17’. Поэтому у меня во всех параметрах, где задается дата, необходимо передавать new Date().

Несколько слов об использовании

Мне нравится практика автоматической инициализации плагинов, поэтому для инициализации календаря к текстовому полю достаточно добавить класс ‘datepicker-here’ и все заработает.

Опции можно передать через data атрибуты.

Кастомизируемое содержимое ячейки

В Air Datepicker есть возможность полностью изменять содержимое ячеек. Это позволяет добавлять, например, названия событий или какой-то вспомогательный контент в ячейки. Для этого нужно использовать опцию onRenderCell():

Заключение

В итоге я могу сказать, что получил неплохой опыт, улучшил свои навыки работы с датой и написания документации. Календарь получился небольшим: всего 20kb (минифицированный js файл), но достаточно функциональным, по крайней мере для меня он свои задачи выполняет. Буду рад, если он или эта статья кому-нибудь поможет.

39 CSS Calendars

C ollection of free HTML and CSS calendar code examples: simple, responsive, event, etc. Update of June 2018 collection. 4 new items.

Author

• Olivia Ng
• February 5, 2019

Links

Made with

• HTML (Pug) / CSS (SCSS)

About the code

CSS Grid: Calendar

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Author

• mrnobody
• November 18, 2018

Links

Made with

• HTML / CSS (SCSS)

About the code

CSS Calendar UI Design

HTML calendar UI design with CSS Grid.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

• Eliza Rajbhandari
• December 10, 2018

Links

Made with

• HTML / CSS (SCSS)

About the code

Calendar Mobile App UI

Calendar mobile app UI in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

• Mert Cukuren
• September 6, 2018

Links

Made with

• HTML (Pug) / CSS (SCSS)

About the code

CSS Grid Calendar

HTML calendar with CSS Grid.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

• Ahmed Nasr
• May 25, 2018

Links

Made with

• HTML / CSS (SCSS)

About the code

Calendar Plan — Tasks Events App

Author

• BradleyPJ
• April 22, 2018

Links

Made with

• HTML / CSS (SCSS)

About the code

Light & Dark Calendar

Here is a light and dark version of a calendar planner page.

Author

• AdriГ
• December 19, 2017

Links

Made with

• HTML
• CSS

About the code

CSS Grid Calendar

HTML and CSS grid calendar.

Author

• jpag
• October 25, 2017

Links

Made with

• HTML
• CSS/LESS
• JavaScript (jQuery.js)

About the code

Simple Calendar

Clean and modern simple calendar.

Author

• yumeeeei
• August 6, 2017

Links

Made with

• HTML
• CSS/Stylus
• JavaScript (jQuery.js)

About the code

Duotone Calendar

Duotone image with SVG filter.

Author

• Antoinette Janus
• June 12, 2017

Links

Made with

• HTML (Pug) / CSS (SCSS) / JavaScript

About the code

Fluent Design: Calendar

Based on the depth video concept from Microsoft’s Fluent Design.

Author

• Alex Cramer
• June 8, 2017

Links

Made with

• HTML
• CSS

About the code

Calendar UI

Calendar with events in HTML and CSS.

Author

• Jamie
• May 31, 2017

Links

Made with

• HTML
• CSS
• JavaScript

About the code

Calendar Mockup

CSS only calendar mockup.

Author

• Tom
• May 15, 2017

Links

Made with

• HTML
• CSS

About the code

Windows Fluent Design Calendar

Inspired by the preview of the Microsoft Fluent Design System calendar. I thought it looked really pretty so I made it for the web.

Author

• Davide Francesco Merico
• May 11, 2017

Links

Made with

• HTML/Pug
• CSS/SCSS

About the code

Calendar UI

Monthly calendar UI in HTML and CSS.

Author

• Jocelyn
• April 11, 2017

Links

Made with

• HTML
• CSS/SCSS
• JavaScript

About the code

Calendar

Simple calendar cards.

Author

• Nikita Dubko
• March 24, 2017

Links

Made with

• HTML/Pug
• CSS/SCSS
• JavaScript (jQuery.js)

About the code

Dynamic Data Calendar

Calendar with dynamic data.

Author

• Andreas Pihl Jrgensen
• March 19, 2017

Links

Made with

• HTML
• CSS
• JavaScript (jQuery.js)

About the code

Parallax Flipping Calendar

Flipping calendar with HTML, CSS and little JS.

Demo Image: Calendar

Calendar

A calendar that tells you how many events happened on a particular date.
Made by Benjamin
March 31, 2017

Demo Image: It’s A Calendar Sort Of Thing

It’s A Calendar Sort Of Thing

Calendar with nice animations & interactions.
Made by Jack Thomson
March 19, 2017

Demo Image: Infinite Calendar

Infinite Calendar

A liquid & ‘light-weight’ calendar. There’s no libraries in this exercise, it’s really hand-crafted.
Made by Tadaima
January 31, 2017

Demo Image: Responsive Calendar

Responsive Calendar

Flexbox responsive calendar.
Made by Gabi
January 3, 2017

Demo Image: Calendar Mockup

Calendar Mockup

Very quick mockup of calendar.
Made by Dan Couper
October 29, 2016

Demo Image: Calendar

Calendar

Calendar with HTML, CSS and JS.
Made by Dali
October 18, 2016

Demo Image: Circular Calendar Display

Circular Calendar Display

A circular calendar and clock display, with and added weather and daily activity widget mock-ups.
Made by Matthew Juggins
September 25, 2016

Demo Image: React Date Range Picker

React Date Range Picker

Date picker in React, you can select a range of dates.
Made by Rob Vermeer
August 29, 2016

Demo Image: Calendar In ReactJs

Calendar In ReactJs

Calendar using ReactJs (beginner level).
Made by Ricardo Barbosa
August 16, 2016

Demo Image: Date And Time Picker

Date And Time Picker

Date and time picker directive.
Made by Jarom Vogel
June 10, 2016

Demo Image: Calendar App

Calendar App

This is a calendar application. It allows for browsing dates and selecting individual dates. You can schedule events on future days.
Made by Joey Lea
May 31, 2016

Demo Image: jQuery Datepicker Summer Vibe

jQuery Datepicker Summer Vibe

Simple styling of the jQuery UI datepicker.
Made by HГҐvard Brynjulfsen
May 13, 2016

Demo Image: Calendar And Clock

Calendar And Clock

Calendar and clock with HTML, CSS and JavaScript.
Made by mselmany
February 17, 2016

Demo Image: CSS-only Colorful Calendar Concept

CSS-only Colorful Calendar Concept

Click on the arrows (when enabled) and the highlighted date to see the effect. You can also go back in your browser to navigate between scenes, or click the left arrow in the schedule view. Works in all modern browsers.
Made by David Khourshid
November 9, 2015

Demo Image: Calendar

Calendar

Calendar with HTML, CSS and JavaScript.
Made by Mark
November 8, 2015

Demo Image: Flexbox Calendar

Flexbox Calendar

Responsive flexbox calendar with retina images.
Made by Dudley Storey
August 30, 2015

Demo Image: Haml Calendar

Haml Calendar

HTML and CSS calendar.
Made by Katy DeCorah
August 6, 2015

Demo Image: Calendario

Calendario

A flexible calendar plugin.
Made by Romswell Roswell Parian Paucar
May 22, 2015

Demo Image: Bootstrap Compatable Calendar

Bootstrap Compatable Calendar

Bootstrap calendar.
Made by Bill Barry
September 25, 2014

Demo Image: Event Calendar Widget

Event Calendar Widget

A nice looking calendar with nice transistions.
Made by Paul Navasard
February 16, 2014

Demo Image: Datepicker();

Datepicker();

Datepicker in HTML, CSS and JavaScript.
Made by White Wolf Wizard
September 8, 2013

Demo Image: Calendar

Calendar

Calendar with HTML, CSS and JavaScript.
Made by B8bop
September 5, 2013

Простой JavaScript календарь выбора даты (datepicker)

Описание

Календарь выбора даты, также называемый datepicker, написан на JavaScript. Он полностью автономен, т.е. работает без jQuery или каких-либо дополнений, с легкость интегрируется в любой проект. Требования IE 10+

Достаточно подключить скрипт и стиль отображения:

Затем добавить в тег:

или вызвать для всех тегов с CSS классом .datepicker:

Скачать

Описание функций и их параметров

Общая функция xCal(object, delim, order)

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

Первый параметр object

В качестве первого параметра можно передавать объект или его ID: xCal(this) или xCal(‘date2’). При отсутствии каких-либо параметров календарь закрывается. Для получения текущей даты функцию можно вызвать со значением первого параметра равным двойке alert(xCal(2)). Пример.

Второй и третий параметр

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

Примеры использования функции xCal():

Таблица параметров календаря доступных для установки

Включение календаря для всех элементов одного класса. Функция xCal.all(className, delim, order)

Функция xCal.all(className, delim, order) предназначена для прикрепления календаря ко всем полям с CSS классом, указанном в первом параметре, className. Эта функция имеет такие же параметры как и у xCal(). Отличается только первым параметром, который должен быть именем CSS класса и является обязательным.

Пример использования функции xCal.all():

Установка умолчаний. Функция xCal.set(options)

Функция xCal.set(options) предназначена для установки значений по умолчанию.

Пример использования функции xCal.set():

Примеры использования

Пример 1

Дата выбрана. Кликните по полю с датой для вызова календаря:

Пример 2

Если поле пустое, то календарь предложит текущую дату. В этом примере также включено автоматическое открытие календаря при наведении курсора на поле:

Пример 3

Пример 4

Тоже самое, что и в предыдущем примере, но в обратном порядке и с разделителем тире:
Открыть календарь, Очистить поле, Текущая дата

Пример 5. Использование xCal.all()

В этом примере события назначаются для всех элементов с классом .datepicker:

Пример 6

Функцию можно применить к любому тегу. Последний результат всегда будет содержаться в xCal.value.
Нажмите ТУТ или ЗДЕСЬ и последний выбранный результат можно всегда посмотреть по этой ссылке.
А это результат только для «ТУТ«.

Пример 7. Использование xCal.set()

Можно динамически менять умолчания параметров. Для смены языка во всех приведенных примерах выше, кроме случаев, где явно указано в передаваемом параметре, нажмите на поле:

Пример 8. AJAX

Использование своих функций. Данный пример подходит для AJAX. Замените «alert» на свою функцию:

✖Получай Биткоины пассивно!
Заставь время работать на себя!

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

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

Создать календарь html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Расскажите друзьям

Комментарии — 12

Супер!
Молодца! Так держать! Ресурс то что нужно. Посещаю постоянно. # 10 апреля 2009 Andreo Классно! Теперь написать бэкенд и можно использовать. # 10 апреля 2009 Barttos Спасибочки за листинг # 11 апреля 2009 Джес отличная штука, +100 автору за то, что еще и демонстрацию прикрутил. # 13 апреля 2009 AngelOfFate Очень здорово. Попробую использовать для расписания матчей футбольных турниров. # 14 апреля 2009 zenith Было бы здорово сделать возможность выделять несколько ячеек сразу же. # 14 апреля 2009 CuamckuyKot Спасибо за спасибо, гайс.

Мультивыделение сделаю. # 15 апреля 2009 Евгений спасибо, только зачем кнопка «Обработать» с выпадаюшим куском кода? # 12 мая 2009 Геннадий Отличный скрипт.
Вопрос — а как сделать так, чтобы при нажатии кнопки информация заносилась в xml файл? # 3 июня 2010 gerion Здорово =) А можно как-нибудь переделать это расписание в календарь событий? # 6 ноября 2010 HFlame Читайте подробнее про jQuery removeClass. # 18 мая 2014 wdtime Здравствуйте! Передо мной стоит такая задача:
Таблица расписания имеет по строкам часы 8, 9, 10 и т.д., по столбцам номера аудиторий. Вопрос такой: не смотря на то, что в таблице целые часы, хотят иметь возможность , при создании нового мероприятия, указывать временной промежуток где могут быть часы с минутами и чтобы этот промежуток закрашивался в таблице так: если, допустим, с 8:15 — 12:30 занятие, то ячейка, где 8:00, закрашивалась не полностью, а чуть меньше (отсчитывая как бы 15 минут после 8 часов), далее закрашиваются 9, 10, 11 12 часов полностью и половина ячейки 13 часов. # 30 июля 2014 Мария