Компонент календаря на PHP
Существуют ситуации когда нельзя воспользоваться компонентом календаря созданном на JavaScript. Как правило, это те случаи когда требуется возможность не автоматизировать выбор даты в HTML форме, а возможность привязки неких произошедших или планируемых событий к датам в будущем. Это может быть количество новостей на определенную дату, количество заказанных товаров или совершенных покупок в интернет-магазине и т.д. Т.е. в таких случаях становится очевидной необходимость в наличии связи календаря с базой данных, для получения тех или иных сведений за определенную дату. Конечно, можно было бы создать календарь на JavaScript и для получения данных о наличии тех или иных событий использовать Ajax, но как показывает практика такое решение не является оптимальным. Поэтому данный компонент календаря будет разработан на PHP.
Настройки по стилям для календаря содержатся в файле calendar.css. А PHP скрипт находится в файле calendar.class.
Для работы с календарем, необходимо добавить в нужный вам модуль, следующий код:
Вы можете модифицировать исходный код данного календаря, исходя из ваших потребностей. Скачать компонент календаря можно здесь.
Комментариев: 10
Роман
26.11.2015 @ 10:49 пп
admin
26.11.2015 @ 11:06 пп
Вам нужно чтобы календарь принимал дату в формате: Y-m-d?
Роман
26.11.2015 @ 11:14 пп
admin
27.11.2015 @ 4:44 пп
Нужно вносить изменения минимум в следующие строки: 54, 56, 57, 60, 116. Изменения связаны с форматом даты.
Александр
22.09.2016 @ 5:57 пп
Возможно ли сделать так что бы в течении года в месяц проходило только определенное количество событий (20 за 30 дней, или 20 за 31 день в зависимости от количества дней в месяце), а на первое число нового месяца счетчик обнулялся?
admin
24.09.2016 @ 3:45 дп
Да, конечно. Вы можете доработать календарь.
Аркадий
14.11.2017 @ 8:55 дп
Здравствуйте, попытался использовать Ваш скрипт, заменил даты на текущие, но он категорически отказывается отмечать обозримые даты как ссылки, очень странно
Аркадий
14.11.2017 @ 12:46 пп
date_default_timezone_set(‘Europe/Moscow’);
В начале скрипта 😉
Isanamari
04.01.2018 @ 8:12 пп
Огромное спасибо за код! Он мне очень помог!
Но у меня возникла проблема, при запуске кода праздники почему-то не подчеркиваются( Подскажите в чем может быть проблема?
admin
05.01.2018 @ 3:39 пп
Календарь (выбор даты) в форме отправки с сайта
на почту соответсвенно все приходит так:
От кого: мое имя
Телефон: 123456789
Пользовались услугами: Да
E-mail клиента: klg@jj.ru
Выбранная услуга: Генеральная уборка квартиры/дома
Выбранный способ оплаты: Наличный расчет
Дополнения: g xdzg sdfg sdfsfdg sdf
Очень нужно добавить еще одно поле с календарем, чтоб можно было легко и непринужденно выбирать дату, на которую клиент хочет заказать услугу.
ну и чтоб это передавалось скрипту, и выводилось в отправленном сообщении.
календарь чтоб выглядел примерно вот так (это чтоб точно стало понятно, о чем прошу): http://ruseller.com/lessons/le. index.html
Выбор даты через календарь
Здравствуйте, можно ли, пожалуйста, сделать так, чтобы вылезал календарь на дате 01.01.2017, но.
Выбор даты или диапазона дат через календарь
Здравствуйте! Подскажите, как реализовать в запросе и в отчете диапазон даты и/или дату через.
Зачем нужен md5 в форме отправки сообщений с сайта
Взял готовую форму для отправки сообщений с сайта с прикреплением файла. Эта хоть сразу работает.
Реализовать в форме удобный выбор даты и времени
Доброго всем времени! Хочу реализовать в форме удобный выбор даты и времени. Есть несколько идей.
Решение
Здравствуйте.
Во-первых, хочу сказать спасибо. Это отличная форма, легко масштабируемая и простая.
Но есть у неё один недостаток. После отправки запроса, пользователь остаётся на странице mail.php, созерцать «Ваше сообщение успешно отправлено!» без автоматической переадресации и/или кликабельной ссылки для перехода обратно на сайт.
Как часть текста ссылку можно добавить, но при попытке сделать её кликабельной выдаёт ошибку.
Подозреваю, я просто упускаю какую-то мелкую деталь, из-за слабого знакомства с php.
Буду благодарен за любую помощь.
Но хотелось бы всё же добавить кликабельную ссылку, на всякий случай. Так что вопрос всё ещё актуален.
Кроме того, я чуток доработал форму, добавив обязательные для заполнения поля с помощью «required», и «подсказки» для заполнения с помощью «placeholder». Делюсь, вдруг кому пригодиться:
Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.
Календарь с выбором даты
Добрый день! Есть обычный календарь на HTML, нужно нажав на дату сделать, чтобы она.
Календарь с выбором даты
Пытаюсь сделать так что бы при выборе определенной даты в календаре появлялась надпись, но надпись.
Календарь (цикличность от даты)
Доброго времени суток знатоки php! Вопрос который меня мучает. Есть php,css,jq календарь на.
Календарь с возможностью закрашивания текущей даты
Приветствую всех! Я тут читала на форуме и нашла файл календарь хотела спросить как можно сделать.
Календарь на PHP (передача даты в Javascript)
Есть такой код. Но дата в него попадает с компьютера пользователя. При неправильной установке даты.
Календарь с возможностью бронирования даты и времени
Коллеги, молю о помощи. В общем, суть задачи в том, чтобы сделать календарь, и на каждую дату.
Air Datepicker, легкий и красивый выбор даты
Хочу поделиться с вами опытом написания компонента выбора даты для текстового поля.
Результат работы можно посмотреть здесь: Air Datepicker.
Введение
Работая над последним проектом, возникла необходимость добавить в приложение календарь с возможностью выбрать конкретный месяц. Все популярные плагины такую возможность предоставляют, мой выбор остановился на Zebra Datepicker — маленький, функциональный, все здорово. Но некоторых вещей все же не хватало:
Что касается громоздкой разметки, то к ней добавляется еще и табличная верстка, к ячейкам которой без лишних проблем не добавить position: relative;.
Ну и напоследок все же хочется, чтобы была возможность добавить небольшую анимацию, а из-за того, что многие популярные календари используют метод .show(), который задействует свойство display, плавные переходы (transition) добавлять трудоемко.
Разработка
Календарь я разделил на три части:
При наступлении каких-либо событий в теле или навигации, они сообщают об этом основной части, и календарь обновляет свое состояние в соответствии с этими событиями.
В этой задаче мне помогли getter’ы и setter’ы. Например, при изменении месяца просто присваивается новая отображаемая дата с измененным номером месяца, и внутри геттера вызывается метод перерисовки тела и навигации календаря. Несмотря на то, что можно было бы обойтись и без них, мне данный подход представляется более красивым. К примеру, вот так выглядит метод перехода к следующему месяцу, году или декаде, в зависимости от текущего вида:
В свою очередь внутри геттера происходит вызов отрисовки элементов календаря (упрощенно):
Точно так же происходит переход на другой вид, очень просто:
Формирование разметки
Основа для календаря выглядит следующим образом:
Без таблиц и намека на них. Ячейка является простым
Я не вижу особого смысла в разделении на ряды ячеек, так как это дополнительный ненужный элемент. Все даты идут друг за другом, у них задана относительная ширина, которая позволяет осуществлять переход на другую строку в нужный момент.
Вычисление общего количества дней в месяце
Чтобы сформировать корректный HTML, нужно знать сколько дней в месяце. Для этого используется небольшой трюк с передачей следующего месяца и нулевой даты (в Date() дата месяца начинается с единицы).
Формирование названий дней
Когда инициализируешь календарь, можно задавать день, с которого начинается неделя. Мне показалось интересным показать как можно сформировать разметку с названиями дней с помощью рекурсии:
Использование flexbox
Для позиционирования внутри календаря я использую flexbox. Он с легкостью позволяет отцентрировать контент внутри ячеек, будет по центру во всех браузерах (которые поддерживают эту технологию) и на разных ОС, в отличие от техники задания высоты и такого же междустрочного интервала.
Плюс он позволяет располагать элементы на равноудаленном расстоянии друг от друга всего одной строчкой:
Не нужно беспокоиться о разных значениях ширины, все будет рассчитываться автоматически.
Можно также упомянуть про кнопки «Сегодня» и «Очистить»:
Если их две, они занимают по 50% ото всей ширины, если одна, то она занимает всю ширину. Этого также можно достичь одной строкой:
Это означает, что элемент в случае необходимости может как увеличиваться в размерах, так и уменьшаться, но при этом размеры всех соседей будут одинаковые. Когда кнопка одна, она расширяется на всю ширину, когда две, они пропорционально уменьшаются и занимают по 50%, и т.д. Можно добавлять сколько угодно элементов, у всех них будут одинаковые размеры, и в сумме они будут занимать всю ширину родителя.
В итоге мы получаем легкость позиционирования контента как при использовании таблиц, но сохраняем при этом чистоту и валидность разметки.
Позиционирование
Позиция элемента задается двумя значениям:
Для того, чтобы добавить анимацию «подъезжания» к текстовому полю, я добавил вспомогательные классы, которые говорят с какой стороны нужно начинать анимацию. В данном случае этот класс выглядел бы как .-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
| Вид виджета | Описание | Код | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Скрипт простого календаря HTML | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||