Календарь на html с выбором даты. Как написать php календарь на месяц и на год? Календарь HTML и CSS-стили

Сегодня мы представляем вам подборку плагинов, которые позволяет вам с легкостью создавать календари с возможностью выбора даты, большая часть из которых разработаны на 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#). Это делается с целью добавления новых технологий в будущем.

Последнее обновление: 08.04.2016

Для работы с датами и временем в HTML5 предназначено несколько типов элементов input:

    datetime-local : устанавливает дату и время

    date : устанавливает дату

    month : устанавливает текущий месяц и год

    time : устанавливает время

    week : устанавливает текущую неделю

Например, используем поле для установки даты:

Форма ввода в HTML5

И при вводе в поле для даты будет открываться календарик:

Правда, здесь надо отметить, что действие этого элемента зависит от браузера. В данном случае используется Google Chrome. В последних версиях Opera элемент не будет сильно отличаться. А вот в Microsoft Edge элемент будет выглядеть так:

Применение остальных элементов:

Форма ввода в HTML5

При использовании этих элементов также надо учитывать, что Firefox поддерживает только элементы date и time , для остальных создаются обычные текстовые поля. А IE11 и вовсе не поддерживают эти элементы.

Одним из важных элементов на сайте является календарь, с помощью которого ваши пользователи могут отслеживать события, появления новых продуктов. Или просто читать записи или еще что только не придумаешь. Уделив несколько времени этому уроку, вы узнаете, как создать PHP скрипт календаря для своего сайта. Мы не будем ограничиваться только программированием, также обратим внимание на css и html структуру календаря. Одним словом сделаем все, от начала до конца!

CSS

Меньше слов, больше дела. Сразу же начнем из css стилей календаря. Ниже предоставленный код, совместим с проблемным браузером IE6.

/* календарь */ table.calendar { border-left:1px solid #999; } tr.calendar-row { } td.calendar-day { min-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; } td.calendar-day:hover { background:#eceff5; } td.calendar-day-np { background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; } td.calendar-day-head { background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; } div.day-number { background:#999; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; } td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }

PHP

Весь PHP код скрипта календаря, в основном базируется на одной функции, которая требует два параметра: желаемый месяц и год. Следует отметить, в средине функции, я оставил место для к базе данных. Если хотите, можете выводить необходимые события в сетку календаря. При написании этого скрипта, я использовал таблицы, вместо div блоков, так как они более практичны в случае, если один день будет пресыщен событиями.

За основу брался англоязычный скрипт календаря, поэтому предоставлю две версии: календарь в английском и русском стиле. Выбирайте, какой вам по душе! Разница только в PHP коде. CSS стили остаются прежними, для обеих вариантов.

PHP скрипт календаря в русском стиле

"; /* Заглавия в таблице */ $headings = array("Понедельник","Вторник","Среда","Четверг","Пятница","Субота","Воскресенье"); $calendar.= ""; /* необходимые переменные дней и недель... */ $running_day = date("w",mktime(0,0,0,$month,1,$year)); $running_day = $running_day - 1; $days_in_month = date("t",mktime(0,0,0,$month,1,$year)); $days_in_this_week = 1; $day_counter = 0; $dates_array = array(); /* первая строка календаря */ $calendar.= " < $running_day; $x++): $calendar.= " <= $days_in_month; $list_day++): $calendar.= " < 8): for($x = 1; $x <= (8 - $days_in_this_week); $x++): $calendar.= "
".implode("",$headings)."
".$list_day."

Июнь 2012

Результат

PHP скрипт календаря в английском стиле

Впринципе, незнаю зачем он вам. Но, вдруг кому-то нужен именно такой. Код практически тот же.

/* Функция генерации календаря */ function draw_calendar($month,$year){ /* Начало таблицы */ $calendar = "

"; /* Заглавия в таблице */ $headings = array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); $calendar.= ""; /* необходимые переменные дней и недель... */ $running_day = date("w",mktime(0,0,0,$month,1,$year)); $days_in_month = date("t",mktime(0,0,0,$month,1,$year)); $days_in_this_week = 1; $day_counter = 0; $dates_array = array(); /* первая строка календаря */ $calendar.= ""; /* вывод пустых ячеек в сетке календаря */ for($x = 0; $x < $running_day; $x++): $calendar.= ""; $days_in_this_week++; endfor; /* дошли до чисел, будем их писать в первую строку */ for($list_day = 1; $list_day <= $days_in_month; $list_day++): $calendar.= ""; if($running_day == 6): $calendar.= ""; if(($day_counter+1) != $days_in_month): $calendar.= ""; endif; $running_day = -1; $days_in_this_week = 0; endif; $days_in_this_week++; $running_day++; $day_counter++; endfor; /* Выводим пустые ячейки в конце последней недели */ if($days_in_this_week < 8): for($x = 1; $x <= (8 - $days_in_this_week); $x++): $calendar.= ""; endfor; endif; /* Закрываем последнюю строку */ $calendar.= ""; /* Закрываем таблицу */ $calendar.= "
".implode("",$headings)."
"; /* Пишем номер в ячейку */ $calendar.= "
".$list_day."
"; /** ЗДЕСЬ МОЖНО СДЕЛАТЬ MySQL ЗАПРОС К БАЗЕ ДАННЫХ! ЕСЛИ НАЙДЕНО СОВПАДЕНИЕ ДАТЫ СОБЫТИЯ С ТЕКУЩЕЙ - ВЫВОДИМ! **/ $calendar.= str_repeat("",2); $calendar.= "
"; /* Все сделано, возвращаем результат */ return $calendar; } /* СПОСОБ ПРИМЕНЕНИЯ */ echo "

June 2012

"; echo draw_calendar(6,2012);

Результат

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

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

На сервер данные передаются в формате ГГГГ-ММ-ДД, например, 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

Календарь

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