Как сделать календарь в html

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 код, который позволит Вам реализовать на своем сайте календарь. Данный календарь будет способен рассчитать, сколько дней в месяце, и какими днями недели будут числа в указанных месяцах и годах.

Предлагаемый нами календарь содержит множество настроек, которые позволяют настраивать его отображение.

Чуть ниже Вы можете наблюдать пример работы предлагаемого Вам скрипта календаря:

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

script type = «text/javascript» >
var dDate = new Date ();
var cur_month = dDate . getMonth ();
var day_of_month = dDate . getDate ();
var cur_year = dDate . getFullYear ();
var Prev_Element = new Object ();
var bgcolor , webgcolor , wecolor , nwecolor , tbgcolor , ntbgcolor , sbgcolor ;

function fToggle_color ( el ) <
var toggle_col = «#ff0000» ;
if ( el . id == «cal_text» ) <
if ( el . color == toggle_col ) el . color = «» ;
else el . color = toggle_col ;
>
else if (( el . id == «cal_cell» ) || ( el . id == «today_cell» )) <
for (var i in el . children ) <
if ( el . children [ i ]. id == «cal_text» ) <
if ( el . children [ i ]. color == toggle_col ) el . children [ i ]. color = «» ;
else el . children [ i ]. color = toggle_col ;
>
>
>
>

function opted_day ( el ) <
if ( el . id == «cal_cell» ) <
if (! isNaN ( parseInt ( el . children [ «cal_text» ]. innerText ))) <
el . bgColor = sbgcolor ;
Prev_Element . bgColor = ntbgcolor ;
document . all . selected_date . value = parseInt ( el . children [ «cal_text» ]. innerText );
Prev_Element = el ;
>
>
>

function DaysInMonth ( iMonth , iYear ) <
var prev_date = new Date ( iYear , iMonth , 0 );
return prev_date . getDate ();
>

function build_cal ( iYear , iMonth ) <
var the_month = new Array();
the_month [ 0 ] = new Array( «Пн» , «Вт» , «Ср» , «Чт» , «Пт» , «Сб» , «Вс» );
the_month [ 1 ] = new Array( 7 );
the_month [ 2 ] = new Array( 7 );
the_month [ 3 ] = new Array( 7 );
the_month [ 4 ] = new Array( 7 );
the_month [ 5 ] = new Array( 7 );
the_month [ 6 ] = new Array( 7 );
var dCalDate = new Date ( iYear , iMonth — 1 , 1 );
var day_first = dCalDate . getDay ();
var iDaysInMonth = DaysInMonth ( iMonth , iYear );
var iVarDate = 1 ;
var i , d , w ;
if ( day_first == 0 ) day_first = 6 ;
else day_first = day_first — 1 ;

for ( d = day_first ; d 7 ; d ++) <
the_month [ 1 ][ d ] = iVarDate ;
iVarDate ++;
>
for ( w = 2 ; w 7 ; w ++) <
for ( d = 0 ; d 7 ; d ++) <
if ( iVarDate iDaysInMonth ) <
the_month [ w ][ d ] = iVarDate ;
iVarDate ++;
>
>
>
return the_month ;
>

function draw_cal ( iYear , iMonth , cell_width , cell_height , text_weight , ibg_col ,
iwebg_col , inwe_col , iwe_col , itbg_col , intbg_col , isbg_col ) <
bgcolor = ibg_col ;
webgcolor = iwebg_col ;
nwecolor = inwe_col ;
wecolor = iwe_col ;
tbgcolor = itbg_col ;
ntbgcolor = intbg_col ;
sbgcolor = isbg_col ;

var my_month ;
my_month = build_cal ( iYear , iMonth );
document . write ( »

» )
document . write ( »

wecolor + «‘>» + my_month [ 0 ][ 5 ] + «

» );
document . write ( »

» )
>
document . write ( «

» );
>
document . write ( «

» ) for ( d = 0 ; d 7 ; d ++) < if ( my_month [ w ][ d ]== day_of_month ) document . write ( »

+ tbgcolor + «‘w > + cell_width + «‘ height='» + cell_height + «‘style=’cursor:Hand;font-weight:» + text_weight + «‘ onMouseOver=’fToggle_color(this)’ + onMouseOut=’fToggle_color(this)’ onclick=’opted_day(this)’>» ); else document . write ( »

+ ntbgcolor + «‘w > + cell_width + «‘ height='» + cell_height + «‘style=’cursor:Hand;font-weight:» + text_weight + «‘ onMouseOver=’fToggle_color(this)’ + onMouseOut=’fToggle_color(this)’ onclick=’opted_day(this)’>» ); if (! isNaN ( my_month [ w ][ d ])) document . write ( » » + my_month [ w ][ d ]); else document . write ( » » ); document . write ( «

» )
>

function update ( iYear , iMonth ) <
my_month = build_cal ( iYear , iMonth );
Prev_Element . bgColor = ntbgcolor ;
if ((( iMonth — 1 )== cur_month ) && ( iYear == cur_year )) today_cell . bgColor = tbgcolor ;
else today_cell . bgColor = ntbgcolor ;

document . all . selected_date . value = «» ;
for ( w = 1 ; w 7 ; w ++) <
for ( d = 0 ; d 7 ; d ++) <
if (! isNaN ( my_month [ w ][ d ])) cal_text [(( 7 * w )+ d )- 7 ]. innerText = my_month [ w ][ d ];
else cal_text [(( 7 * w )+ d )- 7 ]. innerText = » » ;
>
>
>

Обращаем Ваше внимание на то, что текст скрипта приведен с переносами длинных строк, которые после копирования необходимо вновь написать в одну строку!

В том месте Вашей странички, где Вы планируете показывать данный календарь, добавьте следующие два кода:

form name = «c_fоrm» action = «#» style = «text-align: center;» >
input type = «hidden» name = «selected_date» value = «» >

select name = «sel_month»
onchange = ‘update(c_fоrm.sel_year.value, c_fоrm.sel_month.value)’ >
option value = «1» > Январь option >
option value = «2» > Февраль option >
option value = «3» > Март option >
option value = «4» > Апрель option >
option value = «5» > Май option >
option value = «6» > Июнь option >
option value = «7» > Июль option >
option value = «8» > Август option >
option value = «9» > Сентябрь option >
option value = «10» > Октябрь option >
option value = «11» > Ноябрь option >
option value = «12» > Декабрь option >
select >

select name = «sel_year»
onchange = ‘update(c_fоrm.sel_year.value, c_fоrm.sel_month.value)’ >
option value = «2013» > 2013 option >
option value = «2014» > 2014 option >
option value = «2015» > 2015 option >
option value = «2016» > 2016 option >
option value = «2017» > 2017 option >
option value = «2018» > 2018 option >
option value = «2019» > 2019 option >
option value = «2020» > 2020 option >
select >
form >

Еще раз обращаем Ваше внимание на то, что текст скрипта в некоторых местах приведен с переносами длинных строк, которые после копирования к себе на сайт необходимо вновь написать в одну строку!

И пусть большой размер приведенного кода Вас не пугает, он нисколько не будет тормозить работу Вашего сайта.

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 файл), но достаточно функциональным, по крайней мере для меня он свои задачи выполняет. Буду рад, если он или эта статья кому-нибудь поможет.

Компонент календаря на JavaScript

Чуть более двух лет назад мне понадобилось написать компонент календаря и прикрутить его к своей CMS. От идеи использования динамического календаря на PHP я сразу отказался. Поскольку нужен был календарь для вставки даты в поля формы. Первое, что я сделал, начал искать готовые решения. Естественно было и много и красивых. Но, как известно, есть пословица “Свой хлеб вкуснее”. И тут мне пришла идея о создании своего календаря. И написать его хотелось только с использованием DOM. В итоге получился календарик, не зависящий от браузеров и разный Фреймворков. Вот собственно который, я и выкладываю для использования.

Все настройки по стилям соответственно находятся в файле calendar.css. Сам скрипт в файле calendar.js.

Для использования компонента, добавляем в HTML код следующее:

1. Подключаем файл со стилями – ;
2. Далее подключаем файл со скриптом календаря – ;
3. Затем вставляем в уже предполагаемую ранее созданную форму, поле для даты и объявляем в нем необходимые атрибуты – .

При клике по полю input у вас должен открыться календарь, чтобы его закрыть еще раз кликните по полю input или выберите дату.

Для изменения разделителя даты, открываем файл calendar.js и ищем функцию showcalendar. В этой функции находим строку var ar = input.value.split(‘.’) и вместо точки прописываем свой разделитель. Для изменения формата даты, открываем все тот же файл calendar.js и ищем функцию generateCalendar. В этой функции находим строку input.value = d + ‘.’ + m + ‘.’ + date.getFullYear(). И изменяем формат вывода по своему требованию. Правда еще тогда придется изменить порядок следования параметров в строке date = new Date (ar[2], ar[1] — 1, ar[0]). Первым параметром должен быть год, вторым – месяц и третий параметр это число дня недели. В JavaScript месяца идут с 0 до 11, поэтому от номера месяца необходимо отнять единицу. Скачать компонент календаря можно здесь.

Комментариев: 19

Дмитрий
Фев 15, 2019 @ 14:48:24

Доброго дня, Авторы классного календаря!
Вы молодцы!

Скажите, пожалуйста, можно ли как-нибудь сделать запрет на выбор уже прошедшей даты?
Если да, то подскажите, пожалуйста, как.

С уважением,
Дмитрий

Дмитрий
Фев 15, 2019 @ 15:52:52

Доброго дня, Авторы классного календаря!

Возможно ли сделать закрытие выбора даты из календаря при клике куда угодно, а не только по дате или по полю выбора календаря?

С уважением,
Дмитрий

admin
Фев 15, 2019 @ 19:53:38

Добрый вечер!
Да, вы можете доработать как вам необходимо.

Дмитрий
Фев 16, 2019 @ 06:37:12

Доброго утра, Admin!

Скажите, пожалуйста:
1. как сделать запрет на выбор уже прошедшей даты?
2. как сделать закрытие выбора даты при нажатии клавиши мыши куда угодно на экране?

С уважением,
Дмитрий

admin
Фев 18, 2019 @ 12:30:00

1. как сделать запрет на выбор уже прошедшей даты?
—
Смотрите исходник и переписывайте нужно
2. как сделать закрытие выбора даты при нажатии клавиши мыши куда угодно на экране?
—
Имеется форма авторизации с id «logform» в некой CMS
при клике на область вне формы она скрывается
вот образец кода:

тоже самое можете сделать для календаря.

Добавить комментарий Отмена

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.