Сегодня мы представляем вам подборку плагинов, которые позволяет вам с легкостью создавать календари с возможностью выбора даты, большая часть из которых разработаны на jQuery и jQuery UI (пользовательский интерфейс).
Почти все эти календари представляют собой полноценную платформу с хорошим функционалом, но некоторые придется улучшать и дорабатывать, но иногда это даже в плюс, так как в большинстве случаев вам, так или иначе, надо подгонять внешний вид под дизайн сайта.
Эта статья о том, как можно создать календарь в стиле приложения для iPhone.
DatePicker позволяет пользователям выбирать текущую дату из выпадающего меню. Вам не нужно заботиться о форматах даты, потому что они всегда корректны за счет формы выбора.
Calendar – это класс javascript, с помощью которого можно добавить доступную и ненавязчивую форму выбора даты. Этот класс представляет собой сборку из нескольких элементов, которые зачастую применяются веб-разработчиками и уже были полностью переделаны командой MooTools. В него постарались включить все нужные свойства, но сохранить максимально маленький размер. Для того чтобы ознакомиться с классом, посмотрите ссылки, представленные ниже.
Плагин представляет собой виджет календаря на jQuery с возможность отображения месяца. Вы можете выбрать, какой месяц нужно отображать, а по стандарту он будет отображать текущий месяц. Плагин отлично выполняет свою функцию, несмотря на то, что он состоит всего из 100 строчек кода javascript.
Компонент календаря, который очень просто модифицировать и изменить внешний вид.
Свойства:
* Создание любого количества месяцев на отдельный календарь
* Возможность отображения выходных и праздничных дней
* Начальная и конечная даты
* Изменение внешнего вида посредством CSS
* Возможность устанавливать сразу несколько календарей на странице
* Оптимизация для лучшей производительности
Этот гибкий и простой всплывающий календарь ориентирован на работу во всех браузерах. Вы можете полностью изменять и модифицировать его относительно языков, дат и цветов. Всплывающее окно отображает месяц в течение нескольких лет.
Можно также, опционально, ввести дату и вам отобразится нужный месяц. Год можно отображать как в формате двух чисел, так и четырех, а месяц можно отобразить цифрами или названием. Вы также можете отобразить любую дату или день посредством javascript.
Этот виджет отлично подойдет для комбинирования технологий со стороны сервера для дальнейшей разработки профессионального приложения.
Вы без труда сможете интегрировать компонент DatePicker в свое веб-приложение.
Свойства:
* Возможность отображения вместе с другими элементами на странице
* Несколько календарей в одном компоненте
* Возможность выделения определенных дат
* Возможность изменения внешнего вида посредством CSS
* Возможность локализировать названия дней и месяцев
* Возможность задать собственный день начала недели
* Возможность интеграции в окно браузера
Calendar System представляет собой простой календарь.
Tigra Calendar представляет собой кросс-браузерный javascript-элемент, который предоставляет возможность выбора дат в выпадающих меню посредством форм HTML.
Одно приложение Plans сможет поддерживать несколько календарей. Также есть возможность отображать информацию в разных календарях друг с другом. Каждый календарь управляется отдельно (уникальный пароль, отдельные настройки, разный внешний вид).
Несколько календарей, работающих в пределах одного приложения Plans можно использовать на разных веб-сайтах. В приложении задействована очень гибкая модель рекуррентных событий.
Приложение поддерживает несколько языков. Вы может вручную выставить день начала недели. Даты можно отображать в формате аббревиатур (mm/dd/yy, dd/mm/yy и так далее). В приложении можно задействовать данные из отдельных файлов или базы данных.
jQuery UI Datepicker представляет собой плагин с широкими возможностями по настройке, с помощью которого вы можете добавлять формы выбора даты на ваши веб-страницы. Вы также можете редактировать внешний вид плагина и используемый язык, указывать конкретные промежутки времени, а также без труда добавлять дополнительные кнопки навигации.
По стандарту, календарь отображается в виде небольшого наложения посредством onfocus и автоматически закрывается с эффектом onblur, или после того, как дата уже выбрана. Вы можете без труда внедрить календарь в свою веб-страницу посредством div или span.
Вы можете управлять календарем с помощью горячих клавиш:
* page up/down – предыдущий/следующий месяц
* ctrl+page up/down – – предыдущий/следующий год
* ctrl+home – текущий месяц или открыть календарь, если он закрыт
* ctrl+left/right – – предыдущий/следующий день
* ctrl+up/down – – предыдущая/следующая неделя
* enter – подтвердить выбранную дату
* ctrl+end – закрыть без сохранения даты
* escape – просто закрыть календарь
Данный элемент позволяет вам выбирать дату посредством простой панели слайдеров. Путем перетаскивания ползунка по временной шкале, вы можете незамедлительно менять дату. Более того, когда пользователь хочет отобразить другие даты, ползунки автоматически возвращаются на места.
FullCalendar представляет собой плагин jQuery, который позволяет вам создать полномасштабные календари с возможностью перетаскивания. В плагине используется AJAX, и вы с легкостью сможете отформатировать его под нужный формат (также есть специальное дополнения для Google Calendar).
Плагин предоставляет возможность выбора и перетаскивания событий по датам.
* полное управление посредством клавиатуры
* поддержка различных форматов отображения и разделителей
* ненавязчивый
* возможность оформления посредством css
* возможность отображения конкретных дней недели
* гибкая возможность локализации
* возможность подсветки определенных дней недели
* бесплатное распространение (по лицензионному соглашению CC)
Свойства:
* работает с одним или более элементом ввода текста input type="text"
* возможность подсветки определенных дат
* автоматически закрывается после выбора даты (а также при нажатии кнопок сегодняшней даты или закрытия)
* возможность быстрых переходов посредством поля "select"
* автоматически скрывает кнопки, если больше некуда перелистывать
А также многое другое…
Данный компонент представляет собой простенькую форму выбора даты и календарь.
Свойства:
* возможность добавления языков
* возможность изменения текущей даты
* возможность прокрутки колесиком мыши
* наличие кнопок
Timeframe представляет собой протестированный бесплатный компонент, который работает на Github. Есть возможность указания даты «от» и «до».
Date / Time Picker представляет собой простой компонент выбора даты или времени. Для того, чтобы открыть календарь, просто кликните по иконке с правой стороны поля ввода.
Еще один пример простого компонента выбора даты. У календаря есть три требуемых положения: , и .
Плагин превращает форму выбора даты jQuery UI в интерактивный компонент, который разработан специально для выбора ряда дат. Это обновление .
|
jMonthCalendar представляет собой полноценный календарь с поддержкой событий. Вы можете просто выставить опции и события, и он сам сделает за вас все остальное. У плагина есть возможность модификации, которая позволит разработчику взаимодействовать с календарем, когда отображать смену месяцев, а также редактировать событие при клике по окошку оповещения. jMonthCalendar теперь также поддерживает события при наведении курсора мыши, а также триггер-параметр alert(); По стандарту, на каждое событие выставляет URL, который ведет к странице с подробной информацией.
VCalendar (Virtual Web Calendar) представляет собой бесплатное приложение веб-календаря для создания и управления событиями в он-лайн, в виде календаря, конечно же. Это отличное и бесплатное решение можно использовать для веб-сообществ и любых коммерческих или некоммерческих организаций. В отличие от других он-лайн календарей, VCalendar распространяется с исходным кодом на различных языках программирования: PHP, ASP и ASP.NET (C#). Это делается с целью добавления новых технологий в будущем.
In this example, our focus will be on creating a calendar component with HTML5 and CSS3 and later add some interactivity using javascript.
Calendars will be needed in websites whether just for information or when date input is needed. The user is always willing to see nice stuff.
We can create calendars with HTML5 and style them with CSS3, but that is just static. Most likely, you will want to make it interactive.
That is enabled by javascript (or its libraries) that can help you animate things and change views fast and easy. But lets start with html and css.
1. PrerequisitesThe following setup is required for you to achieve the results being explained.
1.1 Basic SetupGo ahead and create a new html file inside your project folder with its basic syntax:
Calendar Component
1.2 Get BootstrapBootstrap is a innovative and easy to use CSS framework that we will use mainly for its grid based structure.
In order to use it, just link the css and js files in the head section from their official links like below:
Calendar Component
2. Creating the CalendarBelow, you can see the step by step calendar creation. We will create the calendar first in html and then add the css.
2.1 HTMLThe html section is going to include the following basic structure:
1. A wrapper – this tag will wrap all the elements inside the calendar
2. A header – it will contain the month title and left and right navigation icons
3. A calendar-body – it will contain the weekdays row and the date rows.
4. A current-date – it will be a section in the bottom of the calendar showing the actual date.
We will need 1 row for the weekdays and 5 rows for date rows. The structure will look like this:
Nothing shows in the browser yet. Now that we’ve created the rows, lets add the following components:
1. Navigation Icons – there is a class on bootstrap for these icons: glyphicon glyphicon-chevron-left/right
2. Add the month that the calendar is showing in the header section wrapped inside a p tag
3. Devide the rows into 7 columns with bootstrap’s class: col-xs-1 and add weekdays inside p tags
4. Use the same col-xs-1 to dates but wrap the paragraph inside anchor tags, they need to be clicked
With the code above added, our html now looks like this:
January 2015
Monday, January 26Well, now we’ve got a view in the browser:
Don’t worry about the right nav icon going far, we’ll fix that with css. Also notice that I have added an inactive class to some dates.
That is beacuse those dates are not from the current month and need to be styled a bit different (i.e a lighter color than the rest).
2.2 CSSHere comes the fun part, styling is what gives elements a shape and a overall look. Lets start with these universal attributes:
Body { font-family: "Montserrat"; /* just a cutsom font */ } a:-webkit-any-link{ text-decoration:none !important; /* do not underline links */ color: black; !important; /* give links a default color */ }
For the navicons to show right add pull-left and pull-right next the the other classes:
Now give the basic stucture elements some styling attributes:
Wrapper { margin: 10em; /* just a temp margin */ border: 0.1em solid #ccc; /* wrap the calendar inside a box */ width: 20em; /* define a width for the box */ height: 24em; /* define a height for the box */ box-shadow: 0.1em 0.2em 0.8em #ccc; /* box shadow for better view */ } .header { height: 4em; /* define a height for the header */ background-color: #3f51b5; /* give the header a background color */ color: white; /* give the header a text color */ text-align: center; /* center the text inside the header */ } .calendar-body .col-xs-1 { width: 2.5em; /* give each column a fixed width */ margin-left: 0.2em; /* have some space between columnd */ text-align: center; /* align text in the center */ }
The view of our calendar became:
Styling – Part 1
Ok, next add attributes to individual elemtents to enhance thier look inside the calendar: .header p { padding-top: 1.2em; /* vertical centering */ text-transform: uppercase; /* all caps text */ } .header span { padding: 1.3em; /* vertical and horizontal centering icons */ } .inactive { /* inactive dates get a light gray text color */ color: #ccc; } .weekdays { padding: 1em; /* giving weekdays some space around */ } .dates { padding: 0.2em 1em 0.2em 1em; /* giving dates some space */ } .line { /* a gray line separator */ height: 0.1em; border: 0.1em solid #EEEEEE; } .current-date { /* styling the current date section */ text-transform: uppercase; text-align: center; padding: 0.7em; } .calendar-body .row .col-xs-1 p:hover { color: #4778a6; /* hover state on all dates */ }
And we finally have a pretty styled and moder looking calendar. Look at this:
Simple as that, looks like we’re done. Before concluding this example lets see a pre-made calendar from http://demos.telerik.com/ where the calendar has full interactivity enabled by jQuery library.
3. Interactivity? Yes, with jQuery!In this section, I intend to let you know calendars can and should be fully interactive with date/month/year choosing.
The example below is just for demonstration, it is a template on the internet that has interactive behaviour.
html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; } Kendo UI Example for WCG $(document).ready(function() { // create Calendar from div HTML element $("#calendar").kendoCalendar(); });
Everything is in there, including html, css and js, but css and js are linked from the internet.
The example for which the code is above would look like this:
Interactive Calendar – jQuery
4. ConclusionEven though calendars can be easily created and styled in html and css, when it comes to interactivity, you’ll need a more professional level of coding in javascript if you are willing to do it fully customized from scratch.
However feel free to get ready jQuery code to animate things a little bit, while you can have your own html and css.
Note that you might also need to put attributes like value or name to your elements when considering a backend supportive calendar, where information is submitted and needs to be sent somewhere.
Оформление календаря
На курсах по JavaScript мы иногда затрагиваем тему построения HTML-календаря. Каркас календаря запрограммировать достаточно быстро, а вот на оформление CSS-стилями время тратить не хочется, потому было решено заранее прописать эти стили отдельной заметкой в блоге для дальнейшего быстрого применения. Пусть у нас есть календарь на июль 2084 года, сверстанный в HTML (фидл). Связь JavaScript с календарем обсудим в какой-нибудь из дальнейших заметок, сейчас лишь заметим, что заполнять подобный календарь вручную (название месяца в HTML-элементе caption, дни недели в th, дни месяца в td), без программирования, на практике никто не будет.
Календарь HTML и CSS-стилиДобавим правила для окраски дней месяца (со свойством background:linear-gradient(…)), классы для выходного дня и текущего дня месяца. Чтобы посмотреть работу классов.holyday и.today , нужно прописать их значения в соответствующих ячейках таблицы. Если речь пойдет только о выходных суббота-воскресение, то можно обойтись без классов, используя селекторы nth-child(…).
Calendar{ border:1px solid #bbb; display: inline-block } .calendar table{ empty-cells: hide; } .calendar caption{ padding: 3px; background: linear-gradient(to bottom,#ddd 10%, #bbb); } .calendar td{ padding: 2px 6px; text-align: center; border:1px solid #ccc; background: linear-gradient(to bottom,#fff 10%, #ddd); border-radius:0 0 3px } .calendar td:hover{ border:1px solid #888; } .calendar .holiday{ background: linear-gradient(to bottom,#fff 10%, #ffc); } .calendar .today{ font-weight:600; border:1px solid #888; }
Обозначения дней недели («Пн», «Вт», «Ср», «Чт», «Пт», «Сб», «Вс»), месяцев («Январь», «Февраль», «Март», «Апрель», «Май», «Июнь», «Июль», «Август», «Сентябрь», «Октябрь», «Ноябрь», «Декабрь») можно взять на сайте локализации виджета jQuery Datepicker (https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-ru.js), т.е. уже готового календаря с использованием JavaScript и библиотек jQuery и jQuery UI (подробней о
Последнее обновление: 08.04.2016
Для работы с датами и временем в HTML5 предназначено несколько типов элементов input:
datetime-local : устанавливает дату и время
date : устанавливает дату
month : устанавливает текущий месяц и год
time : устанавливает время
week : устанавливает текущую неделю
Например, используем поле для установки даты:
Форма ввода в HTML5
Имя:
Дата рождения:
Отправить
И при вводе в поле для даты будет открываться календарик:
Правда, здесь надо отметить, что действие этого элемента зависит от браузера. В данном случае используется Google Chrome. В последних версиях Opera элемент не будет сильно отличаться. А вот в Microsoft Edge элемент будет выглядеть так:
Применение остальных элементов:
Форма ввода в HTML5
Неделя:
Дата и время:
Месяц:
Время:
Отправить
При использовании этих элементов также надо учитывать, что Firefox поддерживает только элементы date и time , для остальных создаются обычные текстовые поля. А IE11 и вовсе не поддерживают эти элементы.
В преддверии нового года возникла весьма тривиальная задача — сделать сайт-календарь, где для каждого месяца необходимо было вывести свой календарь на месяц. Первым этапом решения задачи — стал поиск готовых решений. После перебора десятка приведенных в интернете решений выбор был сделан. Какие-то версии и вовсе оказались нерабочими, какие-то слишком громоздкими — их пришлось бы изрядно «попилить», чтобы получить требуемый результат. Итак, рассмотрим как написать простой календарь на php.
Основа скрипта была найдена на просторах интернета, ошибки были исправлены, кое-что было доделано, в частности добавлена функциональность выделения выходных дней отдельным css-классом.
Реализация календаря на месяц на чистом PHP без использования mySQL, jQuery и т.д. приведена ниже:
На вход функция draw_calendar получает порядковый номер месяца и год. Результатом исполнения функции является html-код календаря на заданный месяц. Использовать вышеприведенную функцию несложно, и сможет даже новичок в веб-разработке. Пример ниже выведет календарь на январь 2016 год.
Январь "16
Вывод подписи к календарю, включающей в себя название месяца и год, намеренно не был включен в функцию, чтобы ее можно было свободно изменять, а возможно и вовсе убрать.
Php-календарь на годИз приведнной выше функции можно легко получить php-скрипт календаря на год, причем на любой. Для этого достаточно в цикле перебрать все месяцы и для каждого из них вызвать функцию вывода календаря на месяц.
Однако при этом потребуется завести массив со списком названий месяцев на русском языке, поскольку получить названия месяцев из php можно лишь на английском.
Код в таком случае будет следующим:
"16
Примеры приведенные в данном посте вы можете скачать с гитхаба .