Сегодня мы представляем вам подборку плагинов, которые позволяет вам с легкостью создавать календари с возможностью выбора даты, большая часть из которых разработаны на 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#). Это делается с целью добавления новых технологий в будущем.
For making a best calendar with php script and code requires an expert who is efficient – can solve the problems easily and produce a quality software in a very less time. This software should be simple and easy that allows easy operating and maintained. No need to find the programmer with the only knowledge of functions, classes or any other specific solutions. These can be easily found online at any time.
Best calendar php script and codes are very easy to develop for a good programmer in a very less time. Codes should be written in a short means writing a less waste and keep on reusing codes. Codes should be written in a format that can be extended and maintained.
Providing calendar to your website will add a new look and can attract new customers to it. It will add an extra function and make it classier. You don’t need to do hard work for this. You can hire a good web designer or a freelancer to get your work done without any problem. It is the simple step to update your website and make it popular on search engines.
Eventro is a codeigniter based event management system. Its very easy to install with great minimalist design.
CIFullCalendar v2 is a server-side dynamic web application that is responsive to any layout of a viewing screen which uses CodeIgniter v2. The “Super Saiyan Fusion” power of CIFullCalendar allows users to organize, plan and share events to everyone. Simply, install it to your server and become a member then use the wonderful features by easily manipulating your events by dragging, dropping, resizing, clicking, touching, categorizing, linking and importing/exporting.
This calendar is for scheduling employees and/or spaces or you can use it as a multi-calendar. Amongst many options you can choose if only the admin can add items to the calendars/spaces, if a calendar is public, private or private for a group, if people have to login, if you want to see employees or spaces (shops, departments) in the separate calendars (left blocks), etc ….
This multipurpose AJAX Calendar can be used as event manager, reminder, planner, affiche, to-do list etc and will save You a lot of time for client-side scripting. It can be integrated in any type of Content Management Systems such as WordPress, Joomla, Drupal etc.
This is the second version and a complete solution for jQuery fullcalendar plugin. Most admin themes on themeforest use this plugin and they are static updated, with this solution now they can get dynamic.
eCalendar
We give you the opportunity to schedule your company’s events in a beautifully designed calendar. Not for a company? No problem, maybe you are a person who is looking to be better organized.
CIFullCalendar+ is a server-side dynamic web application that is responsive to any layout of a viewing screen. The “Super Saiyan Fusion” power of CIFullCalendar allows users to organize, plan and share events to everyone.
A complete JavaScript calendar, with the base jQuery Fullcalendar and a PHP/MySQL backend.
Insert, update, resize, drag and drop items fast and easy with ajax calls.
Need a powerful, web-based shared calendar where you can schedule or book your own appointments, as well as share with a group and invite others?
Caledonian PHP Calendar is a user friendly, php based and multi-user calendar/scheduling script. It has so many great features like timeline, multiple calendars, shared calendars, event reminder, multiple language support and so on.
Ajax Expense Manager is a great small web application to those that wants to manage their expenses and controls the money flow and current data to csv for other uses. With this application you can track real-time values by the month, week and day as well by categories.
This is a complete solution for jQuery fullcalendar plugin, multipurpose calendar and can be used on other calendars due to the PHP class. Most admin themes on themeforest use this plugin and they are static updated, with this solution now they can get dynamic.
Reg4Class lets private tutors and teachers manage their students, classes, locations, schedules and finances online. Set your class hourly rates, add students, create lesson schedules, record attendance, keep track of finance balance.
Promoter is a calendar based PHP script that allows you to create events listings websites.
Events Calendar allows you to easily add to your website a powerful interactive calendar to present your events.
This scripts allows your website’s registered users to chat with each other. Online users are detected and shown in different color, making people to know who is online. This plugin do not requires any third party plugins or configurations, hence can be run on any common php & mysql server.
As the administrator you have the control to add, edit, delete membership plans as well as manage/edit registered users.
This app enable your users to add events (including choosing the precise location on a Google Map) and be able to share that event on social networks and on their Facebook wall. Your users can also customize their event presentation by choosing a background.
This software allows you to synchronize a local folder with a demo environment and a working thus allowing you to facilitate the management of your site. Also synchronizes entire database and does not need to have a dedicated server php, simply insert a file in caretella to synchronize and when the scanning software will notify you which files will be updated or are in conflict if modified by another user, you can also add files to ignore.
PHP LBEvents
PHP LBEvents is a php script that allow you to create and manage events to display on a calendar. You can creates unlimited calendars with their settings and let user select it to display the events you want to show on it.
UCM Plugin: Calendar iCal
This is a plugin for the Ultimate Client Manager – Lite Edition. Please ensure you have purchased and installed the latest version of Ultimate Client Manager before using this plugin.
Google, iCal & XML Event List Calendar for (music) festivals, seminars and business events. Built on jQuery and PHP, this calendar grabs your events from your Google Calendar, another iCal (.ics) stream or just an XML file, and turns them into a comprehensive list.
Weekly calender is very simple php script which can be useed to manage and disply your weekly events in your website. With the admin panel you can add,edit and delete events.
Eventer, a PHP and jQuery based interactive events calendar, is a highly interactive calendar for presenting your events in a very highly interactive format.
The Zap Cal Library is an open source PHP library for reading and writing iCalendar files. The library has been in development for over 10 years supporting the Zap Calendar program, an open source application for the Joomla CMS, and more recently the iCalendar validator project at сайт. It is now available as a standalone library for PHP developers.
The Zap Calendar iCalendar Library is a PHP library for supporting the iCalendar (RFC 5545) standard. Several examples of reading and writing iCalendar files are included in the library
This PHP library is for reading and writing iCalendar formatted feeds and files. Features of the library include:
- Read AND write support for iCalendar files
- Object based creation and manipulation of iCalendar files
- Supports expansion of RRULE to a list of repeating dates
- Supports adding timezone info to iCalendar file
All iCalendar data is stored in a PHP object tree. This allows any property to be added to the iCalendar feed without requiring specialized library function calls. With power comes responsibility. Missing or invalid properties can cause the resulting iCalendar file to be invalid..
Here is an example of a PHP program to create a single event iCalendar file:
$title = "Simple Event"; // date/time is in SQL datetime format $event_start = "2020-01-01 12:00:00"; $event_end = "2020-01-01 13:00:00"; // create the ical object $icalobj = new ZCiCal(); // create the event within the ical object $eventobj = new ZCiCalNode("VEVENT", $icalobj->curnode); // add title $eventobj->addNode(new ZCiCalDataNode("SUMMARY:" . $title)); // add start date $eventobj->addNode(new ZCiCalDataNode("DTSTART:" . ZCiCal::fromSqlDateTime($event_start))); // add end date $eventobj->addNode(new ZCiCalDataNode("DTEND:" . ZCiCal::fromSqlDateTime($event_end))); // UID is a required item in VEVENT, create unique string for this event // Adding your domain to the end is a good way of creating uniqueness $uid = date("Y-m-d-H-i-s") . "@demo.. $uid)); // DTSTAMP is a required item in VEVENT $eventobj->addNode(new ZCiCalDataNode("DTSTAMP:" . ZCiCal::fromSqlDateTime())); // Add description $eventobj->addNode(new ZCiCalDataNode("Description:" . ZCiCal::formatContent("This is a simple event, using the Zap Calendar PHP library. " .."))); // write iCalendar feed to stdout echo $icalobj->export();
Одним из важных элементов на сайте является календарь, с помощью которого ваши пользователи могут отслеживать события, появления новых продуктов. Или просто читать записи или еще что только не придумаешь. Уделив несколько времени этому уроку, вы узнаете, как создать 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 скрипт календаря в русском стиле
| ".implode(" | ",$headings)." |
| <= $days_in_month; $list_day++): $calendar.= " | ".$list_day." |
Июнь 2012
Результат
PHP скрипт календаря в английском стиле
Впринципе, незнаю зачем он вам. Но, вдруг кому-то нужен именно такой. Код практически тот же.
/* Функция генерации календаря */ function draw_calendar($month,$year){ /* Начало таблицы */ $calendar = "
| ".implode(" | ",$headings)." |
| "; $days_in_this_week++; endfor; /* дошли до чисел, будем их писать в первую строку */ for($list_day = 1; $list_day <= $days_in_month; $list_day++): $calendar.= " | ";
/* Пишем номер в ячейку */
$calendar.= " ".$list_day." ";
/** ЗДЕСЬ МОЖНО СДЕЛАТЬ MySQL ЗАПРОС К БАЗЕ ДАННЫХ! ЕСЛИ НАЙДЕНО СОВПАДЕНИЕ ДАТЫ СОБЫТИЯ С ТЕКУЩЕЙ - ВЫВОДИМ! **/
$calendar.= str_repeat("",2);
$calendar.= " | ";
if($running_day == 6):
$calendar.= "
| "; endfor; endif; /* Закрываем последнюю строку */ $calendar.= " |
June 2012
"; echo draw_calendar(6,2012);Результат
Вот и все! Надеюсь, этот скрипт календаря на PHP, был полезен для вас. Не ограничивайтесь этим кодом, вносите коррективы и расширяйте скрипт. Кто планирует воспользоваться скриптом или уже воспользовался, просьба отписаться в комментариях и оставить ссылку на страницу с примером.
