Календарь

37 CSS Calendars

C ollection of free HTML and CSS calendar code examples: simple, responsive, event, etc. Update of March 2019 collection. 6 new items.

Related Articles

1. jQuery Calendars
2. Tailwind Calendars

Author

Links

Made with

About a code

CSS Grid Advent Calendar

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

Author

Links

Made with

About a code

CSS Grid: Advent Calendar

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

Author

Links

Made with

About a code

Calendar UI

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

Author

Links

Made with

About a code

Calendar

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

Author

Links

Made with

About the code

CSS Calendar UI Design

HTML calendar UI design with CSS Grid.

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

Author

Links

Made with

About the code

Calendar Mobile App UI

Calendar mobile app UI in HTML and CSS.

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

Author

Links

Made with

About the code

Calendar Plan — Tasks Events App

Author

Links

Made with

About the code

Light & Dark Calendar

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

Author

Links

Made with

About the code

Simple Calendar

Clean and modern simple calendar.

Author

Links

Made with

About the code

Duotone Calendar

Duotone image with SVG filter.

Author

Links

Made with

About the code

Fluent Design: Calendar

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

Author

Links

Made with

About the code

Calendar UI

Calendar with events in HTML and CSS.

Author

Links

Made with

About the code

Calendar Mockup

Author

Links

Made with

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

Links

Made with

About the code

Calendar UI

Monthly calendar UI in HTML and CSS.

Author

Links

Made with

About the code

Calendar

Author

Links

Made with

About the code

Parallax Flipping Calendar

Flipping calendar with HTML, CSS and little JS.

Calendar

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

It’s A Calendar Sort Of Thing

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

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

Calendar

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

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

React Date Range Picker

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

Calendar In ReactJs

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

Date And Time Picker

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

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

jQuery Datepicker Summer Vibe

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

Calendar And Clock

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

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

Calendar

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

Haml Calendar

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

Calendario

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

Author

Источник

Календарь

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

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

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

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

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

       
Выберите дату: 

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

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

       
Выберите дату: 

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

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

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

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

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

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

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

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

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

       
Укажите месяц: 

Источник

Code html for calendar

Этот виджет календаря не требует внешних библиотек, поскольку он написан исключительно на JavaScript, CSS и HTML. Из внешних источников используется только Font Awesome CSS для клавиш навигации, но при желании их тоже можно заменить на собственные.

Структура HTML

В HTML загрузите Reset CSS , чтобы очистить форматирование HTML-элементов в браузере по умолчанию. Аналогичным образом загрузите Font Awesome CSS для значков, добавив следующие ссылки CDN в тег заголовка вашей веб-страницы.

Нам нужен элемент div , в котором календарь будет отображаться динамически. Создайте элемент div с именем класса calendar-wrapper , разместите кнопки смены месяца «следующий/предыдущий» и элемент div с идентификатором divCal .

Не забудьте добавить ссылку на будущий файл .js , где будет основной функционал.

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

Создание стилей CSS

После создания оболочки в HTML пришло время настроить макет календаря. Выберите класс calendar-wrapper и определите его ширину, поля, отступы и свойства границы следующим образом. Вы можете установить собственный цвет фона по вашему выбору.

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

Класс not-current для элемента td указывает отключенные даты в календаре. Если вы хотите скрыть эти даты, вы можете использовать свойство видимости CSS со «скрытым» значением.

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

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

#btnPrev < float: left; margin-bottom: 20px; >#btnPrev:before < content: '\f104'; font-family: FontAwesome; padding-right: 4px; >#btnNext < float: right; margin-bottom: 20px; >#btnNext:after < content: '\f105'; font-family: FontAwesome; padding-left: 4px; >#btnPrev, #btnNext

Также вы можете определить стиль наведения для кнопок «следующая/предыдущая».

#btnPrev:hover, #btnNext:hover

Добавляем JavaScript

На этом этапе мы можем перейти к главному и добавить функцию JavaScript календаря в свой проект перед закрытием тега body .

var Cal = function(divId) < //Сохраняем идентификатор div this.divId = divId; // Дни недели с понедельника this.DaysOfWeek = [ 'Пн', 'Вт', 'Ср', 'Чтв', 'Птн', 'Суб', 'Вск' ]; // Месяцы начиная с января this.Months =['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']; //Устанавливаем текущий месяц, год var d = new Date(); this.currMonth = d.getMonth(); this.currYear = d.getFullYear(); this.currDay = d.getDate(); >; // Переход к следующему месяцу Cal.prototype.nextMonth = function() < if ( this.currMonth == 11 ) < this.currMonth = 0; this.currYear = this.currYear + 1; >else < this.currMonth = this.currMonth + 1; >this.showcurr(); >; // Переход к предыдущему месяцу Cal.prototype.previousMonth = function() < if ( this.currMonth == 0 ) < this.currMonth = 11; this.currYear = this.currYear - 1; >else < this.currMonth = this.currMonth - 1; >this.showcurr(); >; // Показать текущий месяц Cal.prototype.showcurr = function() < this.showMonth(this.currYear, this.currMonth); >; // Показать месяц (год, месяц) Cal.prototype.showMonth = function(y, m) < var d = new Date() // Первый день недели в выбранном месяце , firstDayOfMonth = new Date(y, m, 7).getDay() // Последний день выбранного месяца , lastDateOfMonth = new Date(y, m+1, 0).getDate() // Последний день предыдущего месяца , lastDayOfLastMonth = m == 0 ? new Date(y-1, 11, 0).getDate() : new Date(y, m, 0).getDate(); var html = ''; // Запись выбранного месяца и года html += ''; html += ''; html += ''; // заголовок дней недели html += ''; > html += ''; // Записываем дни var i=1; do < var dow = new Date(y, m, i).getDay(); // Начать новую строку в понедельник if ( dow == 1 ) < html += ''; > // Если первый день недели не понедельник показать последние дни предыдущего месяца else if ( i == 1 ) < html += ''; var k = lastDayOfLastMonth - firstDayOfMonth+1; for(var j=0; j < firstDayOfMonth; j++) < html += ''; > // Если последний день месяца не воскресенье, показать первые дни следующего месяца else if ( i == lastDateOfMonth ) < var k=1; for(dow; dow < 7; dow++) < html += '
' + this.Months[m] + ' ' + y + '
'; k++; > > // Записываем текущий день в цикл var chk = new Date(); var chkY = chk.getFullYear(); var chkM = chk.getMonth(); if (chkY == this.currYear && chkM == this.currMonth && i == this.currDay) < html += '
'; > else < html += '
'; > // закрыть строку в воскресенье if ( dow == 0 ) < html += '
'; k++; > > i++; >while(i '; // Записываем HTML в div document.getElementById(this.divId).innerHTML = html; >; // При загрузке окна window.onload = function() < // Начать календарь var c = new Cal("divCal"); c.showcurr(); // Привязываем кнопки «Следующий» и «Предыдущий» getId('btnNext').onclick = function() < c.nextMonth(); >; getId('btnPrev').onclick = function() < c.previousMonth(); >; > // Получить элемент по id function getId(id) 
Если вам нужно добавить больше функциональности, вы можете соответствующим образом изменить код. Назначение каждой переменной, объекта и функции прокомментировано, поэтому вы можете легко понять, что делает функция календаря.
 
Заключение
 
Ну вот мы наконец и перевернули наш календарь. Это довольно простой, но в то же время гибкий пример использования JS в веб-разработке. Виджет написан на чистом JS. При желании вы даже можете исключить из него Font Awesome CSS, чтобы убрать весь внешний код. Это никак не повлияет на функционал. Оформление можно сделать любым на усмотрение, а функционал календаря расширить, добавив собственные функции на ваше усмотрение.
 
Источник
 
   
 
Оцените статью
 
 
 
 
 
     
    
Вам также может понравиться
 
 
Ящики с усами python
pandas.plotting.boxplot# Make a box-and-whisker plot
 
 
 
Пример использования свойства CSS table-layout.
table-layout¶ Свойство table-layout определяет, как
 
 
 
Пример использования свойства CSS table-layout.
HTML Размеры таблицы HTML таблицы могут иметь разные
 
 
 
Пример использования свойства CSS table-layout.
table-layout¶ Свойство table-layout определяет, как
 
 
   
 
 
 
Правообладателям
 
Политика конфиденциальности
 
Контакты